現(xiàn)在很多人都喜歡通過(guò)手機(jī)上的網(wǎng)頁(yè)來(lái)查看自己想看的新聞或者是咨詢，這時(shí)候網(wǎng)頁(yè)上面字體的大小會(huì)影響用戶看網(wǎng)頁(yè)的時(shí)間，今天就一起來(lái)看看，怎么設(shè)計(jì)網(wǎng)頁(yè)的字體大小。

可讀性是一件大事，平時(shí)上網(wǎng)看書(shū)時(shí)，可能覺(jué)得網(wǎng)頁(yè)中的字體太小，看久了眼睛會(huì)很不舒服，你為什么設(shè)計(jì)一個(gè)用戶難以閱讀的網(wǎng)站?訣竅是創(chuàng)建一個(gè)適合閱讀的刻度。你要處理的文字尺寸越多，這就越重要。在逐行閱讀時(shí)，太寬的字體讓人難以集中精力; 太擁擠導(dǎo)致閱讀時(shí)眼睛移動(dòng)太快，沒(méi)有一個(gè)很好的節(jié)奏。

怎么設(shè)計(jì)網(wǎng)頁(yè)的字體大小

　　網(wǎng)頁(yè)也叫做超級(jí)文本，既然是超級(jí)文本，就會(huì)涉及到文字，圖片的排版，而文字作為信息呈現(xiàn)的主體，甚是重要?，F(xiàn)在很多設(shè)計(jì)師最開(kāi)始做的是APP設(shè)計(jì)，最后應(yīng)工作需要會(huì)做些網(wǎng)頁(yè)相關(guān)的頁(yè)面，直接采用APP圖文的排版規(guī)則套用在網(wǎng)站上，因?yàn)榻K端設(shè)備，使用場(chǎng)景發(fā)生變化，會(huì)顯得很不合適。其實(shí)這里面就是幾個(gè)規(guī)則的事，今天就給大家分享，記住這幾個(gè)規(guī)則，即使你之前連簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)都沒(méi)有做過(guò)，也照樣能做出符合業(yè)界規(guī)范，排版好看的網(wǎng)站了。

（圖片來(lái)自網(wǎng)絡(luò)）

怎么設(shè)計(jì)網(wǎng)頁(yè)的字體大小行間距

　　1倍 1.2倍 1.5倍 1.8倍 2倍

　　這是一個(gè)經(jīng)驗(yàn)值，我個(gè)人最長(zhǎng)采用的行間距是1.5倍，不同的產(chǎn)品對(duì)這個(gè)值要求可能不同，比如正文字號(hào)是16px，間距是24px

　　對(duì)于中文來(lái)說(shuō)，常用的字體大小12px、14px、16px、18px等偶數(shù)大小，在IE6和IE7設(shè)置其行高也為偶數(shù)能解決一些特殊情況下的字體對(duì)其問(wèn)題。

　　在這里我加入了1倍間距，做設(shè)計(jì)的同學(xué)會(huì)感到奇怪，其實(shí)這個(gè)間距是針對(duì)word上面的正文排版，常用的是1倍-1.2倍。過(guò)大就不方便閱讀。這是跟網(wǎng)頁(yè)中行距的區(qū)別。

　　段間距：行間距是段落間距的50%或者75%

　　比如行間距采用32px，那么段落間距可以采用64px，或者43px

（圖片來(lái)自網(wǎng)絡(luò)）

　　怎么設(shè)計(jì)網(wǎng)頁(yè)的字體大小字號(hào)

　　正文：

　　10px-18px之間比較合適(中英文皆可，一般情況英文要比中文略小些)

　　10px對(duì)于一些字體會(huì)顯得過(guò)小，但是還是會(huì)有個(gè)別處選擇用10px

　　12px是宋體能顯示的極限，雖然微軟雅黑能顯示更小的字體，但目前的應(yīng)用環(huán)境尚未成熟。由于宋體基本上是目前顯示中文唯一的通用Web字體，所以12px成為最常用的字體大小。我們當(dāng)然可以依據(jù)產(chǎn)品的需要來(lái)修改這個(gè)默認(rèn)值。

　　在Chrome3.0之后的中文版中，字體大小最小值是12px，比如你設(shè)置最小字體為10px，最后也變成12px。

　　標(biāo)題:

　　文字字號(hào)，18px，20px，24px，28px，32px，根據(jù)內(nèi)容需要選用就好，并不是單數(shù)字號(hào)不可選，而是我個(gè)人喜好雙數(shù)哈哈。為了讓網(wǎng)頁(yè)排版更好看，這里有個(gè)技巧，增加字號(hào)對(duì)比，在app界面設(shè)計(jì)中，標(biāo)題與正文的文字差不會(huì)過(guò)大，以iPhone7尺寸為例，標(biāo)題36號(hào)，文章正文可選34px，32px，30px。而在網(wǎng)頁(yè)上極差關(guān)系可以做的更大，更夸張，標(biāo)題30px正文12px，這種做法可以讓網(wǎng)頁(yè)眾多的文字信息，分清層級(jí)主次，用戶更有視覺(jué)焦點(diǎn)。這一原則，不適用在移動(dòng)端。移動(dòng)端我們可以通過(guò)顏色，字重，等其他方式來(lái)做極差關(guān)系。

（圖片來(lái)自網(wǎng)絡(luò)）

　　網(wǎng)頁(yè)的字體太大的話，一頁(yè)可以顯示的文字就會(huì)變少，但是字體太小的話，又會(huì)覺(jué)得眼睛很疲勞不愿意看。以上就是關(guān)于怎么設(shè)計(jì)網(wǎng)頁(yè)的字體大小的相關(guān)內(nèi)容。