以下文章來源於code秘密花園，作者ConardLi
一個優質的前端號，基礎、框架、算法、項目、面試...總有你想要的。
（給前端大全加星標，提升前端技能）
code秘密花園 公號/ConardLi
當你正在糾結選擇什麼樣的字體大小，尤其是在您嘗試適應不同的屏幕和場景時。回顧一下網頁字體發展的歷史變化，或許會給你一個新的視角。
當我在 2005 年左右開始研究 Web 的東西時，有兩種非常流行的正文字體樣式：
10pxVerdana;11pxArial。
這兩種樣式可能出現在 90％ 的專業網站上，供 WindowsXP 和更早版本的IE5、IE5.5 和 IE6 的用戶看到。由於重字體提示，缺乏字體平滑或亞像素渲染，以及 Verdana 具有更大的 x-height，因此 10pxVerdana 大致等於11pxArial，但字母略寬，它們的外觀也相似。
今天，10px 和 11px 似乎微不足道，但是在 2000 年代初，由於兩個原因，它們被認為是可讀的：
1990年代末和2000年代初的800×600和1024×768屏幕的像素很大，因此選擇的像素雖然偏小，但不像今天看起來的那麼小。設計師和他們的客戶習慣了
9、10和11點大小的印刷字體（書籍，雜誌，傳單等），而使用更大的字體就像對讀者大喊大叫。
由於很少有設計 Web 的經驗，圖形設計師和市場部門依靠 QuarkXPress 和MicrosoftWord 等以前的知識。 “如何將傳單或雜誌廣告中使用的字體磅值轉換為HTML 字體尺寸？”
當然，由於像素沒有通用的物理尺寸，因此無法可靠地將印刷點轉換為像素。屏幕具有不同的每英寸像素比。原始的 Macintosh 屏幕為 72ppi（或 68ppi ？）。二十年後的 2004 年，屏幕普遍在 80-90ppi 的範圍內。幾年後，像素變小了，屏幕通常在 90-120ppi 的範圍內，而大多數 iPhone 的分辨率為 160ppi 。儘管存在普遍的誤解，甚至在 Retina 過渡開始之前，Web 的分辨率就不是72ppi。
但是，我們無需計算出每台設備的確切每英寸分辨率，即可做出明智的設計選擇。試試看，應該始終勝過 dpi，ppi，Retina 甚至像素數。
在2006年11月，OliverReichenstein 進行了一個簡單的實驗：他比較了雜誌的正文字體與正常人的眼睛到桌面屏幕的距離，兩者的距離是正常的，而網站的文字看起來要小得多。 Oliver 主張將正文副本設置為瀏覽器的默認值或 100%，這是常規16px 瀏覽器中的習慣用法。在2006年，甚至幾年後，這都是一個革命性的主張。網站設計師和客戶認為這是極端的。五年後，我們仍然必須為 11px 字體的死亡而戰。
文字太小會花費更多時間閱讀。用戶可能不得不向屏幕傾斜，將移動設備靠得更近，斜視或者只是更加集中精力。作為設計師和開發人員，我們努力不要求使用或閱讀我們作品的人們付出額外的努力。
平均而言，在線文字在2000年代末和2010年代初變得更大-至少在名義上是像素大小。我猜測是下面的原因：
由於
OliverReichenstein提出的論點，媒體們紛紛改變了他們的觀點。在
iPhone和其他早期的智能手機上，10-12px範圍內的文本看起來很小（分辨率在150-200ppi範圍內）。
我記得網站設計師和開發人員在博客，專業新聞網站以及其他的客戶項目中處於領先地位，這些項目都設置為 14-18px 的“更大”尺寸。這種演變滲透到新聞站點中，一個又一個引人注目的重新設計。如今，theguardian.com 的行高為 1.0625rem（17px）文本，nytimes.com 大約在 2017年使用了 17pxfont-size 和 26pxline-height，到了 2019 年，它在寬屏上達到了 20pxfont-size 和 30pxline-height。
這些數字只是一個時間點。早在2003年，對於 800×600 屏幕上關閉字體平滑功能的大多數用戶來說，12pxArial 可能是一個很大的可讀性選項。這種瀏覽器的默認字體大小太大的感覺（在 Oliver 的文章於2006年發表時就非常明顯），這在某種程度上是出於文化原因，但也有一些技術原因。同樣，我們再次感到，除較小的屏幕外，所有像素的 16px 都非常小，這也是出於多種原因。
然後是很大的正文複製趨勢。 2012年4月，頗具影響力的網頁設計師 JeffreyZeldman 重新設計了自己的網站，並在其網站上使用了 24pxGeorgia 的正文（每個帖子的開頭部分為32px）。許多同行的設計師感到困惑，有些人抱怨該設計難以閱讀，必須縮小筆記本電腦或台式計算機才能舒適地閱讀。儘管如此，該設計一直持續到今天。其他設計師也使用了類似的尺寸，例如，TrentWalton 表示他偏愛 20–24 像素的文字（或 125–150％ ） 。
這種趨勢的最新例子是 JeremyKeith 的 ResilientWebDesign 在線電子書。 Jeremy 使用 CSS鎖 根據視口寬度在兩個邊界之間更改字體大小：100% 和 250%。 320像素時（使用默認瀏覽器設置）的字體大小為 16px。分辨率為 1600px 時，您將獲得 40px 的文字。顯然，這是一種設計選擇，我認為（類似於TrentWalton 所描述的那樣），筆記本電腦和台式機使用的預期效果是，讀者向後傾斜，並使其面朝屏幕而不是朝向屏幕。這種設計可以吸引您的時間，而不是瀏覽文本。
雖然這種設計可以在較小的屏幕（尤其是智能手機和平板電腦，在我的測試中）上提供良好的閱讀體驗，但我發現在較大的屏幕上很難。我的主要問題是：
一次只能看到幾行文字。例如，一台13英寸筆記本電腦上有10行文字。我在閱讀時有一定程度的注意力不足，當我嘗試滾動閱讀時，此設置消除了很多視覺環境；我通常會嘗試通過選擇我正在閱讀的所有其他段落來解決注意力不足的問題，但是當設計一次只顯示一個或兩個段落時，這沒有幫助。
每行文字實際上都很寬，要求讀者的眼睛比平常更寬。這可能會產生兩個不良影響：讀者可能最終會花更多的精力來閱讀同一行文本（例如3–5而不是2–4）；在更極端的例子中，較寬的眼球運動可能會導致眼睛疲勞或疲勞。
假設某人坐在沙發上，筆記本電腦放在膝上，目前正在閱讀文章。並假設對於這種人，在這種設置中，他們有自己的偏好和當前的疲勞程度等，因此存在一個理想的字體大小，可以閱讀他們正在閱讀的任何文本。例如，它可以是 22px。
閱讀過程涉及掃視和注視。在每個注視中（可能跨越四分之一秒），他們只會看到一小部分焦點文本：
現在，如果相同的文本更大，但是其他參數（如眼屏距離）沒有變化，我猜結果將如下所示：
由於聚焦區域保持不變，並且文字較大，我懷疑眼睛在每次注視上正確識別的字母會更少。這就是為什麼我的假設是，對於真正的大文本（如 ResilientWebDesign250%在更大屏幕上的正文），讀者將需要使用更多的注視力來閱讀同一文本，並且可能會失去閱讀速度並更快地感到疲勞。我沒有檢驗該假設所需的技能，但我會對很大的文本趨勢保持警惕。
就我個人而言，我更喜歡對字體大小進行有限的調整。我喜歡從100%的小屏幕開始，然後在大屏手機或平板電腦上使用(比如 110% 或 115%)，在筆記本電腦和大屏幕上使用可能達到 125%。然後，根據我使用的字體、我想要的外觀以及我在各種設備上測試的結果，我調整這些值。
對於我們一直在追逐設備製造商，操作系統和瀏覽器開發人員，並試圖每兩年調整字體大小以適應市場上的情況，我也感到難過。根據屏幕寬度稍微增加字體大小的概念很容易引起人們的注意。設備的工作不就是確保字體大小 100% 是可讀的嗎?
從理論上講，CSS像素應該匹配一個定義為視角的“參考像素”:
參考像素是設備上一個像素的視角，像素密度為 96dpi，與閱讀器的距離為一臂長。因此，一臂的標稱長度為28英寸，其視角約為 0.0213 度。在臂長范圍內，1px 相當於 0.26 毫米( 1/96 英寸)。
但只有在硬件製造商、操作系統和瀏覽器開發人員都為實現這一目標而合作的情況下，才能遵循這一規則。特別是硬件供應商更有興趣銷售針對視頻分辨率(1080p、4K)進行優化的屏幕，即使它會讓整個 UI變得非常小。
從理論上講，瀏覽器製造商應該能夠改變 16px 的默認字體大小以適應現代設備。但是太多的現有內容依賴於這個默認的大小，而這個大小是不會改變的。
所以，我們猜測;我們測試;我們調整：
無論在技術上是正確的還是近似的(我自己的計算顯示分辨率為
68dpi)，72dpi分辨率允許設計師輕鬆地將點大小轉換為像素大小。因為一英寸有72個印刷點，在72dpi時每個像素正好是一個點。視網膜顯示器並沒有改變“每英寸系統點”的分辨率，而是將每個系統點映射到一個
2×2平方的物理像素上。由於CSSpx單元的工作方式類似於這些設備上的系統點，並且將物理像素分辨率提高一倍並不會影響HTML文本的大小，所以我跳過了討論以物理像素(例如320ppi)測量的分辨率。響應式
Web設計技術，當屏幕變得更小或更大時，允許您在兩個屬性值之間平穩轉換。
網頁字體設置你了解嗎？
三分鐘遷移AntDesign4
有趣的CSS題目（12）：你該知道的字體font-family
覺得本文對你有幫助？請分享給更多人
關注「前端大全」加星標，提升前端技能
好文章，我在看❤️
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/A%20Brief%20History%20of%20Web%20Typefaces.html
支付宝扫一扫 
评论列表（196条）
测试