网络排版：建立强大的印刷系统

>本文探讨了网络版式的复杂性，并提供了创建视觉吸引力和用户友好的网站的实用策略。 设置排版可能是一个复杂的过程，但是定义明确的设计系统大大简化了任务。 这使设计人员可以专注于高级决策，而不是在细节上陷入困境。

>

>至关重要的起点是确定身体字体尺寸。虽然16px曾经是标准的，但现代趋势偏向于文本较重的站点的较大尺寸（18-21px），并且较小的尺寸（14-16px）对于繁忙的UIS。 下表展示了突出网站使用的车身字体尺寸：

• edimpor.com： 21px
• > nytimes.com：18px
• cnn.com： 18px
> airbnb.com：
• 18px
sitepoint.com： 18px
• > bbc.co.uk： 16px
• developer.mozilla.org： 16px
• > twitter.com： 15px
> etsy.com： 14px
• wikipedia.com：
14px
• facebook.com：
14px
• 请记住，这些已建立的站点进行了广泛的用户测试。 选择您的应用程序的上下文时，选择您的基本大小并在各种设备上进行彻底测试。
>
• 键入一致版式的缩放

设置了基本大小后，类型缩放（或模块化缩放）提供了定义标题大小的数学方法，从而确保视觉和谐。 应用一个简单的比率（例如1.25）来生成所有字体大小。例如，以18px的基础：

> type-scale.com（[link to type-scale.com]）的工具简化了此过程，允许实时调整和CSS生成。

<code>body { font-size: 18px; }
h5 { font-size: 1.25em; } /* 22.5px */
h4 { font-size: 1.563em; } /* 28.13px */
// and so on...</code>

响应式缩放和垂直基线节奏

>

>单一类型量表可能适用于某些设计，但通常需要使用CSS媒体查询对不同的屏幕尺寸进行调整。 较小的屏幕通常需要较浅的尺度。 考虑报纸和小说的版式之间的区别：

垂直基线节奏是一种基于网格的排列版式的方法，可增强视觉和谐。 gridlover.net（[链接到Gridlover.net]）和原型（[[链接到原型]）等工具有助于实现此功能，生成遵循所选节奏的CSS。

请记住，基线节奏是一个指南，而不是严格的规则。 灵活性是实现平衡设计的关键。

>常见问题

本节回答了有关网络版式的常见问题，涵盖了字体选择，白空间使用情况，视觉层次结构，响应式排版，可读性，衬线与sans-serif字体，字体配对，kerning和品牌反射，并通过版式通过版式通过版式进行。 这些常见问题解答全面概述了网络版式中的最佳实践。

以上是网络排版：建立强大的印刷系统的详细内容。更多信息请关注PHP中文网其他相关文章！