[閱讀] Typographic Design Patterns And Current Practices

一直在關注網頁設計排版的相關訊息,如何規畫正確的字體集、字型、行高、行寬等...
剛好看到了這篇文章,分享給大家。

Typographic Design Patterns And Current Practices (2013 Edition)

連結位置:http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/


大致將探討的內容如下:
因應行動裝置,響應式設計已是未來趨勢

  • 襯線和無襯線幾乎同樣受歡迎在頭條。
  • 襯線在正本內文中最受歡迎。
  • 大部分網站使用非標準字體作為其主要的字體。
  • 標題字體的平均大小,最流行的尺寸範圍從20到32像素。
  • 內文字體的平均大小,大多數的網站分別為12和14之間的像素字體大小。現在,14像素和16像素一樣受歡迎。
並歸納了一些原則:
  • 標題到正文字體大小比率 Headline ÷ Body Copy = 2.5 
  • 最佳的內文行高line height (pixels) ÷ body copy font size (pixels) = 1.46line length (pixels) ÷ line height (pixels) = 24.9內文的值乘以1.46將會給你最佳的行高,然後,你可以適應您的字體樣式。 這個新的值乘以24.9,應該給你最佳的行長。注意的佈局也需要gutters, margins and padding 讓內文可以呼吸。

每一行的字符(元)數

由Robert Bringhurst提出,Web排版的經典規則規定每行的字符的最佳數量是55至75。我們的數據顯示,在其實際大小(即不進行變焦,並在默認的字體大小),大多數網站平均83.9每行字符在寬屏分辨率(在我們的情況下,瀏覽器的寬度為1100像素)
雖然這個平均波動相當明顯,當瀏覽器是其它各種寬度 - 83和86之間每行的字符顯示寬度為700,950和1600像素 - 只在較小的500像素這個平均接近經典規則的看法。在這個寬度,平均是每行77個字符左右。

網頁的排版和響應式設計

計算每行字符,內文在五個瀏覽器的寬度(試驗的高度)的字體大小和標題的字體尺寸:500,700,950,1100和1600像素。這三個指標的字體大小不跨屏幕尺寸有很大的不同 - 除了500像素。
從多列佈局設計組件移動到單個列,縮放圖像和字體,不同程度的佈局,圖像縮放,內容和字體大小的變化是很明顯的。
大部分網站的佈局不會因會縮放而破版。

響應式設計實施的一些數字

At a display width of 500 pixels:
  • Average line height: 28 pixels
  • Average font size of body: 15 pixels
  • Average number of characters per line: 77
At a display width of 700 pixels:
  • Average font size of headlines: 36 pixels
  • Average font size of body: 15.6 pixels
  • Average number of characters per line: 82.7
At a display width of 950 pixels:
  • Average font size of headlines: 37.9 pixels
  • Average font size of body: 16.1 pixels
  • Average number of characters per line: 84.8
At a display width of 1600 pixels:
  • Average font size of headlines: 40.7 pixels
  • Average font size of body: 16.2 pixels
  • Average number of characters per line: 86.8

效能注意事項

  • 嵌入字體正在慢慢成為在網頁設計中的一個事實上的標準
  • 確保備援字體的內容顯示在Web字體加載之前,然後切換到Web字體
  • Web字體的確是一個沉重的性能瓶頸,平均5.7字體文件被加載,共計133.5 KB的平均額外頻寬的

其他發現

  • 45% of websites underline the links in body copy. The others do so only on hover or not at all.
  • 71% of websites highlight links with color. The rest do not or only on hover.
  • 99% of websites left-align text.
  • No website uses hyphenation. 
  • 84% of websites use the same fonts in the print and standard style sheets.
  • The loading weight of home pages averages around 1.346 MB. Article pages are marginally less, at around 1.146 MB.
  • The websites average 119 HTTP requests!
結論
  • 襯線字體比無襯線的標題和正文都更受歡迎。然而,無襯線和襯線混合運用來對比效果是一種趨勢。
  • The most common fonts for headlines are Georgia, Arial and Chaparral Pro. But the majority of websites are individualized and use less common fonts.
  • The most common fonts for body copy are Georgia, Arial and Helvetica. But, again, the majority of websites are individualized and use less common fonts.
  • The most popular font size for headlines is between 29 and 32 pixels.
  • The most popular font size for body copy is between 14 and 16 pixels.
  • headline font size ÷ body copy font size = 2.4
  • line height (pixels) ÷ body copy font size (pixels) = 1.47
  • line length (pixels) ÷ line height (pixels) = 24.8
  • space between paragraphs (pixels) ÷ line height (pixels) = 1.43
  • The optimal number of characters per line is between 55 and 75, but 75 to 90 is more popular.
  • Body text is left-aligned. Hyphenation is not used at line endings. And links are underlined and/or highlighted with bold or color, sometimes only on hover.
  • 大部分的移動設備都經由響應式設計,雖然一些出版物選擇提供一個專用的APP


張貼留言

這個網誌中的熱門文章

互補色與對比色解惑

[讀書心得] 設計思維 Design Thinking

龍岡手繪地圖製作有感