This is a big week for the project. While it was an important step last week to establish some basic responsiveness, we couldn’t really nail down the typography until we added the typeface. Too many aspects of the feel, proportions, and overall ‘color’ are tied not only to the specifics of the typesetting values, but also to the typeface itself. It’s important to remember that not only are we working with spacing around letters and words, but the typeface choice involves looking closely at the spacing inside the letters, and finding balance between the two.

這是該項目的重要一周。 上周建立基本響應能力是重要的一步，但直到添加字體后，我們才能真正確定字體。 感覺，比例和整體“顏色”的太多方面不僅與排版值的細節有關，而且還與字體本身有關。 重要的是要記住，我們不僅要處理字母和單詞之間的間距，而且字體的選擇還需要仔細查看字母內部的間距，并在兩者之間找到平衡。

文獻資料(v3)簡介 (Introducing Literata (v3))

This week we’ll be adding in a new typeface in both static and variable form, and I’m really pleased to be able to share that choice: Literata (v3) from TypeTogether (on behalf of Google Fonts). I’ve been working with this version for a few months now and am super excited to finally be able to share it with all of you. Literata was originally commissioned by Google to be the font for their ebook reader application back in 2014. Now in its third iteration, they’ve expanded the weight range and added optical sizes for both static and variable versions. It’s really lovely, and has been designed from the beginning for long-form reading on screens.

本周，我們將添加靜態和可變形式的新字體，我非常高興能夠分享這一選擇： TypeTogether的Literata ( v3) (代表Google字體)。 我已經使用此版本幾個月了，很高興終于能夠與大家共享它。 Literata最初由Google委托于2014年成為其電子書閱讀器應用程序的字體。現在，在第三次迭代中，他們擴大了重量范圍，并增加了靜態和可變版本的光學尺寸。 它真的很可愛，并且從一開始就設計用于在屏幕上進行長時閱讀。

This version features 4 different optical size versions of the static fonts, plus a variable version. They all feature a weight range of 200–900 in upright and italics. Since the Github repository only has the source files, I’ve compiled all of them as ‘woff’ and ‘woff2’ (just ‘woff2’ for the variable one) and included the entire family in case you want to use them. Note that they’ve been subset to Latin 1 Extended already, so if you need a larger character set you might have better luck building from the source files on GitHub.

此版本具有4種不同的光學尺寸的靜態字體版本，以及一個可變版本。 它們的直立和斜體重量范圍均為200–900。 由于Github存儲庫僅包含源文件，因此我將它們全部編譯為“ woff”和“ woff2”(對于變量one僅為“ woff2”)，并包括整個家族，以備您使用時使用。 請注意，它們已經是Latin 1 Extended的子集，因此，如果您需要更大的字符集，則可以從GitHub上的源文件構建更好的運氣。

精細光學 (Fine optics)

The optical size static fonts are tuned for 7pt, 12pt, 36pt, and 72pt usage. I’ve opted to use them for ‘smaller than body’, ‘body text range’, ‘medium headings’, and ‘big headings’. While using these in our typesetting does then entail loading more font files, if the goal is to make the best reading experience then this is what we should do. And once we add the variable fonts, it cuts the data download and reduces the number of file requests. You can see the comparison of optical sizes alongside the variable version over on CodePen.

調整了光學尺寸的靜態字體以適應7pt，12pt，36pt和72pt的使用。 我選擇將它們用于“小于正文”，“正文范圍”，“中等標題”和“大標題”。 在我們的排版中使用這些字體時，確實需要加載更多的字體文件，如果目標是獲得最佳的閱讀體驗，那么我們應該這樣做。 一旦添加了可變字體，它就可以減少數據下載并減少文件請求的數量。 您可以在CodePen上看到光學尺寸的比較以及可變版本。

將文學作品帶入我們的文學 (Bringing Literata to our literature)

If I were sticking with a more typical approach to font selection, I would likely have chosen 5 different files at most: 4 for body copy (regular, bold, italic, bold italic), and perhaps one other weight for larger headings. But since the goal is great typography, it felt like more of our overall data load could be dedicated to fonts.

如果我堅持使用更典型的字體選擇方法，那么我最多可能會選擇5個不同的文件：4個用于正文復制(常規，粗體，斜體，粗體斜體)，也許還有另一個粗體用于較大的標題。 但是由于目標是出色的排版，因此感覺我們整體數據負載中的更多內容可能專用于字體。

So I leaned in to the available optical sizes and tailored our font selections for intended size in addition to weight. This brought our font tally to 10 or so — but that’s still only around 350k of font data. When the variable font versions are loaded, it drops to only 2 requests and about 300kb of font data. Given that each chapter typically has only 2–4 images and so far we’re loading no Javascript at all, devoting some download to fonts (which are cached form page-to-page anyway) seems just fine.

因此，我依靠可用的光學尺寸，除了重量之外，還針對預期的尺寸量身定制了字體選擇。 這使我們的字體計數達到10左右-但這仍然只有350k左右的字體數據。 加載可變字體版本后，它僅下降到2個請求和大約300kb的字體數據。 鑒于每個章節通常只有2-4張圖片，并且到目前為止，我們根本沒有加載Java腳本，因此將一些下載內容專門用于字體(無論如何都是逐頁緩存)。

Of note: we could have saved almost 100kb of font data if we had stripped out more of the OpenType features, but retaining true small caps, ligatures, and alternate numeral styles will be a big part of the design, so seemed a worthy tradeoff.

值得注意的是：如果我們剝離了更多OpenType功能，我們可以節省近100kb的字體數據，但是保留真正的小寫字母，連字和其他數字樣式將是設計的重要部分，因此似乎值得權衡取舍。

關于@ font-face (About @font-face)

If you take a look at the font declarations, you’ll see they’re quite extensive: I’ve included every weight (upright and italic) for every optical size, plus the two variable fonts (caniuse variable fonts support). We’re not loading all of these, but I thought it might be easier for you to be able to just copy that file and pare it down to what you want to use. A font download isn’t triggered until it’s called for in a font-family declaration, so there’s no concern about unnecessary data download.

如果您看一下字體聲明，您會發現它們的范圍很廣：我已經為每種光學尺寸包括了每個粗細(垂直和斜體)，以及兩個可變字體( caniuse可變字體支持 )。 我們沒有加載所有這些文件，但是我認為，僅復制該文件并將其縮減為您想要使用的文件可能會更容易。 除非在字體家族聲明中要求調用字體下載，否則不會觸發該字體下載，因此無需擔心不必要的數據下載。

In order to then use the fonts in our styles, we’ll continue with our practice of progressive enhancement: first we declare the static fonts (with fallbacks), then we include an ‘@supports’ block to layer in the variable fonts. Since CSS has to be parsed first before anything else happens, the browser will never download both static and variable versions referenced in the same selector.

為了然后在樣式中使用字體，我們將繼續進行漸進增強的做法：首先，聲明靜態字體(帶有后備)，然后在可變字體中逐層添加'@supports'塊。 由于必須先解析CSS，然后才能進行其他操作，因此瀏覽器將永遠不會下載在同一選擇器中引用的靜態和可變版本。

h1 {
  --text-opsz: var(--h1-opsz-l);
  font-family: "Literata Display", Georgia, "Times New Roman", serif;
  font-weight: 300;
}
/* Load variable fonts instead for browsers that can render them */
@supports (font-variation-settings: normal) {
  h1 {
    font-family: "Literata Variable", Georgia, "Times New Roman", serif;
    font-variation-settings: "opsz" var(--text-opsz);
    font-weight: 250; 
  } 
}

是時候出汗一些細節了 (Time to sweat some details)

Now that we’re loading the right fonts we can revisit the typography overall and make some adjustments. Since we now have a much wider weight range and a set of optical sizes to work with, we can set about using that vocabulary. I decided to play with the extremes of weight with the book title and chapter titles: 900 weight on the former, but only 250 for chapter titles.

現在，我們正在加載正確的字體，我們可以整體重新查看字體并進行一些調整。 由于我們現在的重量范圍更廣，可以使用一組光學尺寸，因此可以著手使用該詞匯表。 我決定在書名和章標題中發揮極端的作用：前者重900，而章標題重250。

This, coupled with the highest value for optical size, gives a really distinctive feel and let me make the headings even a bit bigger without feeling overwhelming. I also enabled discretionary ligatures for headings so we can get those lovely connecting strokes between lower case ’st’ and ‘ct’ (among others).

加上最大的光學尺寸，給人一種真正獨特的感覺，讓我在不感到不知所措的情況下使航向變得更大。 我還為標題啟用了任意連字，這樣我們就可以在小寫的“ st”和“ ct”(以及其他)之間獲得可愛的連接筆觸。

h2 {
  font-family: "Literata Deck", Georgia, "Times New Roman", Times, serif;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

You can also see below in the styles for the first line of the paragraph that we’re utilizing a slightly different weight and true small caps for the first line. Since we’re using the OpenType feature to get the small caps, we already have some emphasis on that first line. I wanted the type to stand apart, but using the bold weight as well was a little too much. So where we’re using the variable font we’re able to tailor the weight a bit and call for 525 rather than 625 (the weight we’re using for bold). These values are for the variable fonts; we’re calling for 500 and 600 weights in the static files.

您還可以在以下段落的第一行樣式中看到，我們在第一行中使用了稍有不同的粗細和真正的小寫字母。 由于我們使用的是OpenType功能來獲取小寫字母，因此我們已經在第一行進行了一些強調。 我希望該類型能夠脫穎而出，但同時使用大膽的重量也太多了。 因此，在使用可變字體的地方，我們可以略微調整粗細，并要求525而不是625(粗體使用的粗細)。 這些值適用于可變字體。 我們在靜態文件中要求500和600權重。

strong {
  font-weight: 600;
}
@supports (font-variation-settings: normal) {
  strong {
    font-weight: 625;
  }
}.chapter > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  font-weight: 500;
}
@supports (font-variation-settings: normal) {
  .chapter > p:first-of-type::first-line {
    font-weight: 525;
  }
}

但這是“書本式”的嗎？ (But is it ‘book-ish’ yet?)

Overall, even with just a couple of minor changes, the whole feel of the project has taken big leap forward. But it didn’t feel done. I started to think more on what would make it feel more like a book, so I went back to look at a few in print and electronic form. Thankfully I had three I really like in both formats to look at in greater detail.

總體而言，即使只進行了一些小改動，項目的整體感覺還是有了很大的飛躍。 但這并沒有完成。 我開始更多地考慮使它看起來更像一本書，因此我回頭看了一些印刷版和電子版。 值得慶幸的是，我有兩種非常喜歡的格式，可以更詳細地介紹。

Starting on the smallest screens, I honed in on a few specific aspects of the design that needed some attention: margins, line-height, and weight. Typically the three aspects of paragraph design that form the basis of good typography are font-size, line-height, and line-length. Since I didn’t want to reduce the font size below a default 100% size, I thought I’d look at font-weight instead; and since the focus initially was on the smallest screens, line-length was going to be dictated by margins.

從最小的屏幕開始，我研究了設計中需要注意的一些特定方面：頁邊距，線條高度和重量。 通常，構成良好字體的基礎的段落設計的三個方面是字體大小，行高和行長。 因為我不想將字體大小減小到默認的100％以下，所以我認為應該改用font-weight； 由于最初的重點是最小的屏幕，因此行長將由邊距決定。

As I mentioned, three eBooks stood out to me from ones in my collection: Web Typography by Rich Rutter and The Shape of Design by Frank Chimero (both on iBooks), and The Book by Keith Houston on Kindle. I’m not sure that I felt any of them were exactly what I was looking for, but their differences gave me a lot to think about. Some margins felt too big, some type choices felt heavier or lighter than I wanted. But all in all significantly better than most I’d seen.

正如我提到的那樣，三本電子書從我的收藏集中脫穎而出：Rich Rutter的Web印刷術和Frank Chimero的The Shape of Design (均在iBooks上)，以及Keith Houston的The Book在Kindle上。 我不確定我是否真的想找到他們中的任何一個，但是他們之間的差異給了我很多考慮。 有些頁邊距感覺太大，有些字體選擇比我想要的重或輕。 但是總的來說，它比我見過的大多數要好得多。

So the challenge was to look at these examples, decide what I liked best about them, and then try to adjust the settings on our typography to get a result that felt right for our project. I wanted to maintain roughly 45 characters per line if possible (on a recent iPhone ’non-plus’ size), so I increased the margins a bit. That felt better, but vertically it was still a little cramped so I opened up the line-height a bit too. Finally, since we have the variable font to play with I tried reducing the weight just a little bit from 400 to 385. This lightened the overall color just a tiny bit, and taken all together seemed to really refines the overall design.

因此，面臨的挑戰是看這些示例，確定我最喜歡的示例，然后嘗試調整排版上的設置，以獲得適合我們項目的結果。 我想盡可能保持每行大約45個字符(在最近的iPhone“非加”尺寸上)，因此我增加了邊距。 感覺更好，但是垂直方向還是有點局促，所以我也稍微打開了行高。 最后，由于我們可以使用可變字體，因此我嘗試將重量從400減少到385。這使整體顏色稍微減輕了一點，并且總的來說似乎確實改善了整體設計。

One of the things you might notice in comparing these two is that the font size appears different. That’s actually not true: both are set to a default 100% or 1rem. But the more generous x-height and optical size corrections on the right make the text more open and legible. It does have an impact on line length, but regardless the feel is much more comfortable.

比較這兩者時，您可能會注意到的一件事是字體大小看起來有所不同。 這實際上是不正確的：兩者都設置為默認值100％或1rem。 但是，右側的x高度和光學尺寸更慷慨的校正使文本更加開放和清晰。 它確實會影響線長，但是無論感覺如何都舒適得多。

Overall I’m really excited with how this is looking, and am enjoying the reading experience. I spent a little more time updating the header and footer, and turned the end mark into an SVG so we can recolor it more readily. I’ve also added some additional artwork for chapters 2 and 3. That will be an ongoing process, and I still want to work out a better solution for making the images responsive. That should be something I can work out at the template level so hopefully will be a more site-wide update in the coming weeks.

總的來說，我對它的外觀感到非常興奮，并享受閱讀體驗。 我花了一些時間來更新頁眉和頁腳，并將結束標記轉換為SVG，以便我們可以更輕松地為其重新著色。 我還為第2章和第3章添加了一些其他插圖。這將是一個持續的過程，我仍然想為使圖像具有響應性而提出一個更好的解決方案。 這應該是我可以在模板級別解決的問題，因此希望在未來幾周內進行更多站點范圍的更新。

Next week we’ll get into one of the most frequently overlooked performance and rendering bottlenecks: font loading management and styling our fallback fonts for a better experience during the page loading process.

下周，我們將探討最常被忽視的性能和渲染瓶頸之一：字體加載管理和樣式化后備字體，以便在頁面加載過程中獲得更好的體驗。

資源資源 (Resources)

• Latest live version at mobydick.wales

  最新的實時版本位于mobydick.wales

• Source code on GitHub

  GitHub上的源代碼

• Literata on TypeTogether, GitHub, and Google Fonts

  TypeTogether ， GitHub和Google Fonts上的文檔

• Optical size explained

  光學尺寸說明

• Literata optical size demo on CodePen

  CodePen上的Literata光學尺寸演示

• Web Typography by Rich Rutter

  網頁排版由Rich Rutter

• The Shape of Design by Frank Chimero

  Frank Chimero 設計的形狀

• The Book by Keith Houston

  基思·休斯頓的書

• Part 1: Introducing the project

  第1部分：項目介紹

• Part 2: Responsive typography

  第2部分：響應式排版

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 May 4, 2020.

最初于 2020 年5月4日 在 rwt.io 上 發布 。