澳门新葡萄京所有网站 1

文章译自:Medium

原文标题:10 Tips On Typography in Web Design

原文作者:Nick Babich

文章翻译:村长道哥

在博客园写博的半年中,我有时会纠结于一些诸如写作格式和显示效果之类的小问题。我想任何一个热衷于在这里写博客的人都可能会遇到类似的问题,所以就把自己遇到的一些状况和解决方法列出来,以便交流。

英文原文:澳门新葡萄京所有网站,Why I vertically align my code (and you should
too!)

澳门新葡萄京所有网站 2

在博客园看到不少很绚的博客页面,我很想知道都是怎么实现的。:-)
希望大家不要客气,在评论区留下诀窍。谢谢!

上周在 HackerNews,关于 Linux Kernel
代码风格展开了有趣的讨论。

沟通在设计中有着举足轻重的地位——沟通对于在网站和用户之间建立清晰的联系并帮助用户完成他们的目标是至关重要的。当我们在网页设计中讨论沟通时,通常指的上面的是文字。字体又是这个过程中至关重要的部分:

 

在讨论中,我就应不应该垂直对齐代码发起了一场小小的圣战。我完全支持!让我细说端详。

超过95%的网络信息都是以书面语言的形式出现的。

编辑器

下面是博客园的编辑器界面:

澳门新葡萄京所有网站 3

博客园编辑器界面

什么是垂直对齐?

优秀的字体设计可以让阅读变得轻松,而糟糕的字体设计则会让用户难以阅读。正如
Oliver Reichenstein 在他的文章《网页中95%的设计都是字体》中所写的那样:

1. 查询HTML

写一篇文章实际上是构建了一个HTML网页,内容和格式都最终保存在这个HTML网页中。如果格式上有什么不确定的地方,都可以查询和修改HTML本身。你可以通过下面的“HTML”按钮来查看:
澳门新葡萄京所有网站 4

 

举个小例子:

优化字体就是优化可读性,可访问性,可用性,以及文字的整体平衡。

2. 插入代码

对于技术博客来说,代码插入是必不可少的一个环节。常规的博客编辑器通常都没有这个功能。博客园的插入代码算是比较齐全。值得注意的是“全部折叠”选项:

澳门新葡萄京所有网站 5

如果代码过长,而文章的重心又不在于分析代码,那么可以勾选这个选项。代码会隐藏成一个”View
Code“的按钮,只有在点击之后才展开。这样,可以让读者专心于文章的脉络。读者快速浏览一遍之后,觉得还有兴趣的话,可以自行展开代码阅读,而不会在一开始的时候就被超长的代码吓走。

 

int robert_age = 32;
int annalouise_age = 25;
int bob_age = 250;
int dorothy_age = 56;

换句话说,优化字体设计也就是优化用户界面。在本文中,我将提供一些帮助提高文本内容可读性和易读性的准则。

3. 格式与字体

澳门新葡萄京所有网站 6

格式

所谓的格式,实际上是html标签(tag)。比如,如果采用段落格式,那么内容就会被镶嵌在<p></p>的标签之间。再比如标题1,实际上是<h1>。你可以通过查询HTML源码来找出每种格式对应的标签。采用格式的好处是可以通过CSS来统一管理每一种标签所标示的内容。

 

澳门新葡萄京所有网站 7

字体

最值得推荐的字体是Courier
New。它是等宽字体,每一个字符的宽度相同,所以上下两行很容易对齐,比如:

TomIDNumber =
10

VivIDNumber =
22

如果是非等宽字体,字符宽度根据字符形状发生变化,比如i会比较窄,而o会比较宽,所以上下两行很难对齐。比如Arial:

TomIDNumber
= 10

VivIDNumber
= 22

等宽字体是程序员的首选字体。

 

 

下面的代码更易于阅读:

1 使用尽量少的字体

使用超过3种不同的字体会使网站看起来结构松散并且不专业。请记住,太多的字体大小和样式同时也会破坏网页的布局。

澳门新葡萄京所有网站 8

为了防止这种情况,我们需要尽量把使用字体的数量限制到最小

一般来说,将字体的数量限制在最小(两个是经常使用的数量,一个有时也足够了),并且整个网站都采用相同的字体。如果你使用了不止一种字体,那么确保这些字体是根据它们的字符宽度而互补的。以下面的字体组合为例。Georgia
和 Verdana(左)的组合因为相似所以营造出了和谐感。相比之下,Baskerville
和 Impact(右),因为 Impact 的字重使得 Baskerville 就不那么明显了。

澳门新葡萄京所有网站 9

确保字体之间要根据字符宽度互补

4. 关于颜色

每一个人都有自己的颜色喜好,有人会比较偏爱黑白的页面。但从认知心理学的角度来说,人们更容易阅读标出要点的段落和文字。特别是网络和电子阅读时代,彩色相对黑白没有额外的印刷成本,所以利用颜色标记值得一试。下划线、粗体斜体也是相同的道理。
(在黑白印刷时代,人们惯用这三种方式来区分重点。你甚至可以在机械打字机上见到它们)。用这些标记方式的时候,最好可以在每篇博文中保持统一。比如可以用粗体表示命令,用斜体标记引用,用红色表示重点。这样,人们连续阅读同一个博客的时候不会觉得混乱。

 

int robert_age     = 32;
int annalouise_age = 25;
int bob_age        = 250;
int dorothy_age    = 56;

2 使用标准字体

字体嵌入服务(比如Google Web Font 和
Typekit)有很多有趣的字体,这些字体可以给你的设计带来全新的、新鲜的和意想不到的东西。它们也非常容易使用。以谷歌为例:

随便选择一个字体,比如 Open Sans。

生成代码并把代码粘贴到 HTML 文档的 head 中。

完活了!

那么,哪里会出错呢?

实际上,这种方法有一个严重的问题——就是用户更熟悉标准字体,在标准字体下用户可以更快地阅读。

除非你的网站对自定义字体有着特殊的需求,比如为某个品牌设计网页,或者意图创造一种沉浸式的体验,否则最好还是使用系统自带的字体。安全的做法是使用一个系统字体:Arial、Calibri、Trebuchet
等等。记住,好的字体设计会把读者吸引到内容上,而不是字体本身。

CSS定制

管理 -> 设置 ->
“通过CSS定制页面风”中,我们可以定制自己的CSS风格。这是很实用的功能。

 

我扫一眼就能看到”bob_age”有点儿不正常。我不用多费事,就轻松地看出来它们都是整数。

3 限制一行字的长度

一行中字符的数量是文本可读性的关键。不应该光由你的设计决定了文本的宽度,也应该考虑到文本的易读性。Baymard
研究所关于可读性和字行长度的建议是:

“如果想要一个好的阅读体验,应该每一行有60个左右的字符。一行中字符的数量是文本可读性的关键。”

澳门新葡萄京所有网站 10

如果一行文字太长,用户的眼睛将就很难集中在文本上。

对于移动设备,每一行应该使用30到40个字符。下面是两个在移动设备上浏览网站的例子。第一个使用每行50-75个字符(打印和桌面应用的每行最佳字符数),第二个使用了最优的30到40个字符。

澳门新葡萄京所有网站 11

在网页设计中,你可以通过使用 em
或像素来限制文本块的宽度,来找到每行的最佳字符数。

1. 定制标签(tag)

在编辑器部分,我们看到所谓的格式实际上是HTML标签。这些标签可以通过CSS定制来统一管理和控制。比如我们想设置标题2的格式为:

 

澳门新葡萄京所有网站 12

 

可以通过添加如下CSS实现:

澳门新葡萄京所有网站 13

h2 {
  text-align: center;
  box-shadow: 10px 10px 5px #888888;
  background-color: #5FBDCE;
  color: #015666;
}

澳门新葡萄京所有网站 14

 

 

  1. Image溢出和解决

图像溢出是个常见的问题。在一个小的屏幕或者浏览器中,图片的像素可能超出div的区域。比如:

 

澳门新葡萄京所有网站 15

调整前

 

你可能会重新设定图片的大小。但是由于可能的读者所使用设备可能差别很大(比如手机和大屏幕),我们并没法预估所应设定的大小。

我们可以在CSS定制中选择img,然后使用overflow属性:

 

img {
  overflow: scroll;
}

 

这样,溢出的图像会被隐藏在滚动条中。

 

我采用了另一个方法:

img {
 max-width: 80%;
}

这样,img的宽度不会超过div宽度的80%。图片会根据情况调整大小。

 

澳门新葡萄京所有网站 16

调整后

 

这条意见还没被广为分享,因此我打算解释一下,为什么很多人认为这是一种有用的风格指南。

4 选择一个适用于各种大小的字体

用户用来访问你的站点都是不同大小屏幕和分辨率的设备。大多数用户界面都需要不同大小的文本元素(按钮、字段标签、栏目标题等)。这里重要的
是要选择一个在不同的尺寸和字重上都能很好地保持可读性和可用性的字体。

澳门新葡萄京所有网站 17

谷歌的 Roboto 字体

确保你选择的字体在小屏幕上也是清晰可见的!尽量避免使用草书的字体,比如
Vivaldi,尽管这些字体很漂亮,但是很难阅读。

澳门新葡萄京所有网站 18

Vivaldi的字体在小屏幕上很难阅读

定制公告、页首、页脚HTML

在管理 -> 设置中,这三者可以添加自己想要显示的HTML元素。比如在公告栏中我添加了微博的图片和豆瓣的Javascript(如上图)。你也可以增加其他更加个性化的东西。

微博:我的工具 -> 签名档 ->
获得代码,然后将代码复制到博客园的公告栏。

豆瓣:到下面网址,生成代码,然后将代码复制到博客园的公告栏。

 

原地址:
博客园小技巧

理解

5 使用字母区分明显的字体

许多字体都把一些字母设计得不容易识别,特别是“i”和“L”(如下图所示),以及字母间距不当的问题,比如“r”和“n”看起来像“m”。所以在选择字体时,一定要在不同的环境中试验字体,确保不会给你的用户带来问题。

澳门新葡萄京所有网站 19

90% 的编程工作是为了解决问题,剩下的 10% 的工作需要再用 90%
的时间用来理解问题是怎样被解决的。注1

6 不要全部大写的字母

全部大写的文本——意思是所有的字母都是大写字母——在不涉及阅读的情况下还是不错的(例如缩写或
logo),但是当涉及到阅读时,不要强迫你的用户阅读全是大写的文本。正如
Miles Tinker
在他的影响巨大的《印刷的易读性》中提到的,全部大写的文本与小写相比,大大降低了浏览和阅读的速度。

澳门新葡萄京所有网站 20

阅读代码和阅读散文,有着极大的不同。我们期望作者能够清晰地解释他们的语句,而不是用他们选中的语言过于冗长地说些不相干的东东,我们都期待普通的语法风格。

7 不要把行间距最小化

在字体排版中,我们有一个特殊的术语来表示两行文字之间的间距——leading(或行高)。通过增加行高可以增加文本行之间的垂直空白,从而提高可读性。一个比较好的规则是为了打造良好的可读性,行高应该比字符高度多大约30%。

澳门新葡萄京所有网站 21

正如 Dmitry Fadeyev
指出的,合理地使用段落之间的空白,已经被证实可以提升用户20%的理解度。使用空白的技巧在于为用户提供易于消化的内容,然后剥离无关的细节。

澳门新葡萄京所有网站 22

的确,Kernel
代码风格着重强调了这一点。你选择变量命名的方式,和代码的用途一样重要。

8 确保有足够的颜色对比度

不要在文本和背景上使用相同或相似的颜色。文本越清晰,用户就能越快地浏览和阅读。以下是
W3C 推荐的正文文本和图像文本的对比比例:

小字体的文本应该与背景有至少4.5:1的对比度。

大字体的文本(14pt的粗体或18pt的常规以上)应该与背景有至少3:1的对比度。

澳门新葡萄京所有网站 23

这两行文字不符合颜色对比度的建议,很难在它们的背景颜色下阅读。

澳门新葡萄京所有网站 24

这两行文本符合颜色对比度的建议,很容易在背景色下阅读。

一旦你确定了颜色的选择,就需要在设备上和真正的用户之间进行测试,这是非常有必要的。如果有测试反映出阅读的问题,那么你就可以确信用户也会遇到同样的问题。

考虑下面的代码:

9 不要使用红色或绿色的文字

色盲是一种常见的情况,尤其是在男性中(8%的男性是色盲),所以建议使用其他颜色来引导重要的信息。同样,应避免使用红色和绿色来传达信息,因为红绿色盲是最常见的色盲。

澳门新葡萄京所有网站 25

var thinG=doIt (thestuff,MORE_sTuff); /* LOL! */

10 不要使用闪烁的文字

闪光或闪烁的内容能引发易感人群的癫痫发作。不仅如此,这很可能会让大部分的用户感到厌烦或精神涣散。

澳门新葡萄京所有网站 26

不要闪烁!

即便你对代码库有深入理解,它也不是特别易读的代码行。

结论

字体设计是一个很重要的问题。做出正确的字体选择可以让你的网站有一种清新和优雅的感觉。另一方面,糟糕的字体则会让人分心,让人们的注意力放在字体本身上。字体的可读性、可理解性和易读性是设计中至关重要的一环。

字体是为了突出内容

字体应该以一种不会增加用户认知负担的方式来突出内容。

澳门新葡萄京所有网站 27

澳门新葡萄京所有网站 28

var totalBill = apply_tax (initialBill, taxRate);

对于清晰的应用程序,要借助命名习惯、间隔和大写,从而让代码更易于阅读。这意味着,接手我们代码的可怜家伙,将用更少的时间来解密代码,把更多时间放在理解上面。

为什么使用等宽字体?

在所有著名的、老生常谈的舌战中,有两个实力基本相当的阵营,即等宽字体 注2VS
比例字体注3 的争论。

某些异教徒会对你说,比例字体是最棒的——无视这些异教徒吧。另一些异教徒则在他们争论比例字体所具有的上等纯洁度时,给你的心灵留下了不和谐——这些可怜的、受谴责的灵魂呀。

最终,还要归结到可读性。你觉得,什么东西能够最容易地帮助你理解代码?为什么
IDE
有着色方案——因此你能一眼看出“foo”是函数、常量、变量还是注释。只要能让你更快地理解这段代码的用途,它就是好的东西!

这也是电子表格如此受欢迎的原因之一。列提高了可读性。你可以快速地顺着一列扫视,并能注意到某行和其它行是否存在明显不同。

我们没有工具

有趣的是,在 HackerNews
上的讨论中,我面临的最大批评与垂直对齐是否有用无关,而是我们的工具有多么糟糕。

「这破坏了 diff
的可读性和可用性。比如你修改了某个常量,需要快速追踪因此引起的严重
bug。对于水平排列的代码,diff
或许包含了所有修改过的行,从而掩盖了关键修改。有一些忽视空格的变通方案,以及基于单词的
diff,不过依本人愚见,不值得这么麻烦。

——Andreas van
Cranenburgh

……还有……

假如你有 50
行赋值语句,你把所有值都和最大的那个对齐了,那么增加一个赋值语句,将迫使你更新
50
行代码。我已经遇到过这些情形了,每当那时候,我就明白了,不要那样对齐值是多么地重要。

——scrollaway

这些论点在某些语境中是合理的,但是说明了需要更好的工具。

我想起了 Elastic
Tabstops ——自动排列代码块的方法。

澳门新葡萄京所有网站 29

By Nick Gravgaard

工具能够轻松容纳这种工作方式。计算机就是为我们做单调、重复工作的,CPU
周期「浪费」在让代码更可读方面的代价,已经足够便宜了。

在 Linux Kernel 中,还有大量的例子,垂直排列让代码更便于人类分析。

垂直排列不适用于每个场景,但是对于快速评估代码,其可读性是无与伦比的。

代码是具有创造性的平台,我们通过这个平台来表达想法。如果工具增加了理解这些想法的难度,那么,需要改变的就是工具、而非我们。


注释

  1. 90-90 法则(ninety-ninety rule,九九定律,99
    定律)是计算机编程和软件工程领域的一个有名的法则,出自于一句幽默的格言:(开发软件时)前
    90% 的代码要花费 90% 的开发时间,剩余的 10% 的代码要再花费 90%
    的开发时间。

  2. 等宽字体(Monospaced
    Font)是指字符宽度相同的电脑字体。与此相对,字符宽度不尽相同的电脑字体称为比例字体。在等宽字体中,字母i,j显得两侧余白较多,而字母w,m等
    的笔画显得相当拥挤。但是随着图形用户界面主流的更新和电脑技术的提高,处理比例字体的局限性得到了突破,因此现在排版上显得比较自然的比例字体的使用已
    经相当普及。另外,代码也经常使用等宽字体。

  3. 比例字体(Proportional
    Font)是指字符宽度不尽相同的电脑字体。与此相对,字符宽度相同的电脑字体称为等宽字体。

转自: