排版模板或良好做法答案

【问题标题】：typography templates or good practice排版模板或良好做法
【发布时间】：2011-03-06 05:47:32
【问题描述】：

当我用 CSS 设计网页时，排版是我永远无法做到的事情之一，标题和正文文本的外观和感觉都不像我在网上看到的大多数其他网站那样好。通过这一点，我主要是我的排版感觉不像这些网站那样可读和宽敞

我确实尝试复制这些漂亮网站的 css，但我似乎从未得到相同的结果（或者至少我似乎从未将这些技术变成我自己的，以便我将来可以使用它们）。另外，在排版方面，我的 css 无处不在。如果以后需要改变样式，我会花很长时间寻找相关的值

当我第一次开始学习 css 时，我发现了很多关于如何正确设置页面布局（静态、流畅、左/右导航）的教程，但我从未发现任何关于如何获得正确外观和感觉的有用信息当涉及到排版时。另一方面，有很多关于排版的书，但似乎对如何让排版在网络上看起来很好。

我希望您能推荐一些资源，或任何固定的方法，以确保该类型在网络上看起来不错

谢谢

【问题讨论】：

【解决方案1】：

通过浏览您欣赏的网站并尝试他们的 css，您已经在做正确的事了；这是最好的学习方式之一。

一般来说，当我使用排版时，最好的办法是考虑三件事：对比度、颜色和视觉层次。

对比度：如果您的文字在背景上呈现的颜色对比度不佳，则会看起来很糟糕。事实上，它是如此糟糕，以至于它可能被视为“无法访问”。您可以使用Colour Contrast Check 等工具来确保您的文字符合Web Content Accessibility Guidelines。
颜色：您可能会发现您喜欢的大多数网站都没有真正的黑色文本。纯黑色在自然界中并不常见，而白色背景上的黑色文本是您可以获得的最高对比度，看起来有点刺眼。大多数网站通过将黑色文本稍微变灰来淡化它，使用 css 如color: rgb(30,30,30);
如果您想使用颜色，请尝试使用basic color theory 选择可以很好地协同工作的颜色。要么，要么选择一个漂亮的深色并坚持黑色。
Visual Hierarchy：基本上，为更重要的标题使用更大的字体。所以h1 很可能是你最大的一段文本，每个大小一直下降到h6，p 标记中的其他任何内容都应该与您在此处看到的文本大小大致相同。 Webdesign Tuts 最近刚刚发布了an article on visual hierarchy，这非常好。

希望有帮助！

【讨论】：