Many of you may already know about responsive web design. Cited from Wikipedia, responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and windows or screen sizes. The responsive text itself is an approach to make texts on a web page that can be read well on a variety of devices and screen sizes. It does not only mean changing size on a different screen. It covers good readability and cohesion between text and elements that surround it. The first web page itself is a full-text page.

你們中的許多人可能已經了解響應式Web設計。 響應式網頁設計 ( RWD )被Wikipedia引用，是一種網頁設計方法，可使網頁在各種設備和窗口或屏幕尺寸上都能很好地呈現。 響應式文本本身是一種使網頁上的文本易于在各種設備和屏幕尺寸上閱讀的方法 。 這不僅意味著在其他屏幕上更改尺寸。 它涵蓋了文本與周圍元素之間的良好可讀性和內聚性。 第一個網頁本身就是全文頁面。

It is undeniable that text is one of the main components of the web, even until today. Bearing that in mind, there are some things that may help you to provide good responsive text.

不可否認，直到今天，文本仍是Web的主要組成部分之一。 請記住，有些事情可能會幫助您提供優質的響應文本。

選擇字體 (Choosing Font)

There are thousands of fish in the sea. And so are fonts for the web. You can browse and download many appealing fonts on the internet. This freedom also comes with some drawbacks. Using custom font on your website means adding the extra job of HTTP request of getting the font. While loading the font, the browser may show Flash of Unstyled Text (FOUT) and Flash of Invisible Text (FOIT).

海里有成千上萬的魚。 網絡字體也是如此。 您可以在互聯網上瀏覽和下載許多吸引人的字體。 這種自由還帶有一些缺點。 在您的網站上使用自定義字體意味著添加獲取字體的HTTP請求的額外工作。 加載字體時，瀏覽器可能會顯示未樣式化文本Flash (FOUT)和不可見文本Flash (FOIT) 。

You can always use the web-safe font to provide maximum compatibility between browsers/operating systems. There are some steps you can follow to avoid FOUT/FOIT.

您始終可以使用網絡安全字體來提供瀏覽器/操作系統之間的最大兼容性。 您可以遵循一些步驟來避免FOUT / FOIT。

1.僅包含您需要的字體 (1. Include Only the Font You Need)

Include only font weight and font style that you need. One example if you use Google Font CDN, you will be given choices of what font you want to include.

僅包括所需的字體粗細和字體樣式。 一個示例，如果您使用Google Font CDN ，則可以選擇要包括的字體。

If you choose to add the font in your dedicated server, use WOFF or WOFF2 format.It has a smaller size than other formats. It is compressed in gzip format and optimized for the web. The catch is IE8 below doesn’t support it. It should not be a problem since Microsoft itself is moving to Edge.

如果您選擇在專用服務器中添加字體，請使用WOFF或WOFF2格式，它的大小小于其他格式。 它以gzip格式壓縮并針對Web進行了優化。 問題是下面的IE8不支持它。 由于Microsoft本身正在遷移到Edge，所以這應該不是問題。

Tip: If you’re making a site that uses small type, the Reading Edge font families may be suitable for you.

提示：如果您要創建使用小型字體的網站，則Reading Edge字體系列可能適合您。

2.準備后備組合 (2. Prepare Fallback Combinations)

In case if the font can not be loaded (e.g., CDN server is down or not available in the device), the browser will try to load the font you specified next. This is an example of using Arial (and next is default Sans-Serif device’s font) as the fallback font for Roboto. Below GIF shows how FOUT happens if the fallback font is loaded before the main font.

如果無法加載字體(例如CDN服務器已關閉或設備中不可用)，瀏覽器將嘗試加載您接下來指定的字體。 這是使用Arial(下一個是默認的Sans-Serif設備的字體)作為Roboto的后備字體的示例。 GIF下面顯示了如果在主字體之前加載后備字體，FOUT的發生方式。

It is quite hard to find a proper fallback font. You can use this font matcher website to check which font can be a suitable fallback and tinker with its property. The purpose is to reduce layout shifting when FOUT happens. I changed the Arial font-weight to 500 and letter-spacing to 0.1px.

很難找到合適的后備字體。 您可以使用此字體匹配器網站來檢查哪種字體可以作為合適的后備和修補屬性。 目的是減少發生FOUT時的布局偏移。 我將Arial font-weight更改為500，并將letter-spacing更改為0.1px。

3.預加載字體 (3. Preload Your Font)

By default, the font was downloaded after the browser sees any CSS files that refer to it (by using @font-face attribute). To accommodate this, you can preload your font. Most of the browsers have supported it.

默認情況下，在瀏覽器看到任何引用該字體CSS文件后(使用@font-face attribute )下載了該字體。 為此，您可以預加載字體。 大多數瀏覽器都支持它。

<link rel="preload" as="font ...> will inform the browser that the resource should be fetched as soon as possible and tells the browser that the resource is a font (so it can set proper prioritization).

<link rel="preload" as="font ...>會通知瀏覽器應盡快獲取資源，并告訴瀏覽器該資源是字體(以便可以設置適當的優先級)。

If you are using a CDN, it is suggested to use <link rel=”preconnect”>. Because it can be tricky to match the font version provided by CDN and the one you use in the CSS.

如果使用CDN， 建議使用<link rel=”preconnect”> 。 因為要匹配CDN提供的字體版本和CSS中使用的字體版本可能會比較棘手。

選擇您的字體基本大小 (Choose Your Font Base Size)

You have picked your font, then what?

您選擇了字體，然后呢？

It’s time to choose your font base size. Font base size is the font size for body content. In determining the base size, you must consider the platform (desktop/mobile) and the type of the web page(Text-Heavy Page/Interaction-Heavy Page).

現在是時候選擇字體的基本大小了。 字體基本大小是正文內容的字體大小。 在確定基本大小時，必須考慮平臺(臺式機/移動設備)和網頁的類型(“文本為主”頁面/“交互為主”頁面)。

大量文字的頁面 (Text-Heavy Pages)

Text-heavy pages, e.g., news, blogs, articles, etc. Medium and Wikipedia are the example websites. In this kind of page, the main thing that the user does is read. Only little interaction is available on the page, maybe only clicking a link.

大量文本頁面，例如新聞，博客，文章等。Medium和Wikipedia是示例網站。 在這種頁面中，用戶要做的主要事情是閱讀。 頁面上只有很少的交互作用，也許只是單擊鏈接。

If you’re making a website for desktop and mobile, using a minimum of 16px font size is a good start. That is the default font size on most browsers. But, don’t rely only on that. Users can change the default setting for font size, and some browsers like Opera Mini or Android Webview arent using 16px as default. Don’t be afraid to use a larger size. Several websites even use 20+px size, like Medium (21px).

如果你正在做桌面和移動網站，使用最小16px的字體大小是一個良好的開端。 那是大多數瀏覽器的默認字體大小。 但是，不要僅僅依賴于此。 用戶可以更改字體大小的默認設置，某些瀏覽器(例如Opera Mini或Android Webview arent)使用16px作為默認值。 不要害怕使用更大的尺寸。 幾個網站甚至使用20 + px的大小，例如中(21px)。

When developing for mobile, make sure you read the body text on an actual device. You’ll want to make sure the text is readable like you would be seeing on a well-printed book.

為移動設備開發時，請確保您在實際設備上閱讀了正文。 您需要確保文本可讀性好，就像在印刷良好的書上看到的一樣。

重互動頁面 (Interaction-Heavy Page)

On this kind of page, the user will encounter more interactivity. Clicking dropdown, editing list of items, input typing, etc. You may find this on Facebook timeline, Google Calendar, or Marketplace site.

在這種頁面上，用戶將遇到更多的交互性。 單擊下拉列表，編輯項目列表，輸入類型等。您可以在Facebook時間軸，Google日歷或Marketplace網站上找到此內容。

Text is not the main thing here, but still an important part of the page. You may use a smaller font size than 16px for the long text. For example, the Twitter website uses 15px on the tweet body.

文字不是這里的主要內容，而是頁面的重要部分。 對于長文本，您可以使用小于16px的字體。 例如，Twitter網站在推文正文上使用15px。

Tip: Use minimal 16px for input text size on iOS Safari. Input with font size less than 16px will make the browser zooms the page.

提示：在iOS Safari上輸入的文字大小至少應為16px。 字體大小小于16像素的輸入將使瀏覽器縮放頁面。

維持類型量表 (Maintaining Type Scale)

A type scale is a series of type sizes that correlate to each other because they increase by the same ratio. You have the base size. The next step is to scale it by using some ratio. This will determine the font size for header, title, subtitle, body, and so on.

類型標度是一系列相互關聯的類型尺寸，因為它們以相同的比率增加。 您有基本尺寸。 下一步是使用一定比例縮放它。 這將確定標題，標題，字幕，正文等的字體大小。

Just like the interval in music, there were already predefined typography ratio for you to use. You can see the list and play around with it and find which is the best type scale for your site.

就像音樂中的間隔一樣，已經有預定義的排版比例供您使用。 你可以看到列表和玩它，發現它是為您的網站最好的類型規模。

Type scale may affect more on a text-heavy page.

字體縮放可能會在文本較多的頁面上產生更大的影響。

Responsively, you can set a different base size for different breakpoints with the same scales. Base size on the next breakpoint (horizontally) will follow the same scales like the one we’re using for each text style, e.g., H1, H2, H3, H4, H5, H6, p, and so on (vertically)

作為響應，您可以為具有相同比例的不同斷點設置不同的基本大小。 下一個斷點的基本大小(水平)將遵循與我們用于每種文本樣式相同的比例，例如，H1，H2，H3，H4，H5，H6，p等(垂直)

Or, set a different scale horizontally and vertically. For instance, using Perfect Fourth (1.333) for different text style, and using Major Third (1.250) for different breakpoints.

或者，水平和垂直設置不同的比例。 例如，對不同的文本樣式使用完美四分(1.333)，對不同的斷點使用主要三分(1.250)。

It also never hurts to know how widely used design systems handle typography, like Material Design Type System.

知道諸如材料設計類型系統之類的廣泛使用的設計系統如何處理印刷版也毫不費力。

Don’t get stuck on this. The scale only acts as guideline. You can adjust your type scale to whatever looks good on your website.

不要卡在這。 量表僅作為指導。 您可以將字體比例調整為網站上看起來不錯的尺寸。

使用em或rem (Use em or rem)

One of the best practices to make the responsive text on the web is to use relative units like rem and em. From the type scale that we have defined, we can see the size inem on the right side of its px unit.

在網絡上制作自適應文本的最佳實踐之一是使用rem和em類的相對單位。 根據我們定義的類型比例，我們可以在其px單位右側看到em的大小。

The em is a unit which equals to currently specified font-size. Using this in CSS property means its value is relative to the font-size of the element. Using 2em means 2 times the size of the current font.

em是一個等于當前指定的字體大小的單位。 在CSS屬性中使用this表示其值相對于元素的字體大小。 使用2em表示當前字體大小的2倍。

If em is used for font-size property, then the value is relative to the parent font-size.

如果em用于font-size屬性，則該值相對于父字體大小。

The rem is more simple than em. It equals to root (<html>) font-size. Using this on CSS properties means its value is relative to root font-size.

rem比em更簡單。 它等于根( <html> )字體大小。 在CSS屬性上使用此值表示其值與根字體大小有關。

Then, when do we use em ? When do we use rem ?

那么，什么時候使用em呢？ 什么時候使用rem ？

The rem and em have their plus and minus. Let’s say we want to create this view.

rem和em具有正負號。 假設我們要創建此視圖。

The HTML will be like this.

HTML將像這樣。

This is how we achieve it using only em .

這就是我們僅使用em實現它的方式。

Using all em will make the spacing to adjust relatively with its element font size. This is good. So that when we or user change the font size, the spacing will follow. Now, what happens if we change the horizontal margin of p to 1em?

使用所有em將使間距根據其元素字體大小進行相對調整。 很好 這樣，當我們或用戶更改字體大小時，間距就會隨之變化。 現在，如果將p的水平邊距更改為1em什么？

Uh oh! Header’s left padding is not aligned with p . If we still want to force it using only em , we can change the padding into 0.3em 0.25em . This make extra work need to be done if we want to change p padding again later. A better way is to use rem for horizontal padding.

哦！ 標頭的左填充與p不對齊。 如果我們仍然希望僅使用em強制執行此操作，則可以將padding更改為0.3em 0.25em 。 如果我們以后要再次更改p填充，則需要做額外的工作。 更好的方法是使用rem進行水平填充。

This will align the left spacing for the header and the paragraph. The horizontal spacing is relative to the root font-size.

這將使標題和段落的左側間距對齊。 水平間距是相對于根字體大小的。

The rule here is to use em for the property that needs to scale relative to its font-size and use rem for the rest. By using the relative unit (em and rem) instead of px, we get the benefit of responsive spacing based on font-size. So when the user changes the default font size, our website will scale responsively.

這里的規則是將em用于需要相對于其font-size進行縮放的屬性，而將rem用于其余部分。 通過使用相對單位( em和rem )而不是px ，我們可以獲得基于字體大小的響應間距的好處。 因此，當用戶更改默認字體大小時，我們的網站將響應縮放。

Tip: Relative unit in CSS is not only em and rem . You can see the list here.

提示：CSS中的相對單位不僅是em和rem 。 您可以在此處查看列表。

線長和線高 (Line Length and Line Height)

Reading includes horizontal and vertical motion. Reading text that too long may cause fatigue. It is found out that the ideal length is 45–75 characters (including spaces and punctuation). There is a good article discussing why would it be like that.

閱讀包括水平和垂直運動。 閱讀時間過長可能會導致疲勞。 發現理想的長度是45-75個字符(包括空格和標點符號)。 有一篇很好的文章討論了為什么會這樣。

I’ll just discuss how we could achieve that. The first thing is a bookmarklet by Chris Coyier. The bookmarklet is to colorize text between 45 and 75 characters. With the highlight, you can adjust your font size or the element spacing (padding and margin).

我將討論如何實現這一目標。 首先是Chris Coyier制作的小書簽 。 小書簽將為45至75個字符之間的文本著色。 使用高亮顯示，可以調整字體大小或元素間距(填充和邊距)。

And how about vertical motion? The line that is too tight might make you hard to read. The line that is too wide might cause the content to lose cohesion.

垂直運動又如何呢？ 太緊的線可能會使您難以閱讀。 線條太寬可能導致內容失去凝聚力。

You can adjust the line-height to accommodate this. To set it around 150% of font-size is a good rule of thumb.

您可以調整line-height以適應此情況。 最好將其設置為字體大小的150% 。

If you’re lazy to handle it by yourself, the FlowType library may help you.

如果您懶于自己處理它，則FlowType庫可能會為您提供幫助。

其他注意事項 (Other Things to Keep in Mind)

These are other things that you may need to know regarding responsive web typography.

關于響應式Web排版，您可能還需要了解這些其他信息。

文本光柵化器和抗鋸齒。 (Text rasterizer and antialiasing.)

Different browsers may render a font differently. Even the same browser on different OS (e.g., macOS and Windows) may render font differently. It happens because each OS may have different core text-rendering engine. Bram Stein (Netmag) wrote an article that explains it more deeply. There’s also a library called Type Rendering Mix you can use to provide consistent text rendering.

不同的瀏覽器可能會呈現不同的字體。 甚至在不同OS(例如macOS和Windows)上的同一瀏覽器也可能呈現不同的字體。 發生這種情況是因為每個OS可能具有不同的核心文本呈現引擎 。 Bram Stein ( Netmag )寫了一篇文章 ，對它進行了更深入的解釋。 還有一個名為Type Rendering Mix的庫，可用于提供一致的文本呈現。

燈塔整合 (Lighthouse Integration)

Lighthouse will flag pages with font sizes that are too small. Lighthouse flags pages where its 60% or more text that has a font size smaller than 12 px.

Lighthouse將標記字體大小過小的頁面。 Lighthouse會標記其字體大小小于12像素的60％或更多文本的頁面。

玩耍 (Play Around)

Designing a responsive text is not just about following the guideline or pattern. Of course, what we’ve discussed here will be useful in determining the best typography structure for your website. If some scale doesn’t suit your website content, tweak it.

設計響應文本不僅要遵循準則或模式。 當然，我們在這里討論的內容對于確定網站的最佳字體結構將很有用。 如果某些規模不適合您的網站內容，請對其進行調整。

Balance the font-size, line-height, and spacing around them. Measure and try to put it in the actual layout. There are many things to consider like screen size, operating system, browsers, etc. Try your text on various devices, especially on mobile. Don’t be afraid to break the rule, and use the best text structure for your website.

平衡字體大小，行高和間距。 測量并嘗試將其放置在實際布局中。 您需要考慮許多因素，例如屏幕大小，操作系統，瀏覽器等。請在各種設備(尤其是在移動設備上)上嘗試輸入文字。 不要害怕違反規則，并為您的網站使用最佳的文本結構。

Thank you for reading!

感謝您的閱讀！