为什么medium.css读起来像Medium？Lora、Montserrat与Playfair Display三大字体密码解析

为什么medium.css读起来像MediumLora、Montserrat与Playfair Display三大字体密码解析【免费下载链接】medium.cssCompact typography for the web项目地址: https://gitcode.com/gh_mirrors/me/medium.cssmedium.css是一个极简的 Web 排版样式表用一份不到 100 行的 CSS 文件就能让普通网页拥有 Medium.com 那样舒适的阅读体验。它的秘诀在于精准复刻了 Medium 的三大字体搭配正文用衬线字体Lora、界面元素用无衬线字体Montserrat、标题与引用用高对比度的Playfair Display。无论你是内容型博客作者还是想让文档「看起来就值钱」的开发者这份 Medium 排版指南都能帮你在 1 分钟内搞定字体与间距的「黄金比例」。上图正是 medium.css 的实战效果衬线大标题 首字下沉 衬线正文一眼就有「Medium 味」。一个 CSS 文件复刻 Medium 的「高级感」medium.css 的定位非常克制它不是一整套 UI 框架而是一套只为阅读而生的排版基线只覆盖最核心的 HTML 元素覆盖元素效果h1/h2标题层级品牌感拉满p/i/a正文、斜体、链接blockquote大号斜体引用块code/mark行内代码、高亮文本.first-letter/.subtitle/.highlighted首字下沉、副标题、荧光高亮作者 Luca Gesmundo 的出发点很实在做内容站时总在为「怎么排版才不难看」而纠结于是直接拆解了排版标杆 Medium 的规则提炼成这份可直接套用的起点。相关说明见 README.md 中的Why与Usage小节。三大字体密码内容、UI、品牌各归其位medium.css 的核心思想是一套好排版需要三把「钥匙」分别打开内容、界面、品牌三个场景的门。这也是 demo/src/main.pug 中「The hero」一节的观点。角色字体字族使用位置内容字体 ContentLora衬线 serif正文p、斜体i、链接aUI 字体Montserrat无衬线 sans-serif章节标题h2、副标题等界面元素品牌字体 BrandPlayfair Display衬线 serif大标题h1、引用块blockquote、首字下沉为什么是这三款Lora是为屏幕阅读设计的衬线体笔画的「衬脚」能牵引视线顺畅地滑向下一个词长时间阅读不累Montserrat是干净的无衬线体和衬线正文形成强对比负责结构标题、元信息不打扰阅读Playfair Display拥有极深的粗细对比high-contrast自带「杂志封面」气质专用于品牌曝光点——大标题、引用、首字。一个隐藏细节README 中声明 UI 字体为 Montserrat但发布的 medium.css 实际引入的是LatoLato:400,700。两者字形风格接近Lato 笔画更轻盈用在 26px 的h2上更不「抢戏」。这就是官方选型的实用主义。逐条拆解三大字体是如何被调教的光有字体还不够medium.css 对每种字体都做了精细的「参数调校」这才是读感的关键1️⃣ 大标题Playfair Display48pxh1 { font-family: Playfair Display, serif; font-size: 48px; margin-bottom: 8px; }对应 medium.css。高对比衬线 大字号标题一出现就有「封面感」。2️⃣ 章节标题无衬线 26px 负字距h2 { font-size: 26px; font-weight: 700; line-height: 34.5px; letter-spacing: -0.45px; }对应 medium.css。letter-spacing: -0.45px让标题字母略微「挤」在一起显得紧凑有力。3️⃣ 正文Lora 21px1.58 倍行高p, i, a { font-family: Lora; font-size: 21px; letter-spacing: -0.03px; line-height: 1.58; }对应 medium.css。1.58是 Medium 的招牌行高——两行文字之间几乎空出半行长文也不压抑而-0.03px的负字距让单词更抱团。4️⃣ 引用块斜体 Playfair Display字号提到 30pxblockquote { font-family: Playfair Display, serif; font-size: 30px; font-style: italic; color: rgba(0, 0, 0, 0.68); padding: 0 0 0 50px; }对应 medium.css。引用块用品牌字体斜体放大并且颜色比正文更浅形成视觉「停顿点」。5️⃣ 首字下沉60px 的 Playfair Display 大写字母.first-letter类用 60px、60px 行高的 Playfair Display 字母左浮动恰好横跨两行正文对应 medium.css。旧式书籍排版「首字下沉」的仪式感被一行 CSS 复现了。另外两个小彩蛋.highlighted/mark用荧光绿#7DFFB3做荧光笔效果medium.css::selection选中文本时显示淡紫色 lavendermedium.css——细节处全是 Medium 的味道。三条「看不见」的排版铁律字体之外medium.css 还内置了三条让页面「看起来贵」的隐形规则文字不是纯黑正文统一用rgba(0, 0, 0, 0.84)medium.css比纯黑柔和眼睛更放松行宽不超过 740px演示布局中正文列宽固定 740pxdemo/src/medium_extended.css避免视线左右奔跑色彩分层正文 84% 黑、副标题 54% 黑、引用 68% 黑用透明度制造层级而不是靠字号堆砌。1 分钟上手medium.css 安装步骤方式一npm 安装npm install --save medium.css方式二直接引入文件不使用打包工具时下载 medium.css 在 HTML 中链接即可。本地跑 Demo 看看效果git clone https://gitcode.com/gh_mirrors/me/medium.css cd medium.css/demo npm install npm start演示页面源码在 demo/src/main.pug完整布局版样式表见 demo/src/medium_extended.css。小结medium.css 用「Lora 管阅读、Montserrat 管结构、Playfair Display 管品牌」的三字体分工加上 1.58 行高、84% 黑、740px 行宽这三组隐形参数把 Medium 的阅读体验压缩进了一份轻量 CSS。如果你的博客、文档站还在为排版发愁不妨把它当作字体搭配的起点再按自己的品牌色微调highlighted与selection两个颜色即可。✍️【免费下载链接】medium.cssCompact typography for the web项目地址: https://gitcode.com/gh_mirrors/me/medium.css创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考