当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 文字 - Oceans Apart(三)

点击数:22922012-11-10 11:34:31 来源: 海盈网络

      1.色相和对比度的选择

      对色相与对比度的选择至关重要,因为它不仅仅关系到设计的一致性,还直接影响到作品的可读性。

      传统的文字设计理论认为提高前景和背景的色相对比——例如使用白底黑字的设计——会大大提高文本的可读性。

      但在Oceans Apart中,Sims却抛弃了传统规则的束缚,使用了相对并不显眼的浅褐色作为正文字体:

      可以看到,这样的文字和白色的背景的对比度很低。而作品中无论正文部分还是侧栏中的链接都使用了深蓝色,这一点很值得玩味,因为多数设计师都下意识地选择纯蓝以提高对比度。

      不可否认,使用纯蓝色能提高对比,但事实证明使用不显眼的褐色反而带来了更吸引人的效果——正是使用了褐色的正文字体,才使得页面显得更加柔和清晰,进而让读者能更好地阅读其中的内容。而将蓝色用于链接则提高了作品整体的对比,增加了作品的视觉冲击力。

      对比效果在作品头部的应用也十分突出:顶部图片上的文字使用了反差强烈的白色调,而图片下的描述性文字则置成了和褐色背景相异的白色,这大大增强了作品的整体视觉效果。

      2.字号对比和字体颜色

      使用不同大小的字体可以增加文字区块间的对比。在Oceans Apart中,这种使用简单的效果却非常有效。

      可以看到,作品中正文和链接列表的一部分使用了11像素字体,链接列表中另一部分链接则使用了9像素字体作为辅助。图5-1-7中我们可以看到,这区区两个像素的差异却造成了相当强烈的视觉对比。

      另外,Sims还在#lin:List2中使用了橄榄绿色,这种色彩不但被链接列表的背景清晰地反衬出来,也同时和页面其他部分的蓝色、褐色形成了鲜明对比。

      3.字号对比和粗细

      再回到图5-1-5中的头部图像,就会发现图像中同时使用了字号和粗细变化来增加对比度:"css"使用了小写,从而和首字母大写的“Zen Garclen"形成了对比,而在其下的“the beauty of css design"则特意将“beauty"加深为粗体,这又和周围的常规文字形成反差。


      再看头部图片下方的文字,它们也使用了相同的技巧——前7个单词置为粗体,而后续单词都为常规粗细。

      标题和正文的关系

      作品中最后一个亮点是正文和标题的关系。仔细观察可以发现,正文部分标题使用了图片,而不是简单的HTML文本,这为加入细微的文字阴影提供了坚实的基础,而经过阴影润色的文字毫无疑问将更加吸引眼球。

      谈及吸引眼球之处,设计中还另有一处与众不同的地方——链接部分的标题。这些标题的文字全部使用了大写、深蓝的字体,它们和浅蓝底色与褐色整体背景形成鲜明的对比,很好地凸现了链接区域的导航作用。

      5.1.3 从简洁设计中学习

      初见Oceans Apart,人们都会陶醉于其自然、平和却略带变化的简洁风格中。而作品字体运用中所触及的细微变化手段或许是我们更应该仔细学习的地方。


本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
      海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作网站维护等全方位专业服务,欢迎咨询。

【责任编辑:(Top) 返回页面顶端