网页排版设计技巧：控制字体数量与使用标准字体的方法
网页排版设计的技巧
具有良好的排版情况，提升了用户进行阅读的那种积极性，相反的是，存在差的排版状况，就会让用户的阅读积极性有所降低。 下面呢，是小编去收集整理的有关网页排版设计的技巧，期望对大家是有着帮助的！
网页排版设计的技巧
1. 减少不同类型字体的使用
选用达到3种以上不一样的字体，致使网站显得缺乏结构，且给人不专业的感觉。要牢记，过多的尺寸种类以及风格样式，同样兴许会对任何布局造成破坏。
为了防止这种情况，尝试将字体数量限制在最小限度
通常来讲，把字体数量限定于最低程度呢，（两个就挺充裕，多数时候一 个便足矣），且把相同的字体黏贴到整个网站之上。要是运用多个字体，那就得保证字体系按字符宽度彼此互补。以如下的字体组合为例。Georgia跟Verdana（左边）的组合有着相近的价值，配对得很是和谐。去对比与Baskerville和Impact（右边）的配对，当中被大幅度加重的Impact让与其相对应的衬线字体黯然失色。
确保字体系基于字符宽度互相补充
2. 使用标准字体
字体的嵌入服务，像Google Web fonts或者Typekit这样的，能够给你的设计供给好多新奇的、出人意料的有意思的字体。它们使用起来也是极为容易的。就拿Google来说吧：
选择任何字体，如Open Sans
在HTML文档的中生成代码并粘贴。
完成!
事实上，这般方法存在着一个相当严重的问题，那是由于用户对于标准字体更为熟悉，所以能够以更快的速度去读取它们。
若你的网站并非对于诸如品牌宣传还有创建沉浸式体验这般的自定义字体极具吸引力，那一般而言最好运用系统字体，最稳妥的办法是采用像Arial、Calibri、Trebuchet等之类的系统字体。要记住，良好的排版能够将读者吸引至内容里，而非排版自身。
3. 限制行的长度
对于一行而言，拥有恰当的字符数量，这是使得文本具备可读性的关键所在。并不是你的设计，去决定你所拥有文本的宽度，应该是一个涉及到可读性的问题。要去考虑Baymard Institute给出的，关于可读性以及行的长度的相关建议：
若你期望拥有一种良好的阅读体验，应当每行大概60个字符。每行具备恰当的字符数量，乃是使你的文本具备可读性的关键所在。
要是行的长度过短，那视线就不得不常常返回，如此一来就会把读者的节奏给打破。要是有一行文字特别长，那么用户的视线就会极其难以专注于文本。
针对移动设备而言，字符数应当是每行30至40个 。这儿有在移动设备上查看的两个网站的例子 。头一个是运用每行50至75个字符的 ，此乃打印以及桌面每行的最佳字符数 ，而第二个呢 ，是采用最佳的30至40个字符 。
在网页设计这个范畴里，能够凭借运用em或者像素这种方式，去限制文本的宽度，借此实现每行具备最佳数量的字符。
4. 选择一个能在各种尺寸中工作的字体
用户会通过有着不一样屏幕尺寸以及分辨率的设备来访问你的网站，大多数用户界面需要各类大小的文本元素，诸如按钮复制、字段标签、章节标题等等，挑选一个能够在多种尺寸以及重量方面运行得不错的字体，以此来维持每个尺寸的可读性以及可用性，这是相当重要的。
Google的Roboto字体
保障你所挑选的字体于较小屏幕之上清晰可分辨，试着规避运用草书的这类字体，像Vivaldi（于下面的示例当中）：尽管它们颇为美观，然而它们阅读起来颇具难度 。
Vivaldi字体很难以在小屏幕上阅读
5. 使用可区分字母的字体
众多字体致使相仿的字形极易混淆，尤其是跟“i”与“L”（如下方图示），以及于字母间距较小的空间里，比如当“r”和“n”看上去如同“M”。所以，在挑选你的排版之际，务必要在各异的文本环境中核查你的排版，从而确保不会给用户带来问题。
6. 避免所有的大写
所有大写字母，指的是文本里的所有大写字母，在不涉及阅读的相关情境当中是很不错的，比如首字母缩略词又或者标识，然而当你的信息关联到阅读时，不要硬性要求用户去阅读全部大写文字。就如同Miles Tinker所讲的那样，在他那具有里程碑意义的作品里，关于可读性的印刷，全部大写印刷相对于小写排版而言，极大地延缓了用户的阅读速度。
7. 行间距的重要性
在排版这一范畴里，存在用来表示两行文本之间这种间距（也就是行高）的一个特别术语，借助加大行高的方式，能够增添文本行互相之间的垂直空白区域，一般是通过牺牲屏幕空间来提升可读性。按有关规则来讲，行高应当是字符高度的百分之三十，以此提升可读性，。
好的间距有助于可读性。
就如同Dmitry Fadeyev所点明的那般，恰当地运用段落之间的空白已然被证实能够把理解提升20%。运用空白的技巧在于给用户供应可消化量的内容，接着去除无关紧要的细节。
左：几乎重叠的文字。右：良好的间距有助于可读性。
8. 确保你有足够的颜色对比度
不要于文本以及背景当中运用相同或者相似的颜色，文本越是明显，用户便能够越快地进行扫描以及阅读它，W3C给出了对于身体文字和图像文字所建议的对比度如下：
与其背景相比，小写文字的对比度应至少为4.5：1。
对于大文字，其字号为14pt ，常规字号是18pt及以上，这种情况下，背景对比度应当最少是3比1 。
这些文稿的行与规定的颜色对比度要求相背离，依据背景色度实现阅读的难度较大 。
这些文本行符合颜色对比度建议，易于阅读背景颜色。
一旦你做出了颜色选择，非得在多数设备上跟真实用户开展测试。要是测试表明阅读副本存在问题，那便能认定你的用户有完全一样的问题。
9. 避免文本为红色或绿色
首先，色盲是一种较为常见的状况，尤其在男性群体里面它的出现概率颇高，具体来说呢，有8%的男性属于色盲。其次，鉴于这样的情况，建议采用那些并非这些颜色的另外一些颜色去区分重要信息。然后，还要避免单单使用红色以及绿色来传达信息，因为红色和绿色色盲乃是最为常见的色盲表现形式呀。
10. 避免使用闪烁的文字
内容的闪烁，有可能致使敏感个体出现癫痫发作情况。它不但能够引发癫痫发作，并且对于普通用户而言，这是令人厌烦和让人分心的 。
避免闪烁文字!
结论
排版是一件有着重要意义的事，做出正确的能使网站看上去更为优雅的排版选择，然而，会让人分心且往往会引发对排版注意的糟糕排版选择出现了，让排版具备可读性、可理解性以及清晰度是极其关键重要的 。
内容排版的存在是为了荣誉。
排版应以不会增加用户认知负荷的方式来尊重内容。
拓展资料：响应式网页设计的7类排版规则
1. 突出显示标题
网页排版存在这样一个特点，那就是标题于版式里占据着突出的位置。具有别致特性的标题能够吸引用户在你的网站停留更长的时间。想要达成这一点，你能够借助字形以及连字技巧创造出外观更为独特的标题。
连字，所指的是那种看上去好似连接在一起的字母，举例来说，如单词“fish”里的“f”与“i”，在某种字体当中，有可能联成一体成为“fi”，借助浏览器的字体设置功能，或者借助那个“文本渲染 - 优化清晰度”也就是“Text Rendering - OptimiseLegibility”特性，你能够轻松地达成连字效果，火狐浏览器已然设置了默认的连字符，在某些字体里运用特定的这样的连字组合效果，能够为你的网页版式增添美感以及风格。于网页排版软件的Text目录里，通常能够开启或者关闭连字效果。在Type目录中，一般也是如此。于Open Type目录中，同样一般都能开启或关闭连字效果。当合适的字母相邻出现之际，这些软件会自动给它们设置连字效果。
案例分析
要留意这个网站里优雅的连字，把这些优美的字体用于网页标题，这无疑会给访客带来更卓越的用户体验，。
2.合理搭配不同大小和颜色的字体
我们在进行网页设计时所需选择的就是如同上面图片所传递讯息那般能于桌面端以及移动设备屏幕之上皆清晰予以显示的字体，一款字体于印刷品里跟于数码设备中呈现起来的效果是不一样的，所以我们务必要去理解font family属性、风格以及效果，依据W3C针对CSS字体给出的规定，Serif、Sans-Serif、Monospace、Fantasy以及Cursive等字体均具备font family属性。
第二，要按照网站的主题或者分类去挑选字体，如此才可以保证你的网页能够引发目标受众的共鸣，达成想要的成果，衬线字体同样能够被用于提高文本的阅读成效，强化所要传达的信息，这里存在的问题是，衬线字体的特性决定了它只能够在高解析度的屏幕上正常展现，在低解析度的屏幕上或许会致使糟糕的后果，所以建议你在短标题里采用艺术字体，在正文中运用更简洁的字体。
3.精心挑选字体将为你赢得灵活而高效的排版
在客户端字体也就是Font Face被引进 into 网页设计范畴之后，网页设计师们才获取到把不一样的字体应用于自身设计里的自由。在此之前，他们仅仅能够采用特定的、跟网页安全相兼容的字体 。
然而，于可自由动用的这些字体而言，设计师们尚需明确怎样恰如其分地予以运用。响应式网页设计现下已然成为多数网站所采纳的标准设计样式，只是鉴于需兼顾不同尺寸的设备屏幕缘故，它亦对网页排版施加了某些限定。故而，当网页设计师于一个响应式网页体系里采用多种字体之际，必须予以万分审慎。莫要在同一个网站中运用过多字体，最优情形是勿超出三种 。并且，也别使用极为火爆流行的字体，其难以让你的网页相较其他网页别具凸显的优势 。
案例分析
这个站点运用了两种无衬线字体，所有标题运用的皆是Balto字体，正文采用的是Alright Sans字体，处于这两者中间的是Harriet字体，整个页面的外观展现得极为简洁优雅。
angelfire网站与之形成对比，该站点运用了种种各异的字体，看上去杂乱无章，缺乏专业性。
4. 在响应式排版中，调节行宽十分重要
网页之中行宽(line length )是一定要做调节行为的，理由在于字体行宽跟排版整体响应程度深深地紧密相连。响应式设计涵盖了在不同尺寸屏幕条件下，字体依循自适应情况而产生的改变。所以针对字体行宽实施调整这一步骤是绝对必要且不可少的。
文本字符数量在45至47之间，涵盖空格与标点，此为每行理想行宽，最长限度是45至85个字符，乃是经对人们阅读习惯和眼动规律研究后所得出。以此结论为据，有专家建议网页内容采用左对齐排版方式，因阅读时人的视线通常会按从左至右方式在水平方向 motion。
案例分析
平台suite对每一行文字的字符数量施行了限定，具体是75个。就好似你能够察觉到的那般，页面里头的文字看上去极为美妙动人，足以使得用户带着探究的兴致持续不断地阅读下去。
首先，存在这样一种情况，即当用户与屏幕的距离呈现出不一样的状态时，采用不同大小的字体能够对可读性起到改善的作用。其次，在响应式排版设计这个范畴之内，这一点是必须要被纳入考量范围的。
字体大小需确保在设备层面具备可见性，还要拥有可读性。然而，要达成这一状况，极有可能同先前讲到的维持“理想行宽”产生冲突。这是由于“理想行宽”要求对字体尺寸进行调小或者调大操作，而此二者均有致使文本无法阅读的可能性。此处的关键底线是要保障浏览者能够惬意地阅读网页内容。响应式设计极为关键的一点在于，依据用户跟设备屏幕距离的差异；应用于设备屏幕的字体大小理应存在不同。关于字体大小与阅读距离两者间的关系，已然存在计算的办法。
案例分析
来查看 moonbase 所拥有的网站，此站点专为协助别的公司去开展网站设计工作，在该网站网页的中央位置存有极为显眼易见的文本，该文本切实传达出这个站点所具备的功能，我们仅仅只需瞧上那么一眼便能够清楚明白，那突出的字体能够强有力地紧紧抓住用户的注意力，进而推动促使他们持续不断地去阅读浏览网站的其余剩余部分内容。
6. 响应式排版要求浏览器支持不同大小的字体
要是你所设计的网页里要用到某些自定义的字体，那你就得保证浏览器能够支持加载以及显示这些字体。就算你的字体自身清晰，不存在错误，然而浏览器兼容方面的问题有可能会让你之前所做的努力全都白费。你还得去检查你保存的字体文件格式跟你想要应用到网页中的字体是不是兼容。不兼容的字体没法正常加载，最终会对网页的显示造成影响。
案例剖析：于上面所给出的示例之内我们能够发觉，我们得去运用标准字体或者“字体库”。首要步骤是借助“字体测试”以判定一款字体是不是适用于网页当中。浏览器针对每个系列的字体存有“第一选项”，“第二选项”，“第三选项”等等之类的区分。要是浏览器在这个系列里找寻不到任何适宜的字体，它会自行挑选默认的无衬线字体，衬线字体或者Monospace字体。
举例来讲，诸多浏览器都自行带有Century Gothic字体，你能够去创建一个字体库，把Century Gothic字体视作你的首要选项，紧接着是Arial、Helvetica，最终是一款属于无衬线类型的字体，留意，在CSS里，标题当中含有多个单词的字体是需要添加引号的，比如：font-family:“Century Gothic”, Arial, Helvetica, Sans-Serif.
如此这般，浏览器会率先采用Century Gothic字体，因众多浏览器皆自带此款字体，多数用户于浏览网页之际所见的亦会是Century Gothic字体，对于未配置Century Gothic的浏览器，浏览器会依照Arial, Helvetica,事前设定的无衬线字体的次序寻觅替代。
7.与字体的物理属性相关的因素会影响字体在设计中的灵活度
响应式排版兴许会受困于对字形产生影响的那些因素，这些因素含有字重，字宽，笔画对比，字体高度，光学尺寸等等，这些因素的些许变动都会对站点的观感造成影响，当然，如今已然有了不少工具能够让设计师部分地校正这些限制 。
有代表性的两款此类工具是Superpolator和FlowType.js ，当屏幕尺寸变小，不同比例的网页间差异会更凸显 ，所以要在网页尺寸与缩放比例间找平衡点 ，比如用于标题的字体比用于正文的字体大或者小多少倍 ，这涉及比例问题 ，这就是我们需要响应式排版的原因 ，我们需要断点中能自行缩小的字体 ，因为设计师无法为网页内所有字体元素逐个调整基线风格 。
案例分析
请去查看flowtype网站，借助像Superpolator和FlowType.js这样的工具，只要拖动滑块，你就能够清晰地看到响应式排版所起到的作用。
为大家罗列了这7个网站实例，响应式排版的操作，仍需于实践里持续完备，在运用时，要针对各异屏幕尺寸的装置予以测试，如此，你便会逐步把握响应式排版的关键要素。
请小编喝杯咖啡吧！