网站中文字的视觉设计
作者：tony 来源：懒得设计 发布时间：2008-04-16 13:35:00
可能很多人都要问，网站的文字还需要设计吗？
对于很多的网站来说，字在整个网站的内容中占了80％以上甚至更多，或者换个角度上说，网站可以没有颜色，没有图片，但唯独不能没有文字。
一个产品团队，有一个角色叫做Content Design，ucdchina有过一期话题叫做 注意界面上的文字 ，非常精彩，我在写本文之前，再次通读一遍，一方面是学习，另一方面，是避免写重复的内容。如果你按照里面的观点对照你的网站，相信一定会有所帮助的。
那期话题只有 潇潇重点说的是文字的视觉方面 ，那篇文章非常精彩，也是该期话题的“浏览冠军”，本文是延续性的一些想法。
先看看网站以外的中文字体设计，英文的正文字体有很多可以选择，但中文的正文字，总的来说就两种：宋体和黑体。在传统的版式设计中，设计师们都喜欢做英文的排版，为什么？从视觉上来看，英文的组合很容易形成线和面的关系，而且字母有节奏感，比如aby这三个字母放一起有高矮区别。中文字相对来说，单调、孤立、不流畅。
回到网站中文字的设计，设计师基本上不用考虑在字体上做选择，只有宋体。前文说：单个字成点，一行字成线，一段字成面。这是版式设计最基本的原理，我们需要做的就是强化这样的感觉。拿微软雅黑和宋体来举例子，本人非常喜欢微软雅黑的设计。
将12号的宋体和雅黑放大，注意以下细节：
雅黑要比宋体宽一像素
雅黑让每个笔画往四周撑，比如“是”上面的“日”，雅黑显得就要饱满
这么做的目的只有一个，让中文字体更容易形成线，从而读起来更流畅。我们可以看到，尽管雅黑不是真正的正方形，但它看起来要比宋体方一些。
看完上面这个例子，我的观点也就出来了：别把你的文字看成字，而是看成点，文字的视觉设计其实就是处理点线面的关系。
下面是具体设计方面的点：
字体的单位用em而不用px，尽管12px和0.8em大小差不多。
updete:感谢网友 Dreamcolor 推荐文章 95％的中国网站需要重写CSS ，该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了，没有深入理解em单位。只看到很多用em的视觉效果不好看，现在明白了，是因为没有把em单位和px对上号。结论是应该用em而不是px，但需要把em的值设置好。在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana，个人推荐这么写：font-family:Helvetica,Georgia,Arial,sans-serif，宋体。这样能保证你界面中的字母、数字、符号看上去美观一些，更重要的是更加易读。
子条 说：12号宋体时，我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。
很赞同，这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话，17也是可以接受的。正文一行字数最好不超过50，首页的标题文字以8-20字为佳。
12和14px字相对来说最精致，13px在需要的时候可以做正文字，word里面默认的字的大小相当于网页的13px字。
对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。
文字和背景对比要足够明显，保证最弱文字的可读性。
PS1：给 Denis 的 可爱的女儿晨晨设计的wordpress主题 今天出炉了，细节方面还需要再调。那丫头着实地可爱！
PS2：有一些朋友给我来邮件让我给贵站提建议，我在写完这系列视觉设计的文章之后，统一给予回复。我觉得可以从文章观点中，是否能得到一些帮助呢？尤其是可以看看ucdchina的话题。
0
投稿猜你喜欢
目录什么是websocket?第一步 准备工作第二步 编写聊天室页面第三步 编写后台websocket路由及处理方法第四步 运行看效果小结C- 那么Python如何快速上手？找来了一篇广受好评的新语言学习方法介绍，供大家参考。听说，你决定要为你的 “技能树” 再添加一门特定的编程语言
- 原文：http://www.htmldog.com/guides/htmlintermediate/badtags/十六 有害的标签 Bad
- Django测试框架非常简单,首选方法是使用python标准库中的unittest模块。Writing testsDjango的单元测试使用
- 按数量级递增排列，常见的时间复杂度有：常数阶O(1),对数阶O(log2n),线性阶O(n),线性对数阶O(nlog2n),平方阶O(n2)
- 本文实例讲述了Python实现针对json中某个关键字段进行排序操作。分享给大家供大家参考，具体如下：示例：json_array = [{&
- 在工作中有时候会给图上添加文字，常用的是PS工具，不过我想通过代码的方式来给图片添加文字。需要使用的Python的图像库：PIL.更加详细的
- 在网站开发的时候经常要用chr(),但本人比较懒没时间记那么多。于是到用到的时候就查，这样麻烦。现在将它写出来方便以后用到查，也方便大家!c
- Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时
- 一：什么是exe？exe是Windows环境中的文件扩展名之一，它是一个可执行文件，虽然扩展程序在一般情况下是隐藏的，但是我们可以通过取消选
- 在windows 2003下,在运行web应用程序的时候出现一下错误: 服务器无法处理请求，－－＞对路径“C:/temp/mytest.tx
- Python 基础教程之包和类的用法建立一个文件夹filePackage 在filePackage 文件夹内创建 __init__.py 有
- 本文实例为大家分享了python名片管理系统的具体代码，供大家参考，具体内容如下import oslist_all = []def page
- 1.锦短情长为什么选择这个标题，借鉴了一封情书里面的情长纸短，还吻你万千。锦短情长都只谓人走茶凉，怎感觉锦短情长？一提起眼泪汪汪，是明月人心
- 本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法。分享给大家供大家参考，具体如下：Bootst
- 要实现这个功能，可能有多种方法，我在这里记录下一个比较方便的方法：import pandas as pdwriter = pd.ExcelW
- 1.lambda表达式一般用法语法:lamda argument:expressionexample:add = lambda x, y:
- 插件是干什么用的详细地址1.下载rainbow-fart目前在vscode中还不能搜索到此插件，只能从官网中下载，官方地址：地址2.安装ra
- 前言对于刚刚下载好的pycharm，初学者使用会有一些问题，这里将介绍关于字体，背景，这些简单的设置将会提升编程的舒适度（下面以PyChar
- 来自Six Revisions的一篇文章，作者对一些主流的浏览器进行了测试比较，测试主要针对以下几个方面进行：1.JavaScript执行速
