環(huán)顧互聯(lián)網(wǎng)，并注意排版在各個方面如何絕對主導(dǎo)著網(wǎng)頁設(shè)計(jì)。畢竟網(wǎng)頁設(shè)計(jì)有95％的版式是有原因的。當(dāng)你考慮它時，這是一個有意義的世界?；ヂ?lián)網(wǎng)是關(guān)于內(nèi)容的，內(nèi)容是指文字和文字。這意味著排版。精明的網(wǎng)頁設(shè)計(jì)師知道這一點(diǎn)，因此將投入大量的思考和思考，以便在他正在工作的任何網(wǎng)站上正確排版。為了使類型既實(shí)用又吸引讀者，他在計(jì)劃站點(diǎn)的信息體系結(jié)構(gòu)時必須考慮很多不同的因素。哪種字體最易讀？讀者容易瀏覽哪些字體？那清晰的字體呢？

由于所有這些問題和考慮因素，初次嘗試為網(wǎng)站釘上字體并不容易。但是我們在網(wǎng)上進(jìn)行了搜索，發(fā)現(xiàn)Smashing Magazine的這項(xiàng)開創(chuàng)性研究成為了目前的最佳排版實(shí)踐，至少可以說令人大開眼界。我們已對這些數(shù)據(jù)進(jìn)行了深入研究，本期高端網(wǎng)站設(shè)計(jì)公司Angle為大家?guī)砭W(wǎng)頁設(shè)計(jì)中排版的最佳做法。

1、標(biāo)題
網(wǎng)站副本中的標(biāo)題可以說非常重要，因?yàn)榱钊司趩实难芯勘砻?，大多?shù)人只在Internet上閱讀標(biāo)題。如果用戶的行為使許多讀者甚至不喜歡正文，那么你就必須使標(biāo)題的字體特別醒目，以吸引他們的注意力并說服他們進(jìn)一步閱讀。根據(jù)前面提到的Smashing Magazine從2013年開始的研究，標(biāo)題幾乎是無襯線字體和襯線字體之間的紐帶，其中51％的標(biāo)題使用無襯線字體，而超過47％的標(biāo)題使用襯線字體。襯線字體在最近幾年變得越來越流行，這主要是由于人們認(rèn)為襯線字體在頭條新聞中脫穎而出，并為站點(diǎn)訪問者提供了可讀的結(jié)構(gòu)。在流行度問題上，標(biāo)題的兩種最受歡迎的襯線字體是Georgia和Chaparral Pro，而標(biāo)題的兩種最受歡迎的sans-serif字體是Arial和Freight Sans Pro。雖然你當(dāng)然可以在網(wǎng)站上用自己的字體試驗(yàn)標(biāo)題，但請注意，這些字體的流行是由于讀者的積極反饋。

2、內(nèi)容
網(wǎng)站的正文構(gòu)成了內(nèi)容的最重要部分，即使閱讀內(nèi)容的人少于網(wǎng)頁上的實(shí)際標(biāo)題和標(biāo)題。與標(biāo)題中的Sans和Sans-Serif字體之間的緊密聯(lián)系不同，在正文復(fù)制方面，明顯的贏家是襯線。根據(jù)同一項(xiàng)研究，多達(dá)61.5％的網(wǎng)站在正文中使用襯線字體，但僅有微不足道的網(wǎng)站中有36.5％的人使用無襯線字體。讓我們看一下它如何進(jìn)一步分解。用于主體復(fù)制的最常用的襯線字體是Georgia和Chaparral Pro，幾乎可以反映標(biāo)題的比例。在sans-serif前端，用于正文復(fù)制的最常用sans-serif字體是Arial和Helvetica。

3、有趣的筆記
值得注意的是，該研究還確定了當(dāng)前大多數(shù)網(wǎng)站都沒有使用任何標(biāo)準(zhǔn)字體作為其主要字體。研究中查看的網(wǎng)站中大約有39％的正文和標(biāo)題中的66％沒有使用標(biāo)準(zhǔn)字體。這一令人驚訝的發(fā)現(xiàn)的一個理論是，像Fontdeck和Typekit這樣的服務(wù)使品牌以前所未有的獨(dú)特方式與競爭對手區(qū)分開來。這是所有這些的要點(diǎn)，是的，你可以放心地使用它并選擇一種“不威脅”的標(biāo)準(zhǔn)字體，但是許多網(wǎng)站都大膽地反對這樣做。他們發(fā)現(xiàn)，只要他們的網(wǎng)站訪問者和讀者不傷及網(wǎng)站上的用戶體驗(yàn)，他們就會非常喜歡非常規(guī)字體。

4、背景資料
不言而喻，網(wǎng)頁設(shè)計(jì)中受人歡迎的背景是能使其文字形成鮮明對比的任何顏色。這自然使站點(diǎn)訪問者更輕松地更有效地閱讀副本，從而提高了可讀性。Smashing Magazine的研究發(fā)現(xiàn)，大多數(shù)網(wǎng)站更喜歡采用暗光布置。這意味著在淺色背景上的深色文本。但是，當(dāng)前對于印刷狀態(tài)要指出的真正重要的一點(diǎn)是，暗光設(shè)置的苛刻程度已經(jīng)降低。例如某些網(wǎng)站正在嘗試使用深灰色的米色背景上的文字。在這種方案中，對比度不太明顯，但仍為讀者提供舒適的閱讀體驗(yàn)，有助于輕松掃描每一行。毫不奇怪，當(dāng)涉及到正文復(fù)制時，在白色背景上使用黑色文字的最喜歡的方式仍然是黃金標(biāo)準(zhǔn)。除了因清晰的對比而易于閱讀外，黑白效果還可以追溯到報(bào)紙上的經(jīng)典彩色格式，這也解釋了其在互聯(lián)網(wǎng)正文中的廣泛流行。

5、標(biāo)題的字體大小
至少就網(wǎng)絡(luò)頭條而言，趨勢肯定越大越好。目前標(biāo)題的字體大小是38像素。自Smashing Magazine于2009年進(jìn)行最后一項(xiàng)研究以來，實(shí)際上增加了10個像素！顯然，為了吸引主要閱讀標(biāo)題的用戶，越來越多的網(wǎng)站不得不訴諸增加標(biāo)題像素的大小。如果你感到好奇，BootstrapBay的博客在標(biāo)題上使用Roboto字體，標(biāo)題為28像素，標(biāo)題為24像素，正文為16像素。但是應(yīng)該指出的是，標(biāo)題中最常用的字體大小范圍是20到32像素，這使BootstrapBay的博客打點(diǎn)數(shù)處于流行狀態(tài)的中間。

6、正文的字體大小
正文與標(biāo)題是不同的野獸，因此正文的典型字體大小要小得多也就不足為奇了。但是即使對于主體復(fù)制，也有一個事實(shí)是：字體大小變大的總體趨勢。在這項(xiàng)研究中，幾乎相同數(shù)量的網(wǎng)站使用14和16像素進(jìn)行正文復(fù)制。與Smashing Magazine于2009年進(jìn)行的網(wǎng)絡(luò)排版研究相比，這值得注意地增加了兩個像素大小，因?yàn)槟菚r大多數(shù)網(wǎng)站僅使用12和14像素進(jìn)行正文復(fù)制。同樣，BootstrapBay的博客是與時俱進(jìn)的版式最佳實(shí)踐的完美示例：我們在博客上使用16像素作為正文副本。標(biāo)題與正文字體大小最常用的比率（如經(jīng)常重復(fù)）為2.5?；旧?，你需要獲取標(biāo)題的像素大小，然后將其除以正文副本的像素大小即可獲得所有重要的比例。

7、主體復(fù)制最佳線長
一般來說，規(guī)則是，較長的線長應(yīng)等于較高的線高。當(dāng)你將正文副本的字體大小乘以1.46時，你將獲得網(wǎng)站的最佳行高。然后你可以使其適應(yīng)字體樣式。當(dāng)你使用此產(chǎn)品并將其乘以24.9時，你將獲得網(wǎng)站的最佳行長。但是請不要忘記，任何有效的布局都需要考慮邊距，填充和裝訂線，以免顯得過于混亂。

8、每行多少個字符？
重要的是，每行字符數(shù)必須達(dá)到該最佳點(diǎn)，以使你的網(wǎng)站看起來美觀。研究發(fā)現(xiàn)，當(dāng)今大多數(shù)網(wǎng)站在寬屏分辨率下實(shí)際上平均每行83.9個字符。為什么會這樣呢？設(shè)計(jì)人員可能會尋求平衡字體大小與窄顯示屏中顯示的文本數(shù)量之間的平衡。如果將字符數(shù)增加到超出此平均值，則將導(dǎo)致閱讀困難，因?yàn)樽煮w大小必須減小以適應(yīng)每行的字符數(shù)。如果將字符數(shù)增加到超出該平均值太多，則可能會導(dǎo)致正文副本顯示得太??；減少過多的字符數(shù)，則冒著使正文復(fù)制膨脹到更接近標(biāo)題和標(biāo)題尺寸的風(fēng)險(xiǎn)。

9、響應(yīng)式排版
以下是一些喜訊，這些喜訊會讓喜歡在不同平臺上瀏覽網(wǎng)站的人感到高興：研究中42％的網(wǎng)站具有響應(yīng)式排版。雖然理想情況下該數(shù)字應(yīng)該接近100％，但是當(dāng)你考慮到響應(yīng)式設(shè)計(jì)只有大約四年的歷史時，這的確還不錯。當(dāng)瀏覽器大小更改時，有42％的受測試網(wǎng)站具有某種擴(kuò)展形式。其中包括次要和主要更改，范圍從圖像縮放以適應(yīng)新的瀏覽器寬度，到菜單被圖標(biāo)替換，并且多列轉(zhuǎn)換為單列。其他沒有響應(yīng)的網(wǎng)站則依賴于移動應(yīng)用程序或移動網(wǎng)站。但是，從用戶的角度來看，強(qiáng)迫用戶首先下載應(yīng)用程序或訪問單獨(dú)的移動網(wǎng)站比僅在瀏覽器中適當(dāng)調(diào)整所有內(nèi)容的位置更加不便。時間會證明用戶是否會繼續(xù)忍受。

好的，現(xiàn)在你知道當(dāng)今的網(wǎng)頁設(shè)計(jì)排版情況。當(dāng)然網(wǎng)頁設(shè)計(jì)的趨勢經(jīng)常且迅速地變化，但是該研究數(shù)據(jù)表明某些趨勢非常一致且可靠。例如：標(biāo)題和正文的字體大小不斷變化。此外越來越多的網(wǎng)站也變得反應(yīng)靈敏，你可以期望42％的網(wǎng)站在接下來的一兩年內(nèi)輕松攀升。
作為網(wǎng)頁設(shè)計(jì)師，你知道排版對于用戶友好，美觀且功能全面的網(wǎng)站有多么重要。盡量不要被所有的圖像，新的設(shè)計(jì)趨勢以及諸如此類的東西所困擾。歸根結(jié)底，實(shí)現(xiàn)用戶友好的字體等基礎(chǔ)仍然是網(wǎng)頁設(shè)計(jì)的最重要方面。

這是閱讀本指南后應(yīng)該保留的版式最佳實(shí)踐：

• 標(biāo)題使用襯線字體和無襯線字體的百分比大致相等
• 正文使用的襯線字體比無襯線字體更多
• 非標(biāo)準(zhǔn)字體在網(wǎng)站上占主導(dǎo)地位
• 背景仍然在暗光配色方案下運(yùn)行
• 標(biāo)題和正文的字體大小不斷增加
• 每行不超過84個字符
• 只有不到一半的網(wǎng)站具有響應(yīng)式排版

我們希望我們啟發(fā)你在下一次為新客戶設(shè)計(jì)網(wǎng)站時真正考慮字體的選擇。排版是不應(yīng)該匆忙的事情，當(dāng)你牢記這些最佳實(shí)踐和用戶體驗(yàn)時，結(jié)果可能會很出色。本期高端網(wǎng)站設(shè)計(jì)公司就為大家分享到這里。