The feedback I’ve received over the past week has been amazing, and matches my own excitement about this project. I’ve spent a lot of time researching, writing, and teaching about creating better typography for reading on digital devices over the years. This is the chance to put it all together and focus on the whole reading experience beyond just the typesetting.

在过去一周中，我收到的反馈令人惊讶，并且与我对这个项目的兴奋之情相吻合。 多年来，我花费了大量时间进行研究，写作和教学，以创建更好的字体以在数字设备上阅读。 这是将所有内容放在一起并专注于整个阅读体验的机会，而不仅仅是排版。

I also tracked down and bought my own copy of that Rockwell Kent edition on eBay and picked up what might be the most perfect domain name for the project I could imagine.

我还追踪并在eBay上购买了自己的罗克韦尔·肯特(Rockwell Kent)版本，并找到了我能想象到的最完美的域名。

Let’s be honest: what top level domain could possibly be better for Moby-Dick than… wait for it… ‘.wales’ (all due respect to Mark and Emma Boulton and everyone else who actually live there). So from here on out you can read the book at it’s new home mobydick.wales.

坦白说：对于Moby-Dick来说，哪个顶级域名可能比……等等……“ .wales ”(所有人都应尊重Mark和Emma Boulton以及实际上居住在那里的其他所有人)。 因此，从现在开始，您可以在新家mobydick.wales上阅读这本书。

This installment covers a lot of ground, so let’s start with a recap of the overall goals and the basics we put in place last week.

本期文章涵盖了很多领域，因此让我们首先回顾一下我们上周制定的总体目标和基础知识 。

我们旨在实现的目标 (What we aim to accomplish)

Great typography on the web should be designed in layers. The web is an imperfect medium, consumed by countless different devices over untold numbers of network connections — each with their own capabilities, limitations, and peculiarities. To think that you can create one solution that will look and work the same everywhere is a fantasy. To make this more than just one nice book website, the whole project and process needs to embrace this reality. So here are some guiding principles.

Web上的出色排版应分层设计。 Web是一种不完善的介质，无数不同的设备通过无数的网络连接使用了每种介质-每个都有自己的功能，局限性和特殊性。 认为您可以创建一个在任何地方看起来和工作都一样的解决方案是一种幻想。 为了使这不仅仅是一个好书的网站，整个项目和过程都需要接受这一现实。 因此，这里有一些指导原则。

Semantics — Start with well-written HTML. I’ve done my best to alter the underlying HTML of the text as little as possible. This also means that when using these techniques with a CMS, you won’t have to rely upon content authors doing a lot of fiddly custom formatting or code.

语义 -从编写良好HTML开始。 我已尽力减少了文本的底层HTML。 这也意味着，将这些技术与CMS配合使用时，您将不必依赖内容编写者进行大量自定义格式或代码的操作。

Foundations — Start with typography that will look and work great even if web fonts don’t load. You can establish a lot of good typography with basic CSS and commonly installed fonts like Georgia.

基础 -从排版开始，即使不加载Web字体，外观和效果也很好。 您可以使用基本CSS和常用安装的字体(例如Georgia)来建立许多好的字体。

Progressive enhancement — Once we have the basics covered, we can add our web fonts of choice. We’ll start with static or traditional web fonts as those are supported by the most browsers. Then we’ll add variable fonts for browsers that support them. In every place we can, we will support older browsers and less fully-featured devices, and layer in support for newer and more robust ones. This goes for CSS techniques, typographic scale, and layout choices in addition to those around fonts and font technologies.

渐进式增强 —涵盖了基础知识之后，我们可以添加我们选择的Web字体。 我们将从大多数浏览器支持的静态或传统Web字体开始。 然后，我们将为支持可变字体的浏览器添加可变字体。 我们将在任何可能的地方都支持较旧的浏览器和功能较差的设备，并支持更新和更强大的浏览器。 除字体和字体技术外，这还适用于CSS技术，印刷比例尺和布局选择。

Performance — You have about 3 seconds to get your content on screen before visitors bail. By using ‘font-display: swap’ and a web font loader we can not only improve the page-to-page performance, but we can also smooth out the initial experience. By adding styles to fallback fonts we can get content on screen immediately while web fonts are loading, and minimize disruption or reflow once they do.

性能 -在访客保释之前，您有大约3秒钟的时间将内容显示在屏幕上。 通过使用“字体显示：交换”和网络字体加载器，我们不仅可以提高页面到页面的性能，而且还可以使初始体验更加流畅。 通过为后备字体添加样式，我们可以在加载Web字体时立即在屏幕上显示内容，并最大程度地减少干扰或回流。

Offline — Embracing the offline access techniques and technologies behind Progressive Web Apps helps improve overall performance and resilience by reducing the need to hit the network at all. And with books that means it can behave more like a traditional ebook.

脱机 -在渐进式Web应用程序背后采用脱机访问技术和技术，可通过减少根本不打入网络的需求来帮助提高整体性能和弹性。 而对于书籍而言，这意味着它的行为更像传统的电子书。

Reader’s choice — Supporting different light modes, spacing, font size — these are all well supported in CSS. Making it part of our process is good for user experience, good for accessibility, and good for project portability too.

读者的选择 -支持不同的灯光模式，间距，字体大小-CSS都很好地支持了这些。 使其成为我们流程的一部分，既有益于用户体验，也有利于可访问性，也有利于项目的可移植性。

Book-ishness — This is perhaps the one part of this effort that is really specific to the project at hand: creating a web-based book. My hope is that we’ll see just how much further we can push that experience and tailor it for multiple kinds of devices and inputs.

书本化 -这也许是这项工作中真正针对手头项目的一部分：创建基于网络的书本。 我的希望是，我们将看到我们可以进一步推广这种经验，并针对多种设备和输入量身定制。

到目前为止我们所做的 (What we’ve done so far)

Last week was largely about just getting the text of the book into website form. We broke up the text into separate documents for each chapter, brought it into a site generator to make the maintenance a bit easier, and added navigation to get back and forth between chapters. We also set up some basic typographic choices:

上周主要是将书中的文字变成网站形式。 我们将每一章的文本分为不同的文档，将其带到站点生成器中以使维护更加容易，并添加了导航以在各章之间来回切换。 我们还设置了一些基本的印刷选择：

• Set font sizes for hierarchy between headings and body copy设置标题和正文之间的层次结构的字体大小
• Set line-height to help establish vertical spacing设置线高以帮助建立垂直间距
• Set a maximum width on content to maintain a readable line length设置内容的最大宽度以保持可读的行长
• Decided on text-indent rather than spacing for paragraphs, as we’re designing for longer-form reading rather than a more typical skimming behavior决定文本缩进，而不是段落间距，因为我们正在设计较长格式的阅读，而不是更典型的略读行为

These choices were ok to start, but far from ideal across device sizes. This week we’re taking it a whole lot farther.

这些选择可以开始，但是在各种设备尺寸上都不理想。 这周我们要走的更远。

第2部分：响应式排版和项目基础 (Part 2: Responsive typography and project foundations)

There’s actually a lot more going on than just setting up the responsiveness of the typographic system, so I’ll break it up into three different sections:

实际上，除了设置印刷系统的响应能力之外，还有很多事情要做，所以我将其分为三个不同的部分：

• Typography版式
• User interface and content用户界面和内容
• Code scaffolding and approach代码脚手架和方法

响应式排版 (Responsive typography)

Typographic hierarchy is all about proportion. And when screen size changes, the specifics of those proportions should change too. Small screens like phones show less text, so we don’t need to exaggerate the scale differences between headings and body copy quite as much. They also pose different challenges with regard to line length with larger headings, and rag irregularities in the body (in left-to-right reading languages, that’s the uneven right-hand edge of the text). It’s part preference, part practicality to leave the text ‘rag-right’: justification (making both edges of the text even) doesn’t work well on the web, especially on small screens. My preference is to use hyphenation and a ragged right edge.

印刷层次结构完全与比例有关。 当屏幕尺寸改变时，这些比例的细节也应改变。 像电话这样的小屏幕上显示的文字较少，因此我们无需过多地夸大标题和正文之间的比例差异。 对于较大标题的行长和正文中的碎布不规则(在从左到右的阅读语言中，这是文本的不均匀右边缘)，它们也带来了不同的挑战。 让文本“从右到右”是部分偏爱，也是部分实用性：对齐(使文本的两个边缘均匀)在Web上效果不佳，尤其是在小屏幕上。 我的偏好是使用连字符和参差不齐的右边缘。

By using media queries, we can tailor the typographic scale differently across screen sizes and even turn hyphenation on for body copy on smaller screens. This way we can have more readable headings that still stand out on our phones, and create more balanced body copy without resorting to reducing font size. As screens get larger we can turn off the hyphenation as we won’t really need it there to balance the design. On those larger screens we’ll set our headings bigger, as they have more to compete with as windows get wider and layouts get busier.

通过使用媒体查询，我们可以跨屏幕尺寸不同地调整印刷比例，甚至在较小的屏幕上打开连字符以进行正文复制。 这样，我们可以使手机上的标题仍然更具可读性，并在不求助于减小字体大小的情况下，创建更加平衡的正文。 随着屏幕变大，我们可以关闭连字符，因为我们实际上并不需要它来平衡设计。 在更大的屏幕上，我们将标题设置为更大，因为随着窗口变宽和布局变得更忙，它们将具有更多的竞争力。

h1 {  font-size: 2.25rem;  ...  /* Mid-size screens */  @media screen and (min-width: 42em) {    font-size: 3rem;    ...  }  /* Larger screens */  @media screen and (min-width: 60em) {    font-size: 4rem;    ...  }}p {  font-size: 1rem;  ...  /* Mid-size screens */  @media screen and (min-width: 42em) {    font-size: 1.125rem;    ...  }  /* Larger screens */  @media screen and (min-width: 60em) {    font-size: 1.25rem;    ...  }}

We’ve started out by establishing a simple small/medium/large sort of scale, and applied that to headings and body copy — but have scaled those elements differently. This roughly corresponds to phone, tablet, and desktop — but it’s really about window size and resolution here more than the specifics of the device.

我们首先建立了一个简单的小/中/大比例尺，并将其应用于标题和正文，但这些元素的比例不同。 这大致对应于手机，平板电脑和台式机-但实际上，此处的窗口大小和分辨率远比设备的具体特性重要。

I also tweaked some of the margins and the text styles for the header and footer to improve the experience across the range of device sizes. That brings us to the user interface.

我还调整了页眉和页脚的一些边距和文本样式，以改善跨各种设备尺寸的体验。 这将我们带到用户界面。

UI更新以及内容调整和添加 (UI updates and content tweaks and additions)

After viewing the project on my iPhone 11 (the smaller one) I wanted to make sure the baseline experience was better for smaller screens. I tweaked the alignment and scale of the chapter navigation in the header, reduced the font size and margins in the footer, and updated the previous/next chapter navigation.

在iPhone 11(较小的iPhone)上查看了项目之后，我想确保基线经验对于较小的屏幕更好。 我调整了标题中章节导航的对齐方式和比例，减小了页脚的字体大小和页边距，并更新了上一章/下一章的导航。

Since the Rockwell Kent edition showed up late last week, I also photographed some of the images and added them to the site. Since they’re such a big part of what I find so compelling, I wanted to get a few in and work on the baseline image styles. They’re all black-and-white and there aren’t that many per chapter so it’s not as beneficial to set up responsive images, but I do want to have good markup and ‘alt’ text. I set up enough styles to give some flexibility for size and alignment as well.

自从上周下半年罗克韦尔·肯特(Rockwell Kent)版本出现以来，我还拍摄了一些图像并将其添加到该站点。 由于它们是我认为如此引人注目的很大一部分，因此我想了解一些并从事基线图像样式的研究。 它们都是黑白的，每章没有那么多，因此设置响应图像并不是那么有益，但是我确实希望拥有良好的标记和“ alt”文本。 我设置了足够的样式，以便为尺寸和对齐方式提供一些灵活性。

One of the only significant change I made to the HTML I got from Project Gutenberg was the addition of blockquotes. There was a bit of a mishmash in Extracts that looked like it would benefit from that kind of structure, so I went through and marked them all up consistently. Since there were two different kinds of usage I created a ‘quiet’ style that kept text size in line with the surrounding text, and a more normal one that was a bit bigger and set off from its surroundings. It may require more refinement in the future but for now it’s made for a nice improvement.

我从古腾堡计划中获得HTML所做的唯一重大更改之一就是添加了blockquotes。 提取物中有一些杂烩，看起来可以从这种结构中受益，所以我仔细研究了一下，并将它们全部标记为一致。 由于存在两种不同的用法，因此我创建了一种“安静”的样式，使文本大小与周围的文本保持一致，并创建了一种更普通的样式，该样式稍大一些并与周围的环境偏离。 将来可能需要进一步完善，但现在已经进行了很好的改进。

代码脚手架和方法 (Code scaffolding and approach)

In keeping with our goal of supporting the widest possible spectrum of devices, network capabilities, screen sizes, and coding approaches, the project is set up with a layered approach. If you install and build the project from the source, you’ll see how that works end-to-end. If you just grab the compiled site (from in the ‘_site’ directory), you’ll still see a fair bit. Here’s how it’s set up.

为了满足我们支持尽可能广泛的设备，网络功能，屏幕尺寸和编码方法的目标，该项目采用分层方法进行设置。 如果从源代码安装和构建项目，您将看到端到端的工作方式。 如果您只是从(_site)目录中获取已编译的站点，您仍然会看到一点点。 设置方法如下。

In order to support browsers that don’t ‘get’ custom properties, I’ve set up the project with a layered approach. Since I’m using Sass, I’ve set up a two-step process to define variables in Sass, which then also supplied to the definition of corresponding CSS custom properties. This way we can use the staticky compiled Sass variables in the initial declarations for font size, line-height, color, etc., and then redeclare them with the custom properties so we can alter them more easily in the future. I included a couple of extra transformations in order to keep it simple at the outset: just supply pixel values in the variables file and they’ll be converted to ‘rem’ or ‘em’ values as needed for the most flexible results in our final output.

为了支持不“获取”自定义属性的浏览器，我使用分层方法设置了项目。 由于我正在使用Sass，因此我建立了一个两步过程来定义Sass中的变量，然后还将其提供给相应CSS自定义属性的定义。 这样，我们就可以在字体大小，行高，颜色等初始声明中使用staticky编译的Sass变量，然后使用自定义属性重新声明它们，以便将来更轻松地对其进行更改。 为了使它从一开始就保持简单，我添加了一些额外的转换：只需在变量文件中提供像素值，它们就会根据需要转换为'rem'或'em'值，以实现最终结果中最灵活的结果输出。

/* Change px values here for all font sizing */$p-size-s-px: 16;$p-size-m-px: 18;$p-size-l-px: 20;/* Font size rem values (needed for dynamic sizing) */$p-size-s-value: $p-size-s-px / $text-base-size;$p-size-m-value: $p-size-m-px / $text-base-size;$p-size-l-value: $p-size-l-px / $text-base-size;/* Font sizes in rems */$p-size-s: $p-size-s-value * 1rem;$p-size-m: $p-size-m-value * 1rem;$p-size-l: $p-size-l-value * 1rem;/* CSS custom properties for all modern browsers */:root {  --p-size-s-value: #{$p-size-s-value};  --p-size-m-value: #{$p-size-m-value};  --p-size-l-value: #{$p-size-l-value};  --p-size-s: #{$p-size-s-value * 1rem};  --p-size-m: #{$p-size-m-value * 1rem};  --p-size-l: #{$p-size-l-value * 1rem};}

I’ve also set up functional assignments for color usage. It’s easier to change the color palette and only one place to update the color assignment. By having everything mapped from a specific color to ‘text color’ or ‘background color’ variables, it’s also easier to change those palette assignments for dark mode or a higher contrast setting.

我还为颜色使用设置了功能分配。 更改调色板更容易，而只需一个地方即可更新颜色分配。 通过将所有内容从特定颜色映射到“文本颜色”或“背景颜色”变量，可以更轻松地将那些调色板分配更改为暗模式或更高的对比度设置。

Corresponding to the responsive typographic scale shown above, the text size and line-height variables are in sets of three values for smallest, mid-range, and largest values.

对应于上面显示的响应式印刷比例，文本大小和行高变量在三个值的集合中，分别代表最小值，中间范围和最大值。

到目前为止的进展 (Progress so far)

While we did have to do a fair bit of plumbing and foundational work, I hope it’s clearer now just how much we can do typographically without even loading a single web font. We now have the entire book comfortably readable on virtually any device, and we’re starting to get some of the artwork in and refinements in place that help make it a book instead of simply a collection of pages.

尽管我们确实需要做一些基础工作，但我希望现在可以清楚地知道即使不加载单个Web字体，我们也可以进行印刷工作。 现在，我们几乎可以在任何设备上舒适地阅读整本书，并且我们开始获取一些插图和适当的改进信息，以帮助使它成为一本书，而不仅仅是页面的集合。

Next time we’ll be adding web fonts — and I’m really excited to show you a brand-new release. I’ve had the chance to work with it over the last couple months quite a bit, but it’s only now become public.

下次我们将添加Web字体-非常高兴为您展示一个全新的版本。 在过去的几个月中，我有很多与之合作的机会，但现在才公开。

资源资源 (Resources)

• View at the new URL mobydick.wales

  在新的URL上查看mobydick.wales

• Project source on GitHub

  GitHub上的项目源

• Resilient Web Design (a wonderful web-based book by Jeremy Keith, and inspiration in both content and execution)

  弹性Web设计 (Jeremy Keith撰写的精彩的基于Web的书，内容和执行方面都有灵感)

• Got an email from fellow community member Justin with links to Oliver Byrne’s online edition of The Elements Euclid and Justin’s own edition of A Briefer History of Time. I’d seen the former, but not the latter. Great stuff!

  从社区成员贾斯汀那里收到了一封电子邮件，其中包含奥利弗·伯恩(Oliver Byrne)在线版的《元素欧几里得》和贾斯汀自己的《时间简史》的链接 。 我见过前者，但没有见过。 好东西！

• Part 1: Introducing the project

  第1部分：项目介绍

• Part 3: Adding web fonts

  第3部分：添加网络字体

This is an excerpt from my weekly newsletter about web fonts and typography. If you’d like a weekly dose of web typography tips, news, and my upcoming talks and workshops, you can sign up for the newsletter here.

这是我关于网络字体和排版的每周新闻摘要。 如果您希望每周获得大量的网络排版技巧，新闻以及我即将举行的讲座和研讨会，则可以 在此处注册新闻通讯 。

If you this helpful, please share what you make — and if there’s something you’d like to see covered in a future issue, please let me know!

如果您有帮助，请分享您的工作-如果您希望在以后的期刊中看到一些内容，请告诉我！

Originally published at rwt.io on April 20, 2020.

最初于 2020 年4月20日 在 rwt.io 上 发布 。