10個網(wǎng)頁排版規(guī)則，每個設(shè)計師都應(yīng)該知道

當(dāng)有人訪問一個網(wǎng)站，你的設(shè)計，可能是他們不在乎顏色，圖像和聲音，他們馬上看文本。
無論多少花里胡哨的你建立一個網(wǎng)站，每個人都依靠文字來完成他們正在訪問的網(wǎng)站做。
這使的排版，排式的藝術(shù)，任何網(wǎng)頁設(shè)計者優(yōu)先。
在這篇文章中，我們來看看10個簡單的規(guī)則要記住當(dāng)設(shè)計你的下一個Web項目。
 
1。通過閱讀自己的文本
與設(shè)計jonesingfor一個沒有很大的把握文本的設(shè)計師會一直放在一起，讓這個網(wǎng)站真的字體。當(dāng)你處理你自己的字體，你可能不必?fù)?dān)心寫作網(wǎng)站的文本-但你必須讀它！

一些網(wǎng)站設(shè)計師認(rèn)為只是復(fù)制和粘貼的文本文件是文本的職責(zé)總。但通過閱讀文本提供至少一個基本思想文本如何可以集成到一個網(wǎng)站，避免脫節(jié)的寫作和設(shè)計一個網(wǎng)站。
你可以踢你的排版上的另一個缺口，如果你能通過閱讀文本，一旦它發(fā)生在你的設(shè)計。要特別注意周圍空間的信。你有沒有特別大的空間，看起來很奇怪嗎？細(xì)心一點的字體可以消除這些問題。你也可以得到線可能太長，容易閱讀的想法，尷尬的換行和類似的問題。

2。轉(zhuǎn)儲Lorem存有盡快
你認(rèn)為你能設(shè)計耶穌羅德里格茲貝拉斯科的網(wǎng)站沒有實際的文字？該網(wǎng)站是依賴文字和非常具體的話。即使正文有特別關(guān)注一滴帽和一些其他的調(diào)整，就不可能有與Lorem存有。

除非文本網(wǎng)站實際上是Lorem存有，虛擬文本沒有相似的真實的東西。這意味著，任何調(diào)整你可能使文本或周圍的設(shè)計將不得不等待直到你得到真實的東西。要求（得到）從你的客戶的文本盡可能早的過程中會給你匹配你的整體設(shè)計和排版能力。
 
3。顯示一個明確的等級

當(dāng)你到達(dá)里克貓行業(yè)，你知道，你應(yīng)該立即開始閱讀。即使有頁面頂部的幾個環(huán)節(jié)，里克的歡迎吸引你的第一眼。這是非常大的，使用的字體建立一個層次清晰。
每一個網(wǎng)站都需要一個良好的層次：指標(biāo)從哪里開始開始閱讀和如何進(jìn)行。你的文字可以提供層次就像里克的一樣，只要你知道你的等級秩序的時間提前。的大小和字體的思考，你可以突出顯示一塊文本的一種方式，在設(shè)計不同的位置不能提供一個標(biāo)題。
你的設(shè)計的層次超越只是排版你雇用的人，當(dāng)然，但因為用戶幾乎總是開始的文本，它為設(shè)計師做同樣的道理。
 
4。注意宏觀和微觀排版

完全依靠他們的前臺頁面的排版，克勞利韋伯和聯(lián)想的網(wǎng)站在設(shè)計時考慮到兩個因素：宏觀和微觀兩個字體。
宏觀排版是整體結(jié)構(gòu)的類型，它是如何出現(xiàn)在上下文你設(shè)計及其美學(xué)當(dāng)你考慮你自己的文本塊。
微機(jī)排版更關(guān)注的是細(xì)節(jié)問題，確定間距，文字容易閱讀。微機(jī)排版是絕對必要的時候把一個文本塊：如果不清晰，沒有一點出發(fā)。克勞利韋伯和同事解決了這個問題，通過仔細(xì)的寫了這些話，距網(wǎng)站將突出。
但宏觀排版提供你機(jī)會讓你的文字超過間隔：它的機(jī)會使它看起來有吸引力，你一部分的整體設(shè)計。本網(wǎng)站的字體和顏色選擇創(chuàng)建一個可行的整體。忽略字體要么面是不利的。
 
5。照顧類型的顏色

很容易就可以在后臺失去文字artofelan，尤其是暗紅色的組合由設(shè)計師用明亮的紅色。當(dāng)一個網(wǎng)頁設(shè)計師的作品與彩色，護(hù)理是絕對必要的，有沒有保證，一個紅色的紅色組合，甚至是一個黃色的紅色的結(jié)合將是可見的。畢竟，每個人都有訪問網(wǎng)站的文字，似乎只有一個陰影從背景顏色和得到一例眼疲勞，當(dāng)他們想讀它。
最簡單的解決這個情況是確保顏色你的類型是大大不同于你的背景。黑與白的工作這么好，因為他們是你可以得到的是截然不同的，但也有一些顏色組合工作：在淡粉色的沿著一個深藍(lán)色的東西會把工作做好。反白文本是相當(dāng)棘手的…而你可以用淡粉色的文字在深藍(lán)色的背景，你很可能會得到一個關(guān)于它的投訴。
 
6。獲取有關(guān)你的CSS嚴(yán)重

如果你的CSS是實心的，你可以在你的網(wǎng)站頁面的無縫移動，正如不同的版本hutchouse.com依靠不同的樣式來創(chuàng)造一些令人印象深刻的影響。即使你不把事情做盡hutchhouse，CSS可以幫助消除業(yè)余排版問題如改變字體和大小的頁面之間。
CSS可以提供方便你的字體之間的一致性，在整個網(wǎng)站。如果你是一致的在你如何使用類型，然而，打破一致性，即使少量可以使任何你想強(qiáng)調(diào)真正站出來，就像建立并打破了網(wǎng)格可以形成一種有效的設(shè)計。在Web版式，保持你的字體一致，可以是一個簡單的CSS。
 
7。溝為中心的文本

選擇中心的文本可以使網(wǎng)站的設(shè)計易于閱讀，就像designcanchange.org。選擇中心的文本，特別是在一個這樣的頁面，會使一個有問題的頁面：鋸齒狀邊緣圍繞創(chuàng)建每邊使它更難讀，有很多機(jī)會完全居中文本結(jié)束扭曲你的設(shè)計停留在不同的顯示器。
在某些圈子里，中心型只有一步步從網(wǎng)站設(shè)計中使用Comic Sans。你可能會認(rèn)為這是一個標(biāo)題，但總的來說，對準(zhǔn)你的文本左邊會讓讀者感覺舒服多了，除非他們從右向左讀。
 
8。智能報價和其他符號處理

路易吉ottani的現(xiàn)場展示了什么注意引號和其他符號將讓你：當(dāng)網(wǎng)站顯示的那些符號完成不足的問題。許多網(wǎng)站都點綴著符號瀏覽器無法顯示。這是一個事實，大多數(shù)網(wǎng)頁設(shè)計師的作品與文字寫的可能是微軟Word或另一個字處理軟件，使各種文字變化不大，沒有作家關(guān)注的遺產(chǎn)。
最糟糕的一個變化是智能引號：卷曲的引號字自動替代直引號。另一個問題是當(dāng)你的工作與文字寫在另一種語言：口音和umlats可引起同樣多的麻煩的話的人。如果你只是復(fù)制和粘貼到您的設(shè)計更改的文本，你可能不得不回去后修復(fù)它們，至少對某些Web瀏覽器。
相反，讓他們在設(shè)計過程的早期，你可以把重點放在你的文字更適合你的設(shè)計。如果你想要那些奇特的符號和智能引號出現(xiàn)在最終的設(shè)計，打破了你的HTML實體。
 
9。你的文字得到了更大的計劃
當(dāng)你增加文本的大小Veerle Pieters”網(wǎng)站，這是不是很漂亮，比你使用的字體大小，她挑了。然而，你仍然可以閱讀一切，定位鏈接等等，這是極少數(shù)的網(wǎng)站真的。

這是因為，部分，許多設(shè)計師將在10號字體甚至更小的布局文本確定。大多數(shù)人都是舒適的閱讀這樣的字體，但是嬰兒潮一代構(gòu)成了一個龐大的部分的網(wǎng)頁瀏覽的人口和很多老舊的網(wǎng)民都會有他們的瀏覽器設(shè)置為顯示類型一樣大，他們可以。你的文字，以及你的設(shè)計，需要能夠適應(yīng)這個事實。
這也是值得考慮到瀏覽器的大小差別巨大，移動文本周圍意想不到的位置如果你不小心。如果碰上一個點的大小會造成問題，老年人口將繼續(xù)匆忙下網(wǎng)站。有滾動，永遠(yuǎn)在身邊會有一個類似的結(jié)果。
 
10。顯示為無襯線的偏好
如果你看看A List Apart的網(wǎng)站，幾乎每一個大的文本塊設(shè)置在無襯線字體，使它更易于閱讀。標(biāo)題和其他較小的文本塊是放在serifed字體，兩者之間的平衡。

當(dāng)談到鋪設(shè)在屏幕上的文字，無襯線字體幾乎都是最佳的選擇，尤其是如果你選擇了一個字體Verdana，被設(shè)計用于在計算機(jī)屏幕上顯示。serifed字體有較高的機(jī)會顯示不佳，變得模糊甚至失真。
完全避免了襯線是不可能的，當(dāng)然。但對于大塊的文本，特別是無襯線字體，使用可以提供額外的保證，游客將能夠輕松地閱讀一個網(wǎng)站的文本。當(dāng)你選擇字體的一個項目，看看你的無襯線字體選擇第一。
 
最后的評論
字體很容易被忽視，甚至當(dāng)一個設(shè)計師不考慮，寫了沒有返回一個時間密集的活動很容易。但即使幾分鐘的文字將你設(shè)計的核心可以改變從什么網(wǎng)頁設(shè)計師可以打一個頁面元素支持設(shè)計的休息。

牧羊人設(shè)計文章推薦：

響應(yīng)式網(wǎng)頁設(shè)計和自適應(yīng)網(wǎng)頁設(shè)計之間的差異
一個新的購物網(wǎng)站的問題

網(wǎng)頁設(shè)計排版問題