排版是任何網站最重要的元素之一,對品牌和體驗有很大的影響。
它是如此的重要,以至于對你的版式進行大規模的改變——選擇一種新的字體,改變衡量標準,增加領先優勢——是復雜的,并且充滿了潛在的時間消耗。
但是,你可以對你的排版做一些簡單的改變,這些改變不會破壞你的網格,而且可以在30分鐘或更少的時間內完成。這里有8個最簡單的方法。
1. 增加顏色對比
在布局文本時,設計師通常會將文本視為視覺設計中的一個塊。設計師與文本的關系與用戶非常不同;設計者將文本定位為形狀,用戶逐行讀取。因此,設計師往往會低估文本所需的對比度。
淺灰色文本在美學上很漂亮,但在功能上卻毫無用處。文本是用來閱讀的,需要在桌面上達到WCAG AA標準,在移動設備上達到WCAG AAA標準——或者在任何有許多環境光源的情況下。文字越大,你的回旋余地就越大。
文本的對比度需要進行徹底的測試,但是首先,在白色背景下,18px的文本顏色不能比#595959淺。
2. 收緊標題間距
絕大多數的字體被設計成作為正文——大塊的、多行長的運行文本。當字體被制作出來的時候,它的間距就是為了這個用途。
不像行文,標題往往很短,周圍有更多的空白——尤其是上面和下面。額外的空白在視覺上淹沒了單詞形狀的負空間,并迫使字母分開。
為了彌補這一缺陷,將標題的字母間距和單詞間距縮小1-5%。
3.放寬非單詞間距
當我們閱讀時,我們的大腦并不是一個字母一個字母地把單詞拼出來;它可以識別單詞的形狀,甚至單詞組的形狀。
大多數微排版都關心的是不破壞這些字的形狀。然而,有時您確實想要阻止單詞的形成,而允許單獨的字符。
松開任何文本的字母間距,擬作為一系列字符讀取,如序列號、跟蹤代碼和表格數據。
4. 輸入時使用系統字體
隱私對用戶來說是個大問題。作為一名設計師,你所能做的任何保證用戶數據安全的事情都會增加你網站的正面用戶體驗。
樣式你的HTML輸入使用系統字體-默認字體設置的操作系統,你的用戶正在訪問的網站。這就清晰地劃分了品牌字體中的品牌數據和用戶字體中的用戶數據。
以這種方式使用系統字體可以鼓勵用戶感覺到他們的數據的所有權,建立信任,并增加轉換。
5. 馬克段落曾經
文本的段落需要有一個視覺上的指示,表明它們已經開始。通常有三種表達方式:緊跟標題,在段落前留出垂直空格,或者第一行縮進。
每個段落應該使用其中一個指標,而且只能使用一個指標。由于網頁內容的性質和標題對快速瀏覽內容的好處,對于大多數網站來說,最好的選擇是遵循標題和垂直間距的組合。
6. 使用真正的風格
由于各種各樣的原因,從可用字體到積極的優化,站點使用CSS偽造替代樣式是很常見的。斜體可以通過傾斜來偽裝成斜體,粗體可以通過使用瀏覽器的默認設置來偽裝,小大寫可以通過將文本設置為大寫并減少字體大小來偽裝。
這些技巧弊大于利,創造出扭曲的文字形狀,打斷了文本的自然流動。
如果你不能使用真正的斜體、粗體和小大寫,那么不要偽造它們。尋找其他方法來突出重點,比如改變顏色。
7. 使用正確的引號
撇號、單引號和雙引號都是特定的字符。大多數字體都為它們提供了不同于鍵盤上快速單引號或雙引號鍵的符號。
這些引號通常被稱為“智能”引號,因為文字處理應用程序通??梢赃x擇它們使用的符號是否“智能”。
使用正確的引用是傳達一段精煉文本的最簡單方法之一。
8. 歸化的文本正確
連字符是將一個單詞在兩行上斷掉。它允許不那么極端的右對齊文本,這在移動設備上非常重要,因為移動設備上可用的頁面寬度比桌面設備小。
令人驚訝的是,web對正確的連字符的支持很差,但它正在逐步改進,可以作為一個漸進的增強應用。
CSS允許你將連字符設置為none(沒有連字符),auto(瀏覽器自動插入),和manual(使用軟連字符指定連字符出現的位置)。
從印刷上看,任何五個字符或更長字符的字內均可插入連字符;在連字符之前至少有兩個字符,在連字符之后至少有三個字符。
永遠不要在連續的三行文本中使用連字符,但解決這個問題需要JavaScript。您可以通過增加度量值來最小化這個問題。