排版模板或良好实践

Question

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

我确实试图复制这些漂亮网站的css，但我似乎从来没有得到相同的结果(或者至少我似乎从来没有把这些技术变成我自己的，这样我以后就可以使用它们了)。此外，当涉及到排版时，我的css无处不在；如果我以后需要更改样式，我会花费很长时间来搜索相关的值

当我第一次开始学习css时，我发现了很多关于如何让页面布局正确(静态、流畅、向左/向右导航)的教程，但我从来没有找到任何关于如何在排版方面获得正确外观和感觉的有用的东西。另一方面，有很多关于排版的书，但似乎对如何让排版在网络上看起来更好没有帮助。

我希望你能推荐一些资源，或者任何固定的方法，以保证这种类型在web上看起来很好。

谢谢

Answer 1

这篇文章可能会有用：http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

你已经在做正确的事情了，浏览你喜欢的网站并尝试他们的css；这是最好的学习方法之一。

一般来说，当我使用排版时，你可以做的最好的事情是让它看起来更好:考虑三件事:对比度，颜色和视觉层次。

• Contrast：如果您的文本显示在背景中的颜色对比度不好，它看起来会很糟糕。如此糟糕，事实上，它可能被认为是“无法访问的”。您可以使用诸如Colour Contrast Check之类的工具来确保您的文本符合Web Content Accessibility Guidelines.
• Color：。您可能会发现，您喜欢的大多数站点都没有真正的黑色文本。纯黑色在自然界中并不常见，白色背景上的黑色文本是你能获得的最高对比度，这看起来有点刺眼。大多数网站会将黑色文本设置为略微灰色，并使用诸如color: rgb(30,30,30);之类的css

如果您想使用颜色，请尝试使用basic color theory挑选能够很好地配合使用的颜色。或者选择一种漂亮的深色，并坚持使用黑色。

• Visual Hierarchy：基本上，对更重要的标题使用更大的字体。因此，h1很可能是您最大的一段文本，每个大小一直减小到h6，而p标记中的其他任何内容都应该与您在这里看到的文本的大小大致相同。Webdesign Tuts最近刚刚发布了相当不错的an article on visual hierarchy。

希望这能有所帮助！