排版是任何網(wǎng)站最重要的元素之一，對(duì)品牌和體驗(yàn)有很大的影響。

它是如此的重要，以至于對(duì)你的版式進(jìn)行大規(guī)模的改變——選擇一種新的字體，改變衡量標(biāo)準(zhǔn)，增加領(lǐng)先優(yōu)勢(shì)——是復(fù)雜的，并且充滿了潛在的時(shí)間消耗。

但是，你可以對(duì)你的排版做一些簡(jiǎn)單的改變，這些改變不會(huì)破壞你的網(wǎng)格，而且可以在30分鐘或更少的時(shí)間內(nèi)完成。這里有8個(gè)最簡(jiǎn)單的方法。

1. 增加顏色對(duì)比

在布局文本時(shí)，設(shè)計(jì)師通常會(huì)將文本視為視覺(jué)設(shè)計(jì)中的一個(gè)塊。設(shè)計(jì)師與文本的關(guān)系與用戶非常不同;設(shè)計(jì)者將文本定位為形狀，用戶逐行讀取。因此，設(shè)計(jì)師往往會(huì)低估文本所需的對(duì)比度。

淺灰色文本在美學(xué)上很漂亮，但在功能上卻毫無(wú)用處。文本是用來(lái)閱讀的，需要在桌面上達(dá)到WCAG AA標(biāo)準(zhǔn)，在移動(dòng)設(shè)備上達(dá)到WCAG AAA標(biāo)準(zhǔn)——或者在任何有許多環(huán)境光源的情況下。文字越大，你的回旋余地就越大。

文本的對(duì)比度需要進(jìn)行徹底的測(cè)試，但是首先，在白色背景下，18px的文本顏色不能比#595959淺。

2. 收緊標(biāo)題間距

絕大多數(shù)的字體被設(shè)計(jì)成作為正文——大塊的、多行長(zhǎng)的運(yùn)行文本。當(dāng)字體被制作出來(lái)的時(shí)候，它的間距就是為了這個(gè)用途。

不像行文，標(biāo)題往往很短，周圍有更多的空白——尤其是上面和下面。額外的空白在視覺(jué)上淹沒(méi)了單詞形狀的負(fù)空間，并迫使字母分開(kāi)。

為了彌補(bǔ)這一缺陷，將標(biāo)題的字母間距和單詞間距縮小1-5%。

3.放寬非單詞間距

當(dāng)我們閱讀時(shí)，我們的大腦并不是一個(gè)字母一個(gè)字母地把單詞拼出來(lái);它可以識(shí)別單詞的形狀，甚至單詞組的形狀。

大多數(shù)微排版都關(guān)心的是不破壞這些字的形狀。然而，有時(shí)您確實(shí)想要阻止單詞的形成，而允許單獨(dú)的字符。

松開(kāi)任何文本的字母間距，擬作為一系列字符讀取，如序列號(hào)、跟蹤代碼和表格數(shù)據(jù)。

4. 輸入時(shí)使用系統(tǒng)字體

隱私對(duì)用戶來(lái)說(shuō)是個(gè)大問(wèn)題。作為一名設(shè)計(jì)師，你所能做的任何保證用戶數(shù)據(jù)安全的事情都會(huì)增加你網(wǎng)站的正面用戶體驗(yàn)。

樣式你的HTML輸入使用系統(tǒng)字體-默認(rèn)字體設(shè)置的操作系統(tǒng)，你的用戶正在訪問(wèn)的網(wǎng)站。這就清晰地劃分了品牌字體中的品牌數(shù)據(jù)和用戶字體中的用戶數(shù)據(jù)。

以這種方式使用系統(tǒng)字體可以鼓勵(lì)用戶感覺(jué)到他們的數(shù)據(jù)的所有權(quán)，建立信任，并增加轉(zhuǎn)換。

5. 馬克段落曾經(jīng)

文本的段落需要有一個(gè)視覺(jué)上的指示，表明它們已經(jīng)開(kāi)始。通常有三種表達(dá)方式:緊跟標(biāo)題，在段落前留出垂直空格，或者第一行縮進(jìn)。

每個(gè)段落應(yīng)該使用其中一個(gè)指標(biāo)，而且只能使用一個(gè)指標(biāo)。由于網(wǎng)頁(yè)內(nèi)容的性質(zhì)和標(biāo)題對(duì)快速瀏覽內(nèi)容的好處，對(duì)于大多數(shù)網(wǎng)站來(lái)說(shuō)，最好的選擇是遵循標(biāo)題和垂直間距的組合。

6. 使用真正的風(fēng)格

由于各種各樣的原因，從可用字體到積極的優(yōu)化，站點(diǎn)使用CSS偽造替代樣式是很常見(jiàn)的。斜體可以通過(guò)傾斜來(lái)偽裝成斜體，粗體可以通過(guò)使用瀏覽器的默認(rèn)設(shè)置來(lái)偽裝，小大寫可以通過(guò)將文本設(shè)置為大寫并減少字體大小來(lái)偽裝。

這些技巧弊大于利，創(chuàng)造出扭曲的文字形狀，打斷了文本的自然流動(dòng)。

如果你不能使用真正的斜體、粗體和小大寫，那么不要偽造它們。尋找其他方法來(lái)突出重點(diǎn)，比如改變顏色。

7. 使用正確的引號(hào)

撇號(hào)、單引號(hào)和雙引號(hào)都是特定的字符。大多數(shù)字體都為它們提供了不同于鍵盤上快速單引號(hào)或雙引號(hào)鍵的符號(hào)。

這些引號(hào)通常被稱為“智能”引號(hào)，因?yàn)槲淖痔幚響?yīng)用程序通?？梢赃x擇它們使用的符號(hào)是否“智能”。

使用正確的引用是傳達(dá)一段精煉文本的最簡(jiǎn)單方法之一。

8. 歸化的文本正確

連字符是將一個(gè)單詞在兩行上斷掉。它允許不那么極端的右對(duì)齊文本，這在移動(dòng)設(shè)備上非常重要，因?yàn)橐苿?dòng)設(shè)備上可用的頁(yè)面寬度比桌面設(shè)備小。

令人驚訝的是，web對(duì)正確的連字符的支持很差，但它正在逐步改進(jìn)，可以作為一個(gè)漸進(jìn)的增強(qiáng)應(yīng)用。

CSS允許你將連字符設(shè)置為none(沒(méi)有連字符)，auto(瀏覽器自動(dòng)插入)，和manual(使用軟連字符指定連字符出現(xiàn)的位置)。

從印刷上看，任何五個(gè)字符或更長(zhǎng)字符的字內(nèi)均可插入連字符;在連字符之前至少有兩個(gè)字符，在連字符之后至少有三個(gè)字符。

永遠(yuǎn)不要在連續(xù)的三行文本中使用連字符，但解決這個(gè)問(wèn)題需要JavaScript。您可以通過(guò)增加度量值來(lái)最小化這個(gè)問(wèn)題。