相信每一家網站設計公司都知道，在給英文網頁設計英文字母排版的時候都遇到很多問題，不管你怎么排版視乎都不怎么完美。

       你可能曾經聽到的**個視覺設計課程之一是使所有的事情完美一致。非常完美等。

       這聽起來很合理。一個良好的對齊和平衡的設計應該看起來是對我們自己的眼睛考驗。但它會被認為您公司網頁設計水平更有組織性和專業性。

       任何網站設計軟件和CSS代碼甚至可以在這里派上用場，并為您調整一切。

       然而，人的肉眼看待和處理圖像的方式并不總是與數字所說的一致。對于電腦而言，看起來完全一致和平衡的東西看起來可能與您的眼睛看起來不一樣。

       作為網站設計師，我們在設計用戶界面時應該考慮到這一點。我們不能完全相信電腦為我們照顧它。

       這可能是人工智能在設計工作中無法取代人的原因之一。雖然，這可能只是時間問題......

       所以，盡管我們必須遵循所有的設計規則，但在做出*終的視覺設計決策時，我們也必須相信我們的眼睛和我們自己的直覺。

       今天在這里讓我向您展示一些如何通過視覺糾正設計使您的設計更好的例子：

       網頁設計視覺對齊排版：

       說實話，在網絡上使網頁視覺完美是有點困難的。

       不幸的是，字距調整和文本對齊基于度量標準，并且使用CSS修復需要很多努力或外部JS插件。

       整個垂直布局非常動態，元素間距不一致，因此保持完美的基線幾乎是不可能的。

       我無法告訴你一個簡單的魔術CSS技巧，可以解決所有問題。所以，我不會給你任何代碼解決方案，但是我想把重點放在使設計光學完美的概念上。我相信你會找到一種方法來調整你的CSS在這里和那里，以實現這一目標。

       我在網站設計用戶體驗中發現的*常見問題之一是“ 超調 ”左對齊文本。對于較小的文字來說這不是一個真正的問題，但是用大型的，大膽的標題來說更明顯。

       讓我們來看看這個大標題對齊左邊：

       你可以看到，在默認瀏覽器的顯示中，'T'字母從邊緣移動了幾個像素，以便在視覺上更正它，但是與這個文本塊中的其他字母相比，它并沒有什么意義。

       下面看看我是如何修復它的？

       首先，我將所有字母對齊到左邊緣。然后，注意'G'不與'H'和'T'對齊，但它實際上距邊緣有幾個像素。這都是因為這封信的圓形。我會用C，O，Q和S做同樣的事情。

       在G , T，W，Y等有尖銳邊緣或線條指向左側的字母的情況下，我也可以這樣做。

       如果第二行碰巧以小寫字母開頭，那么將'T'移到邊緣外面會使視覺效果更好，如下所示：

       我們來看另一個例子來證明字母之間的關系。我將'W'從邊緣移開了幾個像素，以便與以下單詞形成更好的平衡。

       然而，這一切都變得更加復雜，因為如果我們切換這兩個單詞并將'W'放在'E'之后的第二行中，它就不一樣了：
 
       你不能假設所有以'W'開頭的行應該離開邊緣。這一切都取決于與其他字母的關系。這就是我們必須相信我們的眼睛和本能的地方。

       這里沒有任何規則可以普遍適用。一切都取決于文本大小，字體樣式，字體重量，字體和使用的字母。

       講到這里相信無論對你來說什么感覺都是對的。

       現在讓我們看看中心對齊：

      這里的第二句話以句點結束。它使這一行更長，并且瀏覽器嚴格根據長度對齊文本。

      但是，重量平衡并不完全在這句話的中間。所以，你必須把上面幾行像素向左移動以滿足你的眼睛。

      例如，當您添加引號和襯線字體時，這一點更為重要。

       如果要將引號對齊到左側，則應將左引號留在邊緣之外以創建更好的視覺外觀和流動：

       總結，根據上面講解的英文網站設計字母排版問題的解答方法，我認為現在是時候讓我們重視網頁設計良好的排版習慣了，良好的排版習慣可以使我們公司設計團隊更有組織性和專業性。