Jason Pamental 的 Smashing Podcast 第 5 集：什麼是可變字體？

每兩週，我們都會發布一個播客，我會在其中與網絡行業的某個人就不同的話題進行交流。 在這一集中，讓我們了解可變字體的所有內容！ 我就此事與知識淵博的人交談，Jason Pamental。

顯示註釋

每週更新

• “品牌插圖系統：繪製強烈的視覺識別，”劉一輝
• “努力應對交通高峰，”蘇珊娜·斯卡卡
• “構建 CSS 佈局：與 Rachel Andrew 一起直播，”Rachel Andrew
• “2019 年網頁設計和開發來臨綜述”，雷切爾·安德魯
• “你的投資組合網站應該是 PWA 嗎？”，Suzanne Scacca

可變字體

• 在 rwt.io 的網絡上查找 Jason
• 網頁排版新聞通訊
• “可變字體：網絡作者需要了解的內容”，Jason Pamental
• 艾倫·拉普頓 (Ellen Lupton) 的著作《用文字思考》
• 埃里克·斯皮克曼 (Erik Spiekermann) 的書《停止偷羊，看看字體是如何工作的》

成績單

Drew McLellan：他是設計策略師、UX 領導者、技術專家、網頁排版專家，以及 W3C Web 字體工作組的特邀專家。 他就如何在數字平台上更好地設置字體進行寫作、演講並與團隊和品牌所有者合作。 他曾與 Adob​​e、Audible、Conde Nast、GoDaddy、IBM 等組織進行過交流，並在世界各地舉辦過演講、研討會和會議。 他的時事通訊 Web Typography News 很受那些希望獲得最新的網絡排版更新和提示的人的歡迎。 他顯然是網頁排版方面的專家。 但是你知道他代表瑞典參加了 1984 年奧運會的草坪槌球比賽嗎？ 我的粉碎朋友，請歡迎 Jason Pamental。 你好，傑森。 你好嗎？

Jason Pamental：我太棒了。 尤其是在介紹之後。

德魯：我今天想和你談談網絡排版，因為那真的是你的事。 您是網絡排版方面的真正專家。 關於這一點，但特別是，談談可變字體。 我將是第一個承認我不是排版專家的人。 我的意思是，請認為我和任何傾聽的人一樣不知情。 你不能用任何關於排版的信息來光顧我。 我想我們已經在網絡上使用了大約十年的可用網絡字體了。 那正確嗎？

傑森：是的。 實際上，前幾天在推特上發起的不是你嗎？ 好像是 2009 年 11 月 9 日。從 Typekit 推出到現在已經過去了 10 年。 我知道 Font Deck 在同一時間框架內是正確的。 不久之後，Google 字體和 Monotype 服務。 我的朋友 John Cianci 給了我一個測試版邀請，他現在仍然是我妻子在 2009 年某個時候在 Typekit 工作的代理機構的同事。那是對我對網絡的興趣的徹底改造. 我的意思是，這對我來說簡直就是一場革命。 我的意思是，當我在學校學習排版時，我一直很喜歡它，但 15 年來我們無法在網絡上用它做任何事情。 那真是太神奇了。

Drew：現在肯定有設計師在 Web 上工作，他們已經使用了 10 年以上的 Web 字體。 現在有一些設計師在網絡上工作，他們從來沒有設計過一個沒有能力從大量字體中進行選擇的網站。

傑森：是的，這是真的。 沒有這種經驗的人必須像我們成長過程中那樣在兩個方向上推動像素上坡。 我們不是那些對著天空揮舞拳頭的脾氣暴躁的老人。 但是，是的，就網絡上發生的所有變化而言，這有點令人驚奇，有些人從未以任何其他方式經歷過的想法是了不起的。

Drew：當我們獲得網絡字體時，我們開始在網絡上使用排版的方式發生了巨大轉變，因為我們可以真正開始在網絡上使用排版。 顯然我們可以使用網絡安全字體做一些事情，但我們非常受限於一個非常有限的調色板。 但現在可能還有另一個重大轉變，可能與可變字體幾乎同樣重要。 我的意思是，什麼是可變字體？ 他們為我們做什麼？ 我們從哪裡開始？

傑森：我總是嘗試從給人們一個參考框架開始。 因此，當我們考慮在網絡上使用字體時，我們必須記住的是，目前使用“傳統”字體，每種字體都是該字體的單獨寬度、粗細、傾斜度和變體。 對於我們想在網絡上使用的每一個，我們都必須加載一個文件。 對於您將其用於正文複製的典型網站，您通常會加載四種字體：常規、粗體、斜體和粗斜體。 所有這些東西都必須加載。 每一個都是一些必須下載、處理和渲染的數據。

Jason：所以通常情況下，我們多年來所做的就是限制自己使用極少數的字體，這實際上並不是特別好的排版實踐。 在平面設計中使用更廣泛的範圍更為常見。 在給定的設計中，您可能會使用 8 種或 10 種不同粗細和變體的字體。 在網絡上，由於性能的原因，我們受到了很大的限制。 可變字體的最大區別在於所有這些排列，這些變體包含在單個文件中。 這種格式非常有效，因為它所做的是存儲該字符的常規形狀，然後是所謂的增量，即沿這些曲線的點將移動的位置以將其渲染為粗體或細體或寬體或窄體。

Jason：所以通過只存儲差異，您不必存儲整個輪廓。 這是一種更有效的格式。 雖然它不像單個字體文件那麼小，但它仍然比單獨拍攝的所有單個字體文件要小得多。 如果您查看 IBM 的 Plex Sans 之類的文件，所有這些單獨的文件可能接近 1 兆字節，其中兩個可變字體文件包含一個文件中的所有寬度和粗細，另一個文件中的斜體為 230K。 那是為了非常非常完整的字符集。 大多數人可以使用其中的一個子集並將其變得更小。 對於典型的西方語言網站的需求，我通常看到這些文件大小在 50 到 100K 左右。 這與加載沒有什麼不同……一旦加載了三個或四個單獨的字體文件，您可能會加載比這更多的數據。 這是一個有趣的性能勝利，但它也為我們打開了整個字體範圍，以便我們通過 CSS 在 Web 上使用。

德魯：所以這幾乎就像是提供食譜而不是送餐。 這裡不是斜體版本，而是粗體版本。 就像，“這是常規版本，如果要斜體，你可以這樣做，如果要加粗，你可以那樣做。” 這減少了通過網絡傳輸的文件大小。

傑森：是的。 嗯，在某種程度上，它給了你所有的成分，然後你可以製作任何你想要的食譜。 因為你真的可以從……回到 Plex 的例子，從 100 到 700 的重量，其中 700 是典型的粗體，400 是一種正常的重量。 但是你有更輕的。 所以你可以做非常大和非常細的行標題或塊引號或不同的項目或類似的強調，然後能夠調整你想要的粗體以不同的大小。 您可以做各種不同的事情來獲得更好的排版、更好的用戶體驗，同時獲得更好的性能。 那是看門人。

德魯：所以在我們今天認為的常規和粗體之間幾乎有無數的步驟調整？ 你真的有能力沿著那個軸去任何地方在兩者之間進行調整嗎？

傑森：對。 作為一個學習平面設計並且多年來一直密切關注印刷設計的人，我認為對我來說真的很令人興奮，大膽的想法應該根據你正在渲染的文本的大小而改變。 所以默認情況下，正常和粗體的 400 和 700 是網絡默認的。 但事實上，你叫粗體的唯一原因是你想要一些強調，你想要一些突出的東西。 但是字體越重越小，越難閱讀。 它有點填補了狹小的空地。 當它設置為大約 16 像素大小或我們在那裡使用的任何內容時，不要使用 700 作為正文副本，而是使用 550、575 來獲得足夠的強調，但字母形式仍然更加開放。 然後隨著它變大，你可能會使用更重的重量。

傑森：但同樣，這在某種程度上是你的選擇。 通過調整它以獲得正確的強調水平，但仍然保持非常好的易讀性，我們有更多的靈活性。 我真的希望隨著這些變得更流行和更廣泛使用，我們可以開始教人們在使用該範圍的方式上更加細緻入微，同時實際上變得更具表現力和可讀性.

Drew：我注意到將設計實現為前端並實現給我的設計的一件事是，不同的顏色對比組合和深色背景上的淺色文本與淺色背景上的深色文本，權重看起來完全不同。 所以大概，這將有助於平衡並根據這樣的變化來調整視覺和閱讀體驗？

傑森：當然。 這是我通常會在研討會和會談中展示的內容之一，即添加對輕模式媒體查詢的支持。 你可以翻轉這種對比，但你確實想以一種微妙的方式來做。 根據字體的不同，襯線字體最終可能看起來很重或有點細長。 有時你想要重一點或輕一點，但是當你把它放在深色背景上時，你也往往需要將字體隔開，否則字母會形成一種流血的形式。 您可以在排版中調整一些小東西。 媒體查詢非常簡單。 我的意思是，將它添加到您的網站就像兩行代碼。 然後就是你用它做什麼。 它不一定只是反轉顏色。 有時您需要調整對比度，但還要調整字體本身以獲得更好的易讀性。

德魯：所以大概，不只是重量可以在可變字體中變化。 還有其他方法可以更改顯示的字體嗎？

傑森：是的。 這完全取決於類型設計師。 我認為在瀏覽器中強調這並不是對所有人免費的，這真的很好。 瀏覽器只能渲染字體中已啟用的內容。 最終，是字體設計師說重量從這個到這個。 您可能有一個寬度軸。 它會變得更窄或更寬，但也有能力擁有所謂的註冊軸。 有寬度、重量、傾斜、斜體和光學尺寸。 這些都是映射到 CSS 屬性的核心內容。 傾斜允許一個和另一個之間的角度，如此直立，我實際上已經看到了具有反向傾斜和向前傾斜的角度。 那是完全開放的。 斜體通常打開或關閉，但不一定。 實際上，您可以...嗯，有些字體設計師已經嘗試過在您從正常變為斜體時逐漸改變字母形式，並在此過程中替換字母。 這是一件很有趣的事情。

Jason：但是還有自定義軸的能力。 類型設計師可以定義他們想要改變的任何自定義軸。 你已經看到了一些增加重力傳播的滴水和各種有趣的扭曲形狀，或者延伸襯線，改變上升和下降的高度。 在小寫字母形式上，更改它們是否為襯線。 你可以做各種各樣的事情。 這完全取決於字體設計師的想像力。 我認為對於所有這些事情可能會實際發生什麼，我們只是觸及了表面。 這一切都可以通過 CSS 訪問。

德魯：是的。 所有這些屬性都可以通過您與設計的其餘部分一起提供的普通 CSS 進行調整。 我們可以在 CSS 中做哪些事情來觸發這些變化？ 是否就像我們對響應式佈局所做的那樣，我們有媒體查詢來觸發它？

傑森：有各種各樣的方法可以做到。 你必須做一個小的改變。 我假設我們將提供一些鏈接，這些鏈接將幫助人們玩弄這些東西。 我的意思是，我已經寫了一堆。 希望這會幫助人們。 然後在使用端，字體粗細軸只是映射到字體粗細。 您只需提供一個數字，而不是說常規粗體。 您可以使用媒體查詢來改變它。 您可以使用 JavaScript 更改它。 你可以用它做任何你想做的事。 我一直在使用一種叫做 CSS Locks 的技術，我從 Tim Brown 那裡學到了基本使用數學的方法。 CSS自定義屬性和計算來縮放它，一旦你從一個小斷點到一個大斷點，它會平滑地縮放字體大小和行高。

Jason：如果你願意的話，你也可以使用一點 JavaScript 來做同樣的事情。 權重軸映射到字體權重，即 CSS 屬性。 字體中的寬度軸將映射到字體拉伸，這只是以百分比表示。 我應該注意，許多字體設計師不一定會考慮如何表達這一點，因此您可能會看到一些奇怪的重量範圍，例如從 400 到 650。您仍然必須將其表達為百分比，但它確實有效。 沒關係。 您只需要知道什麼是正常的，並且所有字體都已記錄在案。 然後，除了這兩個之外，目前，對傾斜和斜體的實現支持有點不平衡。 很多你需要回退到使用字體變化設置的東西，然後你可以一次提供幾個東西。 這有點像字體功能設置。 這是一種較低級別的語法，您可以在其中提供這個四個字母軸的逗號分隔列表和值，下一個，下一個。

Jason：人們需要記住的一件事是，當你使用字體變化設置時，你會失去對它的所有語義理解，並且你會失去回退。 所有瀏覽器都普遍支持字體粗細和字體拉伸。 您絕對應該使用這些屬性。 對於其他任何事情，您可以使用字體變化設置。 但是像通常那樣使用字體粗細的好處是，如果變量字體沒有加載，瀏覽器仍然可以使用它。 然而，如果它不理解可變字體，或者它沒有加載，如果一切都在字體變化設置中，那麼你會丟失所有的樣式信息。 就在哪裡支持什麼而言，這只是一個小旁注。 但我還應該說，在大多數情況下您可能會遇到的所有發布瀏覽器都支持它。 I-11 不起作用，但您可以提供靜態網絡字體，然後使用 CSS 中的廣告支持來切換到可變字體。 然後，您將避免任何重複下載資產，並且效果非常好。 我已經在幾個站點上進行了生產。

德魯：我認為就像你看到的許多更現代的網絡技術一樣，如果有一種可變字體已經悄悄地冒泡了一段時間，並且只有當它最終沸騰並且我們在瀏覽器中獲得支持時像你這樣的人對它製造噪音並讓每個人都知道它就在那裡。 標准設計人員或開發人員幾乎可以感受到這種感覺，他們只是每天都在繼續他們的工作，而不是跟踪所有最新的下載。 它似乎是憑空出現的。 但我想這已經冒泡了很長時間……我的意思是，你提到了我們現在正在處理的兩個略有不同的實現。 有一種較舊和較新的實施標準嗎？

傑森：嗯，它實際上並不老和新。 他們倆都非常故意。 我稍後會回到這個問題，因為真的值得了解它們之間的區別。 但你是對的。 該格式是在三年多前引入的，也就是 2016 年 9 月。實際上，三週後，我們在 Safari 的夜間構建中實現了第一個工作實現。 我們擁有工作瀏覽器的速度非常快。 Safari 是第一個提供全面支持的。 我想那是High Sierra出來的時候。 我不知道，它就像 Safari 12 或類似的東西。

Jason：但不久之後，我們最終在 Firefox、Edge 和 Chrome 中獲得了支持。 實際上，我們已經支持瀏覽器將近兩年了。 但是沒有大量的字體。 有這種穩定的演變。 對在網絡上使用它們的支持實際上比其他任何地方都要長。 我的意思是，從技術上講，這種格式也適用於桌面操作系統。 因此，如果您有 TTF 格式，則可以將其安裝在 Windows 或 Mac 上的桌面操作系統中，並且可以在任何應用程序中使用它。 您不能總是以您可能想要無限地使用它們的方式來改變軸，但是在該字體文件中嵌入了命名實例的概念，將其映射回我們習慣的內容。

Jason：例如，在 Keynote 中，沒有明確支持可變字體，但如果在 Tech Sense 中有類似的東西，格式確實可以工作，再次，壓縮，輕。 您將擁有那些正常的、常規的、常規的粗體、窄體等，所有這些都可以在下拉菜單中使用，就像安裝整個家庭一樣。 然後，如果您使用 Illustrator 或 Photoshop，或者現在使用上周剛剛發布的 InDesign 或幾週前發布的 Sketch，它們現在都支持可變字體，這樣您就可以訪問所有不同的軸並在您的心的滿足。 但在瀏覽器中，我們還有很多工作要做。 從你妻子那裡得到啟示，我一直在敲打這個鼓，試圖讓人們更加了解它。 然後感謝 Firefox 團隊在創建開發人員工具方面所做的工作。 在 Jen Simmons 的推動下，我們可以在瀏覽器上使用令人難以置信的工具來幫助我們了解字體的功能。

Drew：您提到了字體設計師和字體功能。 有很多可用的字體嗎？

傑森：嗯，現在很多人都在這樣做。 尋找它們的最佳和最全面的地方可能是 Nick Sherman 的網站 v-fonts.com、v-fonts.com。 那隻是一個目錄網站。 它正在迅速變得非常非常大。 現在一直有更多可變字體出現。 開源的數量並不多，但如果你在 GitHub 上搜索可變字體，你實際上會在那裡找到一大堆項目。 但谷歌已經推出了他們新 API 的測試版，其中提供了大約十幾種可變字體。 他們還有更多的東西。 他們剛剛在 recursive.design 上發布了 Recursive，這是 Stephen Nixon 的一款出色的新字體。 Plex 變量，一個是可用的，它是開源的。 然後是大量的商業廣告。

Jason：很酷的一點是 Monotype 已經發布了一些非常大的產品。 但是，在這種格式的試驗中，有很多較小的代工廠和個人設計師在引領潮流。 我認為這對設計和網絡來說真的很棒，因為我們看到所有這些來自新設計師或小型設計師的新設計都在打破這個新領域。 因為我喜歡看到他們在這方面取得成功，因為他們真的主動把一些很棒的東西放在那裡。

Drew：我們是否看到將現有字體更新為可變字體以將系列替換為單個可變字體？ 這真的發生了嗎？

傑森：是的。 Monotype 發布的那些是對一些非常經典的字體的更新。 FF Meta 是我去年通過設計演示幫助他們推出的。 他們明白了。 Univers、Frutiger、Avenir，我認為這些是他們迄今為止發布的那些，這四個。 這些是真正的核心經典品牌字體。 他們正在做更多的工作。 我知道他們至少還有半打左右，處於不同的生產階段。 我知道為大公司做大量自定義字體工作的 Dalton Maag 有幾種非常好的可變字體。 我一直在用 TypeTogether 做一些工作。 他們也有幾個非常棒的字體。 我知道那個…

傑森：我在一些會議上展示了阿迪達斯也有自己的東西，他們已經在他們所有的品牌印刷作品中使用了將近兩年的時間。 這是非常非常了不起的東西。 但馬克西蒙森也在研究 Proxima Nova 的可變版本。 這是一件大事。 這是有史以​​來最暢銷的網絡字體之一。 正在發生。 它發生在規模上和規模上的點點滴滴。 但即使是訂閱 David Jonathan Ross（每月俱樂部的字體）這樣簡單的事情，幾乎每個月都會為您提供可變字體。 我的意思是，他對他一直在推出的東西真的很不可思議。 這就像一年72美元或類似的東西。 他一直在推出各種非常漂亮的東西。

Drew：這很有趣，因為很明顯，有了可變字體的功能，您可以創建利用這些的新設計。 但潛在地，可能有一些網站正在生產中，現在有可變字體版本可用，有人可以返回，重新訪問它，並用基於新可變字體版本的新實現替換多個字體文件。

傑森：是的，絕對的。 這是我經常收到的一些問題。 最近，我在看一個相當大的體育廣播網站，開發團隊問我同樣的問題。 我看了看，果然，對於他們使用的兩種字體，有可用的可變字體。 一項快速研究表明，我們可以用兩個可變字體文件替換一個字體的四個實例和另一個字體的三個實例，並在五個請求中佔用超過 70% 的文件大小。 我的意思是，從性能的角度來看，這將是一個問題。 對於真正大規模的站點，當您考慮從數百萬用戶中刪除近 300K 的數據下載時，這實際上增加了真正的美元節省和帶寬成本。 即使從純粹實用的角度來看，無需重寫任何 CSS，只需替換那些字體，這對他們來說已經是性能、頁面渲染時間以及實際帶寬成本方面的重大勝利。

Drew：實際上，它是否像聽起來那麼簡單，只是將一個換成另一個？

傑森：可以。 我認為最完美的例子是谷歌在 9 月的 ATypI 上不經意間放過的東西，他們已經開始與 Oswald 一起每天進行 1.5 億次。 他們製作了它的可變字體版本，然後他們剛剛開始在使用足夠多實例的網站上瀏覽它，這會產生顯著的好處。 他們沒有告訴任何人。 他們沒有告訴網站所有者。 沒有人必須做任何事情。 因為它具有正確的權重軸映射，所以默認值可以正常工作。 每天 1.5 億次是很多字體服務。 這開始讓他們更好地了解如果他們可以開始切換他們所服務的前五種網絡字體，這種情況對他們來說會是什麼樣子？ 我假設 Open Sans 可能就是其中之一。 我知道 Lato 可能在裡面，Roboto。

Jason：因此，如果您查看這些並查看它們的優化版本可能是什麼樣子，那麼您會發現谷歌有一些非常明確的原因會對此感興趣。 然後，如果您從另一方面看，如果公司使用自己品牌字體的整個範圍而不是不得不更換不同的字體或更多，那麼設計空間以及公司對品牌聲音的真實程度可能會如何限制在他們的調色板中。 所以在這個範圍的兩端，有很多有趣的事情需要學習和探索。

德魯：這聽起來像是一個令人興奮的、勇敢的排版新世界，並且有機會在網絡上以一種比我們以前能夠做的更敏感和可能更具創造性的方式進行打字。

傑森：嗯，這當然是我希望的。 我認為在所有階段在網絡上採用字體的最大障礙之一就是性能。 那麼會發生什麼？ 加載需要多長時間？ 這對頁面上的渲染時間意味著什麼？ 我們遇到了那些不可見文本或無樣式文本的問題。 與所有這些事情作鬥爭，真的，它回到到達那裡需要多長時間？ 瀏覽器對此有何反應？ 我們可以做很多事情來緩解其中一些問題。 但歸根結底，如果我們有更好的字體和更好的服務方式，那麼所有這些問題都會變得不那麼重要。 因此，有了它，我們就會變得更有表現力。 我們真的可以嘗試推動這一設計的結束，並嘗試更有創意。

德魯：因為你最近寫的文章表達了這樣一種感覺，也許網絡已經陷入了為每個站點設計文章模板的陷阱，可能對幾種不同類型的內容有一些變化。 但是每個人都傾向於這種 medium.com 風格的單列文本，在我看來非常可讀。 排版很好。 那是一件壞事嗎？

傑森：我不認為這很糟糕。 我只是覺得它會變得無聊。 我的意思是，當 Medium 出現時，那是相當新穎的。 我的意思是，我認為那一欄……就像你說的那樣，它的排版非常好。 它有一個不錯的區域。 它並不擁擠。 它不是局促和側邊欄和所有其他的東西。 總是會有商業模式的問題，以及什麼會支持它。 這就是為什麼我認為，Mule Design 的 Mike Monteiro 幾年前對西雅圖時報進行了非常漂亮的重新設計。 在它推出之前絕對華麗。 然後他們在柱子的兩邊放了這些巨大的橫幅，它只是把所有的空白都帶走了。 這是一個真正的恥辱。

傑森：我知道公司必須賺錢。 這有一些後果。 因此，如果將其作為一種選擇，那就太好了。 有那個漂亮乾淨的佈局。 但它不應該是唯一的。 我們在 CSS 中擁有所有這些功能，使我們能夠用邊距和佈局做非常有趣的事情。 我的意思是，這不僅僅是我們現在有網格的事實。 但是我們可以在瀏覽器中用 CSS 進行計算這一事實讓我們可以做更多有趣的事情。 你把它融入其中，讓字體更有表現力，然後我們就可以開始看看他們在雜誌上做了什麼。 《名利場》沒有一篇文章模板。 他們有六個或七個或八個。 如果你真的看看他們是如何佈置這些東西的，就會發現有大量的可變性，但它是在一個系統中發揮作用的。

Jason：所以當我們為我們的網站創建一個設計系統時，我們不會只停留在一個佈局上，而是有一種相對簡單的方法來在我們的內容管理系統中構建一些開關。 它們中的大多數都支持相當大的靈活性。 我們沒有理由不能給人們選擇。 我想使用佈局一、二、三、四、五、六。 這將引入不同的邊距，不同的偏移量。 也許引入了創建一些列的能力。 我們可以做很多不同的事情來打造一個更有趣的網絡。 我認為這種類型可以在其中發揮非常重要的作用。

德魯：在為網絡添加更多個性方面，打字是我們的救星嗎？

傑森：嗯，我認為可以。 我認為我們已經在網絡上進行了漫長的演變，以實現更好的可用性。 但我認為，當我們所關心的只是功利主義時，其中一個傷亡是可用的方法嗎？ 這往往會打敗個性。 然後，當每個網站都......再次出現時，我們有了網絡字體，這創造了我們以前沒有的新水平的表現力。 然後突然之間，我們可以……顯示變得更好了。 所以襯線字體又回到了混合體中。 我們可以在網絡上再次使用它們。 這些東西增加了一些生命。 然後我們使用一兩個 San-serif 對每個人進行了優化。 它是 Open Sans 或 Roboto 或 Oswald 或其他。 我們有點回到同樣的事情上，那裡有大量非常好的、非常易讀的字體。 我們還沒有真正教過當前這一代的 UX 設計師，他們經常推動很多關於排版的事情。 任何關於它的表現力，它可以改變情緒和語氣的程度。

Jason：所以我們有大量的人在決定網絡上事物的設計方向，他們對字體的想法可能不如學習平面設計和可讀性概念的人那麼見多識廣。 我們需要把這些東西放在一起。 這不是一個或另一個。 這是一個和。 它需要。

德魯：尤其是當我們談論個性、語氣和情緒時。 從商業角度或從我們所談論的角度來看，是品牌的各個方面。 因此，在讓一切看起來都一樣的過程中，我們是否失去了向客戶傳達品牌的能力？

傑森：當然。 不要涉足政治，但我認為整體......我們在美國肯定經歷過的主要問題之一，我敢肯定這與過去幾年在英國發生的事情沒有什麼不同。 當所有新聞都通過一個平台消費時，一切看起來都一樣，就沒有聲音的區別了。 因此，大約 75% 的美國成年人表示他們從 Facebook 獲得了很大一部分新聞。 我的意思是，讓我們擱置這通常是多麼可怕。 但鑑於一切都是統一呈現的，衛報、紐約時報、華爾街日報、華盛頓郵報和喬的右翼新聞之間的文章沒有區別。 一切都以完全相同的方式呈現。

傑森：當我們看到那個標誌，那種字體風格時，衛報是如此的有特色。 《華爾街日報》很有特色。 當我們看到它時，我們會立即認出它，即使只是一個標題。 我們知道那是從哪裡來的。 然後是與該品牌和真實性的自動關聯。 當你把所有這些都去掉時，你會說，“好吧，我要在標題上評估這個。 然後是，誰寫了一個更好的標題？ 這不是很多事情要做。 所以我認為我們損失了很多。 如果你看看 Apple News Plus 正在嘗試做什麼，一些公司正在努力嘗試並重新引入它。 布倫德爾在歐洲做了一件非常有趣的工作。 他們在美國推出，但我不確定他們是否真的那麼成功。 That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. 這是真的。 I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. 是真的。 That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. 謝謝你。 So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.