在之前的文章中我談到為什麼要啓動視覺設計過程首先定義字型。這些都是很簡單的三個不同的排版風格的例子。我也不想去深入設計所有內容元素 (如列表、報價、小標題）等等。相反, 我僅僅給您一些想法和方向來幫助您開始設計一個真正漂亮的網站。
注意這些排版風格的幾個特點: 大標題內容很多, 如果您設計一個網站就像一個部落格, 確保您的標題是突出和毫無疑問的；對比——這是真的淺灰色正文可以看起來很酷, 但我總是試圖避免它, 而是確保我的文字與背景有很好的對比使文章簡單易讀；基於基線網格——通常 6px 基線網格上的文字。在整個網站可能很難保持一個完美的基線網格，但它應該幫助您保持這種風格, 很容易把它應用在任何專案。
合法的字型, 最後我們有技術 (瀏覽器支持), 優化 web 字型。我使用的一些最受歡迎的 Google web 的字型。
“Enriqueta” + “Georgia”
這是一個大膽和高對比度的風格。注意到紅色突出顯示顏色可用於鏈接、子彈、按鈕等。
鏈接谷歌字型:
這種風格的 CSS 代碼:
h1 {
color: #262626;
font-family: “Enriqueta”, serif;
font-size: 44px;
line-height: 48px;
margin: 0 0 30px;
}
h2 {
color: #262626;
font-family: “Enriqueta”, serif;
font-size: 32px;
font-weight: normal;
line-height: 42px;
margin: 0 0 24px;
padding: 12px 0 0;
}
h3 {
color: #c73036;
font-family: “Enriqueta”, serif;
font-size: 18px;
font-weight: bold;
line-height: 24px;
margin: 0 0 24px;
padding: 12px 0 0;
text-transform: uppercase;
}
p {
color: #2f2f2f;
font-family: Georgia, serif;
font-size: 17px;
line-height: 24px;
margin: 0 0 24px;
}
.post-info {
color: #aaaaaa;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
line-height: 12px;
padding: 24px 0;
}
.post-info a {
color: #c73036;
font-family: “Enriqueta”, serif;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
“Playfair Display” + “Open Sans”
這是一個優雅的風格與無襯線和無襯線字型的組合。因為標題字型不是如此強大, 我用顏色突出了它。如果您想提高您的網站的效能，您可以很容易地替換 “Open Sans” 與另一個無襯線字型。記住, 每一個外部字型, 都會增加您網站的載入時間。
鏈接谷歌字型：
這種風格的 CSS 代碼:
h1 {
color: #c65c3f;
font-family: “Playfair Display”, serif;
font-size: 40px;
font-weight: normal;
line-height: 48px;
margin: 0 0 26px;
}
h2 {
color: #363636;
font-family: “Playfair Display”, serif;
font-size: 26px;
font-weight: normal;
line-height: 36px;
margin: 0 0 18px;
padding: 12px 0 0;
}
h3 {
color: #c65c3f;
font-family: “Open Sans”, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 18px;
margin: 0 0 18px;
padding: 12px 0 0;
text-transform: uppercase;
}
p {
color: #363636;
font-family: “Open Sans”, sans-serif;
font-size: 14px;
line-height: 18px;
margin: 0 0 18px;
}
.post-info {
color: #b8b8b8;
font-family: “Open Sans”, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 12px;
margin: 0 0 18px;
text-transform: uppercase;
}
“Marvel” + “Lucida Sans”
這是一個現代和輕型排版風格。保持完美的基線網格可能是困難的, 因為不同的瀏覽器渲染引擎, 但您可以注意文字的示例引用與段落的行。
鏈接谷歌字型：
這種風格的 CSS 代碼:
h1 {
border-bottom: 5px solid #f0f1e7;
color: #b2b888;
font-family: “Marvel”, sans-serif;
font-size: 54px;
font-weight: normal;
line-height: 48px;
margin: 0 0 26px;
padding: 0 0 24px;
text-transform: uppercase;
}
h2 {
color: #b2b888;
font-family: “Marvel”, sans-serif;
font-size: 28px;
font-weight: normal;
line-height: 30px;
margin: 0 0 18px;
padding: 12px 0 0;
text-transform: uppercase;
}
p {
color: #363636;
font-family: “Lucida Sans”, sans-serif;
font-size: 16px;
line-height: 24px;
margin: 0 0 24px;
}
blockquote {
border-left: 5px solid #f0f1e7;
color: #b2b888;
float: right;
font-family: “Marvel”, sans-serif;
font-size: 20px;
font-style: italic;
line-height: 24px;
margin: 0 0 24px 30px;
padding-left: 30px;
width: 150px;
}
結論
我希望這些字型風格的例子對您有用。您也可以在未來專案中使用它們作為指導原則來建立自己的風格。記住, 避免用太多的字型和顏色，儘量保持簡潔。在 WordPress 外貿獨立站網站建設中一定要時刻保持把控排版的整體風格。