排版模板或良好实践

时间:2011-03-06 05:47:33

标签: css templates typography

当我用CSS设计网页时,排版是我永远无法做到的事情之一,标题和正文不会像我在网上看到的其他大多数网站一样好看。据我所知,我的排版感觉不像这些网站那样可读和宽敞

我确实试图复制这些漂亮的网站的CSS,但我似乎从来没有得到相同的结果(或者至少我似乎永远不会使这些技术成为我自己的,所以我将来可以使用它们)。另外,在排版方面,我的css到处都是;如果我稍后需要更改样式,我会花很长时间搜索相关值

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

我希望你能提出一些资源,或任何能够保证该类型在网络上看起来不错的固定方法

由于

1 个答案:

答案 0 :(得分:2)

本文可能有用:http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

你已经做了正确的事情,在你崇拜的网站周围探索并尝试他们的CSS;这是最好的学习方式之一。

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

  • 对比度:如果您的文字在背景上呈现的颜色与之形成鲜明对比,那么它看起来会很糟糕。事实上,这很糟糕,可能会被视为“无法访问”。您可以使用Colour Contrast Check之类的工具来确保您的文字符合Web Content Accessibility Guidelines
  • 颜色:您可能会发现您喜欢的大部分网站都没有真正的黑色文字。纯黑色在自然界中并不常见,白色背景上的黑色文字是你可以获得的最高对比度,它看起来有点刺耳。大多数网站都将它们的黑色文字略微变成灰色,并使用color: rgb(30,30,30);之类的CSS 如果您想使用颜色,请尝试使用basic color theory选择一起使用的颜色。无论是那种,还是选择一种漂亮的深色并坚持使用黑色。
  • 可视层次结构:基本上,使用较大的字体作为更重要的标题。因此,h1很可能是您最大的文本,每个文字都会一直缩小到h6p标记中的任何其他内容都应该大致与文本大小相同你在这看到网页设计刚刚发布的an article on visual hierarchy最近很好。

希望有所帮助!