提高网页排版水平的五种方式

排版是网页最基本的组成部分。易读性及可读性通常是用户体验必不可少的一部分。如果你知道如何排版,你就可以在用户会话中增加变换和持续时间,并且你的网页对于大众来说会更有价值。

首先,什么是文字?

字母,单词,句子,段落。人们用文字来表达想法。它包含情报和某些特定的信息,并且可以被阅读。如果你想在网上表达想法,那么文字就是必不可少的,这样人们才知道你说了什么。

作为Thinking with typeEllen Lupton 著)的死忠粉,我必须引用作者所说的一句话:“在排版中,文字是持续排列的,不同于短标题或者标题。”

好的排版可以让用户很容易就找到他们想要的,在他们阅读的时候他们就会感到愉快且有成效,你的想法会最大程度地传递给人们。糟糕的排版会阻挠和干扰用户,让人觉得失望也没有读下去的欲望。

在下文中,我会告诉你一些建议,能让你提高排版水平,也能让你网页的字体更加清晰易读,那就开始吧。


一、字体大小(Font size)

几年前正文字体通常使用10或12px,现在我们用的都是FHD或者UHD显示,所以要扩大字体,使用大的字体可以增加文本内容的易读性。要想使你的内容更清晰易读,最佳字体大小是1622px。当你为小屏幕设计设计界面的时候,可以将字体大小缩减至1418px

这些尺寸的最小值也适应视觉障碍的人阅读(这里指的是戴眼镜的人或者老年人)。

"Optimal body text size is from 16 to 22px to increase legibility of your text content."最能增加易读性的正文字体大小是16到22 px。

别忘了,最理想的字体大小总是取决于你为网页选择的字型。下图中你可以看到字母X的高度(从基线到小写字母顶端)在字体Helvetica Neue 和 Futura之间的区别。

相同字号下Helvetica Neue 和 Futura的对比

二、行间距(Line spacing)

设计网页时,正文主体应该使用1.5倍以上的行高,标题行间距推荐使用约1.1倍或1.2倍

You should use line height at least 1.5 multiple of your body text size.正文主体应该使用1.5倍以上的行高。

这是什么意思呢?实际上,当你的正文主体使用16px大小的字号时,你的行高应该在24px左右(你可以看以下示例)。

如果有时你的段落很短但你想让排版看起来更和谐,你可以增加一点行间距。

1.5倍行高下的文字排版案例

三、行长度(Line length)

在网页上,人们不会阅读大块的文字,浏览较长的行列会让人觉得很困难而且很不舒服。我想提醒一件很重要的事,就是人们不会定在一个地方一直阅读较长的文字,而是会短而快速地浏览(也称为跳阅)——法国眼科医生 Louis Émile Javal 发现的。

People don’t move continuously along a line of text while reading, but make short, rapid movements intermingled with short stops.人们不会定在一个地方一直阅读较长的文字,而是会短而快速地浏览

所以行的长度应该是有限的,最佳选择是每行6080字符,能给人最好的阅读体验。当你设计一个界面时,你要让行长度适配屏幕大小。在手机上你应该选择每行30到40个字符。

一行超过80字符也会给阅读障碍的人带来巨大困扰。

不同行长的视觉感受对比

四、对比(Contrast)

从实用性的角度来说,对比是十分重要的,但也会影响易读性。

文本之间对比如果不鲜明,就会让人们阅读和使用网页变得十分困难(不仅是那些阅读障碍的人)。

现在的趋势是灰色字体加白色背景。但如果用户看内容时并不舒服的话这也没什么卵用。如果对比不明显的话,人们浏览的时候速度会变慢,他们无法抓取任何关键词,并且会错过重要信息,没办法看到连接也很难发现菜单栏——即使是用移动设备走在阳光下。

Content vs background contrast should be guided with 4.5:1 rule.内容与背景对比的规则是4.5:1

从可访问性角度出发,内容与背景对比度按照4.5:1的规则也可以让任何视觉障碍、低视力和色盲用户正确阅读屏幕上的内容。但达到最佳的对比往往十分复杂,不只需要一种颜色。例如患有色盲的用户很难看到超文本链接,所以你应该打上下划线(也能很好地解决人们注意不到的问题)。

Contrast isn't only about colors, people with visual impairments can have problem to find hypertext links when they aren't underlined.对比不只是颜色对比,如果超文本链接没有下划线的话,视力障碍的人会很难发现。

五、纵向分布(Vertical)

人们在网页中不会阅读大块的文字,他们只是浏览大致内容,寻找重要信息。纵向分布让一切变得简单。为了让用户更舒适地浏览,我们使用纵向分布保持哥元素和模块(标题、段落、标题或图片)的一致。我们也使用纵向分布来引导用户快速找到重要的图片,给使用网站的人更多的轻松和积极的体验

但是如何运用纵向分布呢?

你可能已经听说过基线——在印刷设计中基线无形地影响着字符的位置。我们也使用这个词在网页设计中,但略有不同。网页设计中基线是由文字主体的行高(同时也是CSS属性)决定的。

当你定义基线和创建自己的基线网格,最基本的一点是根据你的正文文字大小(<p>)和行高(css中的行高属性)来规划接下来的一切。

在下图中你可以看到,我使用16 px的字体大小和24 px行高,这意味着以24 px为基线(为了更好设置所有的字体的位置,我曾经把这个数除以2,3或4以供选择)。基于这个定义,所有空格(包括边界、填充或边框)必须可以被6xp整除。为了使段落和标题看起来一致,我决定以数字6的倍数创建空间,最后我使用24或36 px。我的字体大小、行高也是6px的倍数。

纵向分布在设计中起到的作用

总结

排版是网页设计的重要组成部分,也是你文本是否清晰可读易理解的决定性因素。如果用户在阅读和浏览你的网站时感觉良好他们会更加认可你网站的价值。

- 本文翻译来自Medium,

- 感谢 Patrik Michalicka  原文链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容