网页设计中文字排版的10点技巧！

在网页规划中，文字排版为什么关于网站和用户之间树立杰出的交流以及协助用户实现目标起着重要的效果的10点主张。

在网页规划中，文字排版关于网站和用户之间树立杰出的交流以及协助用户实现目标起着重要的效果。当咱们谈论网页是否能和用户树立有效的交流的时分，一般是指文字排版在这儿起到的效果：

“网页中95％以上的信息是以文字方法出现的。”
杰出的排版运用户更易于阅览，而紊乱的排版则运用户失掉持续阅览的志愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中写道：“排版的目的是优化可读性，拜访率，可用性，坚持和图形的平衡联系”

换言之，优化排版也在协助您优化界面。本文中，咱们供给一组规矩，将协助您进步文本内容的可读性和易读性。


1.不要运用过多的字体
网站排版中主张最多不要超越3种字体类型，否则会使网站看起来松懈和不专业，不只太多的字体类型会构成这种问题，太多的字体尺度也会破坏网页布局。



一般状况下，将字体宗族的数量约束在最小数量（2个是许多，1个一般就够了），整个网站坚持运用相同的准则。假如运用多个字体，请确保俩个字体是否调和。以下面的字体组合为例，Georgia和Verdana的搭配相辅相成，比较照较调和。比较于右边Baskerville和Impact则会有显着的冲突感，非衬线Impact显着的超越了Baskerville的视觉冲击力。



而在中英文排版中，主张咱们中文运用规范中文字体，而英文、数字和字符运用规范的英文字体。以下面的图为例，是否能够比照处那个美观一些。


2.尽量运用规范字体
在Google Web Font或许Typekit，和国内的“有字库”的字体嵌入式服务有许多风趣的字体，关于国内规划师来说，苦楚的是中文字领会很大，一个字体动则几兆，十几兆的，这样用户在会添加用户阅览网站的载入时刻；反之英文字体26个字母巨细写，加数字标点符号总共几百k的字体是很简单在网页中运用的。

尽可能挑选规范字体（近几年网页中一般运用思源黑体，PingFang，英文能够运用Arial，Calibri或许其他常见的易于屏幕阅览的黑体字，如没有特别概念指导尽可能防止运用衬线字体，如宋体）
不是每位用户都能够在终端上看到同一个字体，意味着你挑选的合适的字体，用户有可能看不到。
用户更了解规范字体，因而他们能够更快的阅览
特别的、而且少量的字体能够制作成.svg格局的资料嵌入Web运用

杰出的排版会运用户更加重视内容自身，而不是字体的类型。

3.约束一行文字的长度
确保每一行文字的字符数量是文本可读的要害。不是规划师来定义文本的宽度，而是依据用户的可读性来定义。

太宽-会使得单行文字太长，读者的眼睛会难于专心文字。由于长时刻阅览简单串行，大段的文本中很难找到正确的行。
太短-会使得用户的眼睛经常回到下一行文本，会打破读者的阅览节奏，长时刻阅览构成视觉疲惫。太短也会倾向于向读者宣布一种信号，使得读者没有读完当时这行就去跳到下一行阅览，可能会忽略潜在的重要词句。


以Google和百度为例，咱们不难看出这点



关于移动设备，应该每行30-40个字符（半角），详细显现多少个字数，与不同分辨率的屏幕、文本宽度和字体巨细都会有联系，规划的准则是：确保用户能够流畅的阅览文本，文字不宜太小或太大。以iOS（手机）为例，正文文本最小字号不能小于24px，太小了用户阅览会难以阅览。以百度为例，可作为参阅。



4.挑选用有多个字重并显现杰出的字体
用户将经过不同屏幕分辨率的终端设备拜访你的网站，大多数用户界面需求各种巨细尺度的文本（标题、副标题、文本、标示等等）。挑选一款能够在不同屏幕分辨率的设备上运转杰出的字体以确保它的不同尺度的字体都具有极高可读性(Readability)和可用性(Usability)也是非常重要的。



近俩年备受咱们欢迎的思源黑体和PingFang字体都是不错的挑选，当然，个人认为汉仪旗黑不管从宗族字体的数量、字体质量、屏幕显现、纸媒印刷上来说都不差劲于前面俩款字体。参加过这款字体规划的规划师曾说过，思源黑体仍是比较照较粗糙的一款字体。

相同，为了确保在屏幕上明晰可辨，尽量防止运用衬线体，虽然他们很漂亮。



5.运用辨认度高的字体
在挑选英文体的时分，有些字体的单个字母极易混杂，特别是“i”和“L”（如下图所示）；以及文字之间的间隔。许多中文字体在运用较小字体的时分笔画会粘到一同(上图），不简单区别；所以在挑选字体类型的时分，请查看你挑选运用的字体，确保不会为用户和产品构成不必要的丢失。



6.防止在界面中大段的运用大写字母
不要所有文本运用大写字母，强制用户阅览大写字母，首字母大写，具有特别含义的缩写等状况除外，与小写字母比较，许多的运用大写字母会严峻下降用户的阅览效率和愉悦感。



7.将行间隔操控在字体的1.5-2倍之间
在文字文字排版中，咱们又一个特别的术语，用于表明行与行之间的间隔：行间隔（或行高）。为了确保文本的可读性和易读性，使文本构成线性的阅览感触，将行间隔操控在字体巨细的1.5-2倍之间（中文字体）。英文字体引荐运用默许行间隔，或依据默许行间隔微调。



8.恰当的色彩比照度
一般状况下，文本和布景尽量防止运用相同或相似的色彩。文本越显着，用户能够扫描和阅览的速度越快。当然，学会经过文本色彩、巨细和布景的色彩联系来操控视觉层级也是必要的。
与布景比较，小文本和布景的比照度至少为4.5:1
大文本（14px/18px以上）应该坚持与布景3:1以上的比照度



灰色一般作为辅佐色运用，依据之前的项目经历，给咱们共享一套我自己一直在运用的灰色，灰的有层次，明晰的区别信息层级是必要的



9.防止将文字上色为赤色或绿色
色盲和色弱是我必需求照顾到的一部分用户，特别是在男性中（8％的男性是色盲）主张运用途色彩以外的其他方法来区别重要的信息（如下划线，加粗等）。防止运用赤色和绿色独自传达信息。由于红绿色盲是最常见的色盲方法。（现在想想，那些由于红绿色盲而考不了驾照的童鞋是不是要分分钟恨死制定红绿灯规矩的人，当然这仅仅个笑话，运用红绿灯是由于光学在物理传达方面的原因，这儿不解说）



虽然在日常日子中咱们总是用这种方法奉告用户绿色是表明正确的操作，赤色表明过错的操作，反思一下咱们是否有去考虑色盲用户的操作和体会。或许咱们是不是能够考虑换一个方法去表达正确或过错？

10.防止文字闪耀
闪耀的文字或内容可能会让某些用户感到不适，关于一般用户而言，这可能分散他们的留意力或许使他们感到烦躁。


虽然在网页规划中依然有许多需求咱们留意的当地，最后，共享给咱们一个主意就是：网页规划中排版很重要。做出正确的排版能够让你的网站感觉清新，糟糕的网页排版会令用户分心，倾向于重视自己的感触而非内容。排版的要害在于使信息层级明晰、用户易于阅览、而且确保文字是可读的。文字的排版不应该添加用户的认知符合，以求达到尊重内容、尊重用户的目的。