我读的每个开发者博客在建立这个之前使用同样的字体。Inter，或system-ui，或某个看起来在组件库上很好的几何sans而说零关于写东西的人。我的不。打开这里任何页面而你读Literata，一个serif，在标题和身体文本两者。那不是一个意外它花费了更长的着陆比我期望。
我给自己的简报
当我坐下重做这个网站的外观（整个事情通过超过我想承认的重新设计轮，追踪如V1通过V7.3在我自己的笔记如果你想尴尬细节）第一遍是"现场笔记，苔藓和纸。"泛型自然博客能量。我自己的复查者，这是说我一周后，因为读完全像其他博客模板所有东西而拒绝它。想法那活了是"日志，大声"某个东西那读像一个实际笔记本某人保持，不一个内容营销登陆页面用一个博客栓住了。
一个sans-serif UI脸不自己得到你那里。Sans是什么你接近默认因为每个设计系统船一个，和因为它呈现清楚在小UI大小。但身体文本的一个段落设置在几何sans读像软件，不写作。Serifs进位那个旧报纸和书关联无论你是否想要他们，和自从这个网站是大多数我关于什么我构建和什么出错写，我想要它读像写了什么，不像仪表板。
为什么特别是Literata
我不想要一个显示serif那只在标题大小工作并在17px分开。Literata构建为完全这个，它开始生活作为一个Google项目为屏幕上阅读在书长度，而它来作为一个变量字体，权重400通过900，罗马和斜体两者，在一个文件每个样式。这重要因为一个重量对h1和一个轻对身体复制来自同一张脸代替两个不同字体假装匹配。
--font-display: 'Literata', ui-serif, Georgia, serif;
--font-body: 'Literata', ui-serif, Georgia, serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;显示和身体两者指向同样的族。标题和段落是同样的排版在不同权重，这是部分什么让整个页面读作一个声音代替一个标题字体做一个表演在泛型身体文本下面它。
CDN错误
第一遍在连接这个，我做什么每个教程告诉你做：链接标签直接到Google字体，在五分钟内完成。
<!-- 第一遍 -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Literata:wght@400..900&display=swap"
/>它工作，在字体显示的意义。什么我没有想的是这意味着每个访客的浏览器对Google之前做一个第二个网络往返什么真实文本能呈现，和如果那请求是缓慢的或阻挡的，这个回退栈踢在和然后交换在你下面，那是什么每个人抱怨的闪烁但没有人命名对（这不是"未样式的"，这是"样式在错的字体一秒钟"）。
修复是供应商它。我拉实际woff2文件从Google字体CSS2 API一次，通过手，和提交他们在static/fonts/，下子集到拉丁加拉丁扩展所以我不发送没有人这个网站上需要的西里尔和希腊字形表：
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/fonts/literata-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}四个这些块总计，正常和斜体，拉丁和拉丁扩展，每一个用它自己的unicode-range所以一个浏览器只下载子集它实际上需要呈现页面在前面它。没有npm包，没有字体CDN在运行时，无物指向一个Google服务器了。IBM Plex Mono，代码块字体，仍然来Google字体CDN因为它是一个远更小的问求（一个权重对，用在代码，不整个页面）而我还没有得到围绕供应商它太。一致会说我应该。我还没有。
读测度，事情没有人注意直到它错
有一个CSS类在布局叫.measure：
.measure {
max-width: 68ch;
}ch是一个单位意思"大约字符0在当前字体的宽度。"上限身体文本在68这些而你封有行长在某个地方大约65-75字符取决于字母形式，这是排版人群几十年引用作为甜蜜点在你的眼睛开始失去它的地方跳回到下一个线的启动之前。全宽文本在一个宽显示器没有测度控制真正不舒服读超过一段落，和几乎没有博客模板打扰执行它，他们只是让内容列伸展到无论什么网格给它。
我不知道这个术语在我开始付注意为什么某些博客感觉容易读而别人感觉像工作甚至当写作本身是好。这不是字，这是线长。
实际原因，在所有那下面
所有的技术论证是真的但它也有点在事实后。真实原因是我想要这个事物感觉像我的而不是像我安装的一个主题。一个家伙在Lovund写关于Django脚本和半马在同样的排版Random House用对真实书感觉对了不匹配。大多数开发者博客是sans因为"清洁"和"技术"得到等同某个地方沿着方式而没有人质疑了它自从。我的不必看像一个SaaS登陆页面。它不是一个。
这个规模也不平坦
一旦这个排版定居我仍然有决定多大声每个大小得到了相对于别的。这里的类型规模约在1.25比率大约步骤，一个h3在1.3125rem，h2在1.6875rem，通过h1在2.125rem，用身体文本坐在1.0625rem和一个线高1.65（那数字重要几乎像字体选择一样，太紧而一个serif在身体大小得到视觉上吵杂，太松而段落开始感觉分开从彼此）。文章标题特别不跟那个固定步骤梯形都得到，他们规模用clamp()在2.25rem和3.5rem之间取决于视口宽度，自从一个文章标题是一个地方在一个页面我想要一个真的大声显示时刻而不是另一个跑上一个可预测规模。h1进位最重权在整个页面，800，虽然h2通过h4全部坐在700，所以有完全一个"呼喊"在整个等级制度而每个东西别的保持一步更安静比它，故意。