在之前的文章中我谈到为什么要启动视觉设计过程首先定义字型。这些都是很简单的三个不同的排版风格的例子。我也不想去深入设计所有内容元素 (如列表、报价、小标题）等等。相反, 我仅仅给您一些想法和方向来帮助您开始设计一个真正漂亮的网站。
注意这些排版风格的几个特点: 大标题内容很多, 如果您设计一个网站就像一个部落格, 确保您的标题是突出和毫无疑问的；对比——这是真的浅灰色正文可以看起来很酷, 但我总是试图避免它, 而是确保我的文字与背景有很好的对比使文章简单易读；基于基线网格——通常 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 外贸独立站网站建设中一定要时刻保持把控排版的整体风格。