設(shè)計是一個高維問題：我們可以為單個標簽設(shè)置數(shù)百個CSS 變量。很難知道從哪里開始。整個過程可能會開始感覺像是在一個令人著迷但最終是異國風景的令人眼花繚亂的隨機漫步。大多數(shù)設(shè)計師似乎依靠直覺和多年來之不易的經(jīng)驗來做出設(shè)計判斷，這對直覺上受到挑戰(zhàn)的新手沒有幫助。因此，我從數(shù)據(jù)科學家的手冊中翻出一頁，開始為我稱為設(shè)計數(shù)據(jù)
網(wǎng)站vi設(shè)計公司爬取了超過一百萬個主頁并保存了它們的HTML 和CSS 文件，以分析網(wǎng)站的各個方面，從圖像和布局到字體和顏色。對于本文，我們將查看作為桌面查看的前一千個網(wǎng)站（有關(guān)詳細信息，請參閱詳細信息和注意事項部分）。我
甚至使用puppeteer來解析javascript 渲染的網(wǎng)站。目標是提供一些數(shù)值洞察力和基準，以更好地定量地理解網(wǎng)頁設(shè)計世界。
注意——這些發(fā)現(xiàn)并不打算成為一個嚴格的風格指南：畢竟，設(shè)計是一門豐富且以人為本的學科。我們永遠不應該忘記這一點。僅僅因為85% 的在線字體是無襯線字體（見下文）并不意味著您只需要使用無襯線字體。但是，如果您確實選擇了反抗并采用襯線字體，那么您真正脫穎而出有多少呢？什么時候使用襯線字體更常見？
因此，事不宜遲，讓我們深入了解網(wǎng)站vi設(shè)計公司的第一篇博客文章，這都是關(guān)于字體的：
字體系列
字體選擇是一個情緒化的話題：只要看看這個提案的數(shù)百條反應和數(shù)十條評論，就
可以更改normalize.css中的默認字體系列。在字體中，也許最突出的內(nèi)戰(zhàn)是襯線字體和無襯線字體之間。誰在網(wǎng)絡上贏得了這場戰(zhàn)斗？得知它是無襯線字體時，您可能不會感到驚訝。平均而言，我們估計85% 的字體是無襯線字體，其余的則留給襯線字體、等寬字體和其他所有字體。我們是如何推斷出來的？繼續(xù)閱讀以獲取更多信息！
字體系列堆棧的中值深度為4：一種主要字體和三種備用字體。
首先，關(guān)于font-family 如何工作的基本提示：記住font-family CSS 屬性不僅僅是一個單一的值，而是一個優(yōu)先排序的字體列表。瀏覽器嘗試第一個字體，如果不可用，它會處理字體系列堆棧中的后續(xù)字體，直到找到系統(tǒng)支持的字體。設(shè)計師的最佳實踐是首先列出他們的預期字體，并列出隨后的備份字體列表，這些備份字體試圖保留該意圖，同時降低保真度但增加流行度。那么多少備份字體就足夠了？
字體系列堆棧的中值深度為4：一種主要字體和三種備用字體。但我們經(jīng)常看到深度為6（第75 個百分位）甚至12 個（第99 個百分位）的堆棧。一個網(wǎng)站的字體堆棧深度甚至為21！下面是深度分布圖：
那么使用什么字體呢？下面是整個堆棧中使用的前10 種字體的列表。請注意，這些不一定是顯示的字體——它們往往是特定于網(wǎng)站的。相反，我們看到了最常見的備份字體：
十大網(wǎng)絡字體</a>
在前10 種字體中，前9 種都是無襯線字體。通過對這些最常見的“包羅萬象”字體進行分類，我們可以自動推斷出第一個字體在堆棧中的廣泛屬性，即使它們往往是高度特殊的。因此，上面關(guān)于無襯線字體流行的統(tǒng)計數(shù)據(jù)。
但我們可以走得更遠！上述統(tǒng)計數(shù)據(jù)是整個段落(P) 和標題（H1、H2 等）標簽。如果我們按標簽類型查看無襯線字體的比例，您會看到一個截然不同的故事。事實證明，標頭不太可能是無襯線的，但是這種可能性會降低標頭的從屬程度。
因此，無襯線的概率范圍從H1 的58% 到H2 的70% 到H5 的89% 和P 的93%。如果您喜歡使用serif，那么您將在更好的公司中將其應用于標題而不是段落標簽！（有趣的是，這似乎符合傳統(tǒng)的設(shè)計理念，即較大的字體比較小的字體更適合襯線。
但如果網(wǎng)站vi設(shè)計公司考慮字體配對，情況就會變得更加復雜。下面，我們分解了serif/sans-serif 與P/H1 標簽的每個2X2 中的概率。我們可以看到那些帶有無襯線段落的襯線標題是反襯線的兩倍多。換句話說，平均襯線段落與襯線標題配對的時間約為51%，但平均襯線標題僅與襯線段落配對的時間為36%。最后，大多數(shù)字體都是無襯線字體似乎符合傳統(tǒng)觀點，即無襯線字體是網(wǎng)頁設(shè)計的基礎(chǔ)
最基本的問題之一是我的字體應該是什么大小？較大的字體更易于閱讀和訪問。但是較小的字體具有更大的信息密度。我們?nèi)绾纹胶膺@些競爭因素？我們計算了數(shù)字，結(jié)果顯示中值字體大小為14 像素。但是，您很可能會看到16 像素的字體；12px 甚至18px 并非聞所未聞。也就是說，很少低于10 像素或高于24 像素。
當網(wǎng)站vi設(shè)計公司在襯線和無襯線之間進行分解時，情況會有所不同。事實證明，無襯線字體往往更大一些。雖然無襯線字體的中值大小仍為14 像素，但襯線字體的中值大小為16 像素。您可以在它們的尺寸分布中看到這個更大的尺寸：
標頭
標題是通過促進頁面掃描來幫助組織文本的基本元素。因此，它們通常具有較大的字體大小和較重的字體粗細。但是設(shè)計師選擇哪一個呢？查看數(shù)據(jù)，我們將標題標簽與最大的文本進行比較。我們發(fā)現(xiàn)設(shè)計師更常選擇使用更大的尺寸而不是更重的重量（94% 對82%），但他們經(jīng)常同時使用兩者（76%）。（如果您想知道，我們正在使用最大的標頭標簽，因為有些網(wǎng)站不使用H1，而是選擇將H2 或其他標頭作為最大的標頭。）
讓我們放大字體粗細。毫不奇怪，大多數(shù)段落標簽都是正常的（400 字體粗細），而多個標題粗細是粗體（700）。請注意，標題標簽的中等(500) 和半粗體(600) 字體粗細或段落標簽的淺(300) 字體粗細也很常見。
現(xiàn)在讓我們看看標題字體大小。由于基線段落字體大小因頁面而異，因此要調(diào)查的正確指標是標題字體大小與段落字體大小的比率。下面是我們數(shù)據(jù)集中不同頁眉和段落標簽之間字體大小的中值比率。我們可以看到，在中間頁面上，H1 大約是P 大小的1.9 倍：所以如果P 是16px，H1 大約是30px (16 x 1.9)。副標題的比例會降低，直到我們到達H5，其中值大小與P 相同（并且可能使用不同或更重的字體來區(qū)分H5 和P）。
現(xiàn)在需要注意的是：網(wǎng)站vi設(shè)計公司使用了巨大的百萬作為網(wǎng)站列表，但并非每個網(wǎng)頁都適合程序化抓取，因此結(jié)果并不完全具有代表性。該分析僅模擬了桌面瀏覽器：未來，我們將考慮移動和平板電腦瀏覽器，它們應該會在響應式頁面上產(chǎn)生非常不同的答案。對于這篇博文，我們只分析了大約前1000 個網(wǎng)站以節(jié)省時間。我們不區(qū)分外語和英語網(wǎng)站，也不區(qū)分不同類型的網(wǎng)站。顯然，如果您正在為The Daily Mail 設(shè)計，那么您的外觀與Medium 博客完全不同。
設(shè)計數(shù)據(jù)是一個對話框！我對設(shè)計師、數(shù)據(jù)科學家和更廣泛的社區(qū)對設(shè)計的看法以及人們想要學習的定量見解感興趣。我想分析和寫下你覺得有趣的東西。
添加品牌總監(jiān)微信
總監(jiān)微信
復制成功
業(yè)務咨詢 何先生
業(yè)務咨詢 何先生
搜索感興趣的內(nèi)容
