weakow.com

现实生活中，下面的场景总是不难见到：

1. 使用Microsoft Word进行排版的时候，键入大量的空格把文档的落款（作者、日期等）挤到页面的右边；为了让落款与正文保持一些距离，便敲上两个回车空出两行；
2. 书写HTML文档的时候，为了让链接突出显示，便在链接左右各加一个空格。

实际上，这些做法均不可取。在第1个例子中，使用空格让文字向右对齐将使版面的可维护性降低——如果需要增加文字，将不得不删除一部分空格；如果将整篇文档的字号扩大，一部分落款文字将有可能被挤到下一行（你或许还不知道！）。使用空行也很糟糕——对文档正文内容进行增删修改之后，这些空行或许刚好位于某页的开头（这很糟糕）。

在第2个例子中，如果只在页面某几个特定元素中添加空格也无可厚非，但若是进行文档的排版工作，有一天你需要将所有发布过的文章中的链接两边的空格去掉时……你一定会拒绝这样做。

这些空格和空行便是排版中的白色垃圾——我们需要不留情面地清除它们。在Word中，使用右对齐方式、右侧缩进以及段前间距、孤行控制便能解决第1个例子的问题；为文档中的链接加上稍许左右padding便能达到第2个例子需要的效果。当我们有能力编辑样式以实现需要的效果时，便不需要使用文本内容担当这些工作。

参考：

• 段落样式最佳实践

标记em用来表示强调，其默认样式为斜体。由于一些原因，中文斜体显示效果并不理想，因此对中文直接应用em标记存在不妥之处。一些设计师使用加粗表示强调，中英文显示效果都不错。不妨插一句，小字号（如12px）的加粗文本在使用点阵字体的情况下与普通文本差异明显，在使用矢量字体时则可能与普通文本差异不明显。这些设计师甚至使用strong代替em。配合标记默认样式决定标记之选择的做法必不可取。我们有理由为标记定制样式，替换其默认样式。

正式的中文排版中，强调往往是通过在文字下文打上实心圆点实现的，这样的圆点被称作着重号。在中文Web设计中，我推荐对em标记使用着重号的效果，strong标记仍保留对文本加粗的效果。

由于汉字的宽度一定，这种效果不难实现。这里打算为12px大小的文章正文设置em标记样式。首先，制作一张12px宽的图片，下图是放大至16倍的效果。

对12px大小的文字来说，将圆点直径设为3px看起来最为合适，虽然这样圆点的中心不可能处于绝对居中的位置（本图中圆点偏右）。此外，将圆点以外的部分设为透明将更具适应性。原图：dot-accent.gif。

接着制定样式。

.post p em {
  padding-bottom:4px;
  font-style:normal;
  background:url(images/dot-accent.gif) repeat-x left bottom;
}

为了保证效果，段落文本应具有1.5em以上的行距，否则着重号可能距离下面一行文字太近。

下面是一段HTML代码及其对应的样式效果。

<p>事业是<em>干</em>出来的，不是<em>吹</em>出来的。</p>

事业是干出来的，不是吹出来的。

设计中文网页时，如果需要给文字设置固定大小的字号，该选择哪一种呢？

我并没有做太多的调查，然而这样一种做法一定常见：在大片文本使用12px大小的情况下，稍大一些的文本（如小标题）则设为14px。既照顾1024×768屏幕分辨率的用户，又考虑呈现足够多的信息，这样一种字号配置是多数的也是明智的选择。

然而，这里面多少可以来点变化。要知道，在不消除锯齿的情况下（Windows XP及先前版本对小字号汉字并不消除锯齿，即便开启了ClearType），能够给予汉字最佳显示效果的字号是9pt和11pt。在汉字排版中，六号字的大小即为9pt。在Web设计中，9pt与12px大小相等，这种文本大小经过无数中文网站的验证，显示出极强的生存意义。随着用户屏幕分辨率的普遍提升，网页中的字号选择也向着大的方向发展，9pt或12px的小字或许会变得越来越少，但在过去、现在和将来都无可替代。

重要的是，我们可以考虑将一部分14px的文字改为11pt。11pt比14px稍大一些，然而显示效果却好得多。当然，这里的平台仍然是Windows XP及以下版本。这种细微的差别很难用语言描述，而阅读此文的设计师们却不妨试着比较比较。尤其要推荐的加粗的11pt字。在Windows XP下，由于不消除锯齿，加粗的宋体小字号文字显得很不好看，然而相形之下，11pt加粗字要比14px加粗字好看一些。要相信，一些细微的不同可能表现出不可预计的效果之差。

西方流行的段落开头无空格，段落之间有间隔的样式在互联网世界很流行。即便面对中文网页，我也很赞成这种潮流的应用。然而在很多场合下，中文文章每段段首空两格的样式是最为可取的方式。

流传最广的方式是使用真实的空格来完成这一任务。如果使用 字符，由于英文中一个空格的宽度通常小于二分之一个汉字的宽度，因此要想空出两个汉字的宽度，需要插入的 字符数量很难把握。不少网站使用宋体定义普通文本，这样4个 字符刚好是两个汉字的宽度，然而将宋体直接应用于所有文本影响了英文字符的美观，因此也影响了这种方法效果。使用空格产生缩进的思维下，最便捷的方式可能是插入两个中文全角空格。然而这样做依然存在缺点，我们不得不手动为每个段落添加两个空格。问题的关键在于，段首的缩进并非内容，而是样式。

因此，不妨为中文段落添加下面的样式：

p {
  text-indent: 2em;
}

Read more »

很多时候，中文的Web设计仍然扮演着追赶者的角色，主流是以英语为代表的西方语言下的设计。语言是文化的重要方面，其差异——尤其是方块文字与西方字母文字的差异——强烈地影响了Web设计的效果，这其中或又以排版（typography）为甚。我们的Web设计师们醉心于那些优秀的西方设计，惊喜之余照搬或临摹，用作中文网站的设计，效果却可能差之甚远。一些跨国公司设计自己的中文网站时，几乎是将英文网站的样式表原封不动地套用到中文内容，不但整体效果失了原味，细节不当之处更不胜枚举。

微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处，反而增加了麻烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔，但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧？即便使用鼠标滚轮改变字号大小并不费劲，却并没有太多用户意识到这一点。

Read more »