网站设计：网站字体排版的10个基本规则

优化网站文字排版也是优化用户界面的一种方法。 在本文，作者将共享一组协助你进步文本内容的可读性和易读性的规矩。　

 
　　“交流”在规划中起着至关重要的作用 – 它能树立网站和用户之间的联络，并协助用户完结他们的方针。 当咱们议论在网页规划方面的交流时，一般是指文本的输出。
　　排版在这个过程中起着至关重要的作用：网络上的信息95%以上的是在书面语言的方法存在。杰出的文字排版使阅览的行为轻松，而体会欠好的文字排版导致用户封闭网页。“网页规划是95%排版规划”：
　　优化排版是优化界面可读性，可拜访性，可用性，使全体平衡的要害。
　　换句话说：优化网站文字排版也是优化用户界面的一种方法。 鄙人面的文章中，我将供给一组协助你进步文本内容的可读性和易读性的规矩。
　　1.尽量运用少的字体
　　运用超越3种不同的字体会使网站看起来缺少结构化和不专业。 留意，较多的字体样式运用一次都可能损坏一切布局。
　　

 
　　为了防止这样的状况，测验将字体数量削减
　　一般来说，将字体数量约束在最小限度(两个算多的，一个是正好的)。 假如你运用一个以上的字体，保证字体具有系列感，且依据其字符宽度是相辅相成。 采纳下面的字体组合的比如。 Georgia和Verdana(左)的结合，共同创立一个调和的配对类似的价值观。 与此比较，Baskerville和Impact( 右)，极大地掩盖了衬线相对应的不匹配度，构成较好的视觉体会。
　　

 
　　在依据其字符宽度的规范下保证字体系列相辅相成
　　2.测验运用规范字体
　　字体嵌入效劳(如Google Web字体或Typekit)有许多风趣的字体，可认为您的规划供给立异、新鲜的和意想不到的作用，它们运用起来也非常便利。以Google为例：
　　挑选任何字体，如Open Sans。
　　生成代码并粘贴到HTML文档中。
　　完结!
　　这个状况下不会犯错么?
　　其实这种做法有两个问题
　　不是每个人敞开浏览器都能够拜访到同一种字体，这意味由于您挑选的用户体会较好的字体将无法展现在一切用户面前。
　　用户更熟悉规范字体，因而能够更快地读取它们想要的信息。
　　除非您的网站有满足吸引人的自定义字体(如品牌宣传或创立身临其境的体会)，否则最好运用体系字体。更为安全的做法是运用的体系字体是：Arial，Calibri，Trebuchet等。请记住，杰出的文字排版会将读者吸引到内容，而不是文字自身。
　　3.约束文本线长度
　　每行放置恰当的字符数量是文本可读性的要害，它不仅是你的规划，决议你的文本的宽度，它也应该是一个可读性的问题。从Baymard研究所考虑有关可读性和文本线长度的主张：
　　“假如你想要一个很好的阅览体会，你应该约束每行大概60个字符。每行具有恰当的字符数量是文本可读性的要害。”
　　

 
　　假如一行文本太短，眼睛有必要经常转回，打破读者的节奏。 假如一行文本太长，用户的眼睛也难长时间专注于单行文本。 图片来历：资料规划
　　关于移动设备，根本坚持每行30-40个字符。 以下是在移动设备上查看的两个网站的示例。 第一个运用每行(每行字符印刷和桌面的最佳数量)50-75个字符，而第二个运用最佳30-40字符。
　　

 
　　在网页规划中，您能够经过运用像素约束文本块的宽度来完成每行最佳数量的字符。
　　4.挑选各种尺度的文本元素
　　用户会从有不同屏幕尺度和分辨率的设备拜访您的网站。大多数用户界面需要各种巨细的文本元素(按钮文字，字段标签，部分标题等)。挑选一种能够在多种尺度和分辨率屏幕上运转杰出的字体以坚持每个尺度的可读性和可用性非常重要。
　　

 
　　Google的Roboto字体
　　保证您挑选的字体在较小的屏幕上明晰可辨!测验防止运用草写脚本的字体，如Vivaldi(鄙人面的示例中)：尽管它们很漂亮，但它们很难阅览。
　　

维瓦尔第字体将难以在小屏幕上阅览
 
　　5.运用可区别字母的字体
　　许多字体使得很简单混杂类似的字母方法，特别是与“i”和“L”(如下图所示)以及差的字母距离，
　　例如当“r”和“n”看起来像“M”。所以当挑选你的类型时，请必须在不同的上下文中查看你的类型，以保证不会为你的用户形成问题。
　　

 
　　6.防止一切字母大写
　　一切大写字母 – 意思是一切字母巨细写的文本 – 在不触及阅览的上下文中(例如首字母缩略词或标识)看起来都很美观全体，可是当您的音讯触及阅览时，请勿强制悉数运用大写字母。正如Miles Tinker所说，在他的具有里程碑含义的著作“可读性”中，悉数大写增大了扫描和阅览的速度，与小写类型比较。
　　

 
　　7.不要尽量削减线距离
　　在排版中，咱们有一个特别术语，用于两行文本之间的距离(或行高)。经过添加行高，能够添加文本行之间的垂直空白空间，一般进步可读性以换取屏幕空间。有一个根本规矩，标题空间应该是字符高度的30%，以进步可读性。
　　

 
　　杰出的距离有助于可读性。图片来历：微软
　　正如Dmitry Fadeyev所指出的那样，正确地运用段落之间的空白已被证明能够将进步20%理解度。运用空白的技能可认为用户供给可转化常识的内容，然后剥离无关的细节。
　　

 
　　左：几乎重叠的文字。右：杰出的距离有助于可读性。图片来历：苹果
　　8.保证您有满足的色彩对比度
　　文本和布景不应该运用相同或类似的色彩。文本越显着，用户能够更快地扫描和阅览它。 W3C主张对身体文字和图画文字的对比度如下：
　　

 
　　这些文本行不契合色彩对比度主张，难以依据布景色彩进行阅览
　　小文本的布景对比度应至少为4.5：1。
　　大文本(14pt/ 18pt常规和以上)应该具有至少3：1的对比度与其布景。
　　

 
　　这些文本行契合色彩对比度主张，并且是易于阅览布景色彩
　　一旦您挑选了色彩，绝对有必要在大多数设备上与真实的用户进行测验。假如任何测验显现阅览文字有问题，那么您能够保证您的用户具有完全相同的问题，再来一致进行处理。
　　9.防止将文字着色为赤色或绿色
　　色盲是一种常见的状况，特别是在男性中(8%的男性是五颜六色瞎子)，主张运用除色彩以外的其他线索来区别重要信息。别的，防止运用赤色和绿色独自传达信息，由于赤色和绿色色盲是最常见的色盲方法。
　　

 
　　10.防止运用闪耀的文字
　　闪耀自身或闪耀的内容可能会触发灵敏个别的神经发生。它不仅能够引起神经的冲突，并且关于一般用户来说，都可能是令人讨厌或分神的。
　　

 
　　定论
　　文字排版是一个重要的规划规模，做出正确的排版挑选能够让您的网站感觉到焕然一新。所以文字排版的可读性，可理解性和明晰度至关重要。文字排版的存在，作用是杰出内容，应以不会添加用户认知负荷的方法来增进内容的可读性。