點(diǎn)擊了解！網(wǎng)頁設(shè)計文字排版全攻略

時間：2023-10-04 10:00:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-04 10:00:01 來源：網(wǎng)站運(yùn)營

點(diǎn)擊了解！網(wǎng)頁設(shè)計文字排版全攻略：現(xiàn)在很多設(shè)計師最開始做的是APP設(shè)計，最后應(yīng)工作需要會做些網(wǎng)頁相關(guān)的頁面，直接采用APP圖文的排版規(guī)則套用在網(wǎng)站上，因?yàn)榻K端設(shè)備，使用場景發(fā)生變化，會顯得很不合適。其實(shí)這里面就是幾個規(guī)則的事，記住這幾個規(guī)則，即使你從來沒做過網(wǎng)頁設(shè)計，也會做出符合業(yè)界規(guī)范，排版好看的網(wǎng)站了。

行間距

1倍 1.2倍 1.5倍 1.8倍 2倍

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







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

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

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

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




字體

第一類:系統(tǒng)默認(rèn)字體

不同的瀏覽器，會有不同的默認(rèn)字體，當(dāng)然也可以在網(wǎng)站中我們自己去設(shè)置，不過要考慮的一個問題是，你選擇的字體，你的用戶電腦中是否安裝，如果沒有，那么就會瀏覽器換成默認(rèn)字體。常用默認(rèn)字體有哪些呢

中文：宋體，微軟雅黑，華文黑體 黑體（無狀態(tài)）

宋體：

Win最常見的字體，小字體點(diǎn)陣，大字體TrueType，但是大字體并不好看，所以最好別做標(biāo)題。

微軟雅黑：

Vista之后新引入的字體，打開Cleartype之后顯示效果不錯，不開Cleartype發(fā)虛。

華文細(xì)黑：

Mac下的默認(rèn)中文。

英文：helveticaarial

Helvetica:

被評為設(shè)計師最愛的字體，Realist風(fēng)格，簡潔現(xiàn)代的線條，非常受到追捧。在Mac下面被認(rèn)為是最佳的網(wǎng)頁字體，在Windows下由于Hinting的原因顯示很糟糕。

Arial:

Helvetica的「克隆」，和Helvetica非常像，細(xì)節(jié)上比如R和G有小小差別。如果字號太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常

以上這些作為系統(tǒng)字體，可以應(yīng)用在網(wǎng)站中標(biāo)題，正文需要呈現(xiàn)大量信息的地方

第二類：圖片字體

圖片字體是網(wǎng)站中，一些banner，海報上面呈現(xiàn)信息內(nèi)容的字體，取決于視覺設(shè)計師做的效果圖，可以理解為一張圖片，不受瀏覽器默認(rèn)字體影響，唯一要注意的就是，字體的氣質(zhì)和文案內(nèi)容是否吻合，是否美觀，是否收費(fèi)




這類字體由于氣質(zhì)過多，浩哥有一篇專門文章推薦過，不在復(fù)述。

鏈接為：

字號

正文：

10px－18px之間比較合適（中英文皆可，一般情況英文要比中文略小些）

10px對于一些字體會顯得過小，但是還是會有個別處選擇用10px

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




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

標(biāo)題

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




文字邊緣 銳利？渾厚？無？平滑？這些怎么選擇

首先要知道一點(diǎn)，“無，銳利，犀利、渾厚、平滑”，都是指文字邊緣的處理。

說白了這種形式就是為了在視覺上產(chǎn)生良好體驗(yàn)，加了“羽化”效果。




具體在設(shè)計中，我們應(yīng)該如何做出選擇？簡單的來說12px以下，18px以上可以選擇銳利或者平滑這樣沒有鋸齒，其余可以選擇無。微軟雅黑 字體邊緣選擇window或者window LCD 其他字體的話基本上用window或者window LCD基本上沒什么問題。

banner字體推薦

下面給大家推薦下在網(wǎng)頁banner圖片中，使用頻率高的字體

第一類，穩(wěn)定型（協(xié)調(diào)，齊全，穩(wěn)定，高質(zhì)）

微軟雅黑

冬青黑體

宋體

華文細(xì)黑

方正正中黑




方正蘭亭系列




第二類，剛硬，銳利，清晰，強(qiáng)烈

造字工坊力黑體




造字工坊版黑體




造字工坊勁黑體




銳字逼格銳線體簡




張海山銳線體




華康儷金黑




蒙納超剛黑體




（更適用大氣，熱烈，權(quán)威，聲明等主題）

第三類，輕松，手寫，可愛，童趣，親切

方正經(jīng)黑




華康海報




漢儀小麥




方正稚藝




新蒂下午茶




漢儀歪歪體




新蒂小丸子




（適用于，游戲娛樂活動海報，h5廣告頁面，兒童／女性主題）

第四類，靈動，清新，秀雅，精致，古韻

方正清刻本悅宋簡體




方正宋刻本秀楷體




漢儀全唐詩簡




康熙字典體




祥南行書體




造字工房刻宋




（適用于復(fù)古，典雅，傳統(tǒng)，品質(zhì)，靈動等主題）

以上這些字體，確實(shí)很好用，大家可以下載在自己的電腦中，根據(jù)實(shí)際情況選用。特別提示下，這些字體不是免費(fèi)的，需要購買版權(quán)，否則是不能用于商業(yè)用途，切記切記。土豪公司就申請購買，如果不愿出這份錢，設(shè)計師就要動動小腦筋了，需要對字體做下調(diào)整！?。?br>
v公眾：浩哥小課堂