排版是网站设计的一个重要方面。网页设计师选择字体样式很容易 – 使用大多数现代网站构建器，只需单击三下即可切换字体样式。然而，为网站选择*正确的*字体样式从来都不是一件容易的事。具有正确排版的网站会给人专业的印象，并让访问者轻松阅读。
1、什么是网站版式？
网站版式是一种排列字体的艺术和技术，使书面语言在显示时清晰、可读和有吸引力。在我们深入研究之前，网页设计师需要熟悉版式的一些基本元素，包括：
1.1字体
字体是一组特定字符的设计。例如，Times New Roman、Arial 或 Helvetica 是您过去可能遇到过的一些常见字体。 字体是字体的具体粗细、宽度和样式，例如 Arial Bold 或 Times New Roman Italic。
1.2字体大小
字体的大小以磅为单位测量。在网页设计中，字体大小以像素（px）、em（em）、rem（rem）和百分比（%）来衡量。像素 (px) 是测量单位，以固定像素数定义字体大小。另一方面，Ems (em)、Rem (rem) 和百分比 (%) 是基于网页中不同元素的相对测量单位。正确的字体大小取决于屏幕尺寸以及阅读器与屏幕之间的距离。
一般来说，桌面设备建议使用 16px – 20px，移动设备建议使用 14px – 18px。您正在阅读的本网站的字体大小为 18 像素，适用于桌面和移动屏幕。
1.3行间距
行距是文本行之间的垂直间距，也称为行距。
1.4标签
版式层次结构是指页面上不同级别文本的排列。大多数网页设计师按主题将内容分成几个部分，并使用排版层次结构使内容易于导航和消化。
例如 – 这篇博客文章以标题文本（又名标题 1 或 H1）开头，然后是不同的章节标题 (H2) 和副标题（H3、H4、粗体）、正文（您现在正在阅读的内容块） ）和潜台词（出现在页脚部分的小字体）。
通过使用不同级别的标题、副标题、字体大小、字体粗细、颜色和空白，您可以创建清晰的视觉层次结构，引导用户关注重要的信息，并更轻松地浏览和消化内容。
2、网页设计师初学者的排版技巧
现在我们已经了解了基础知识 – 让我们看看一些可应用于您的网站设计的可行技巧。
2.1选择反映您网站品牌个性的字体
不同的字体有不同的个性。选择与您的网站品牌形象和价值观相符的内容非常重要。通常，无衬线字体可能更现代、更时尚，而衬线字体可能更传统、更优雅。
对于初学者来说，通常好从常见字体开始，例如 Arial、Helvetica、Roboto、Open Sans、Lato、Montserrat 甚至 Verdana。这些字体类型不仅可以轻松适应大多数布局设计，而且还可以在大多数设备和浏览器上广泛使用，这使得它们“网络安全”。
2.2使用不超过三种字体
少即是多。使用太多字体通常会导致设计混乱且令人困惑。一般经验法则是使用不超过 2-3 种不同的字体。在 WHSR，我们整个网站仅使用一种字体类型。
2.3注意字体配对
字体应该互相补充，而不是互相竞争。使用字体配对工具来查找可以很好地配合的字体。
2.4行与行之间使用足够的间距（行高）以提高可读性
建议正文文本的行高至少为 1.5，并且可以根据字体大小和类型进行调整。适当的行高有助于防止文本显得局促或混乱——这使读者更容易浏览并快速掌握内容的想法。
2.5避免动画文本
我们不再生活在 90 年代。动画文本并不酷。此外，它们可能会分散您的注意力，并使您的内容难以阅读。相反，应谨慎且有策略地使用动画来吸引人们对重要信息的注意。
例如，您可以使用动画突出显示号召性用语按钮或显示页面上的隐藏内容。
使用动画时，一般的经验法则是它不会影响内容的可读性或可访问性。
2.6尽量减少全部大写的使用
所有大写句子——无论是正文还是标题，都可能难以阅读。如果您需要强调一点 – 考虑使用粗体或斜体字体样式，或对比色背景。
2.7在不同的设备和屏幕尺寸上测试你的排版
在不同设备上测试排版有助于识别任何用户体验问题或设计不一致。确保字体大小、行高以及其他设计元素针对小屏幕和大屏幕进行相应调整，以便您的网站易于导航和理解。
不要害怕尝试不同的字体、大小和布局。与用户一起测试设计，并根据网络分析数据（页面停留时间、跳出率等）及其反馈进行迭代。
有用的版式工具和资源
以下是一些有用的网站和工具，可以帮助您为网站选择版式：
- Google Fonts ：免费的网络友好字体集合，可以轻松集成到您的网站中。
- FontPair.co：适用于所有类型设计的免费字体和字体配对库。
- Fonts.com：该网站提供大量专业设计的字体供网络和印刷使用。
- Font Squirrel：免费字体资源，提供多种高质量字体供商业和个人使用。
- Font Sprint Matcherator：一款免费的字体查找工具，可帮助从上传的图像中识别字体类型。
- DaFont：一个流行的网站，提供大量可用于个人和商业项目的免费字体选择。
- FontSpace：另一个免费字体集合，为个人和商业用途提供多种高质量字体选择。
- Fontanello：一种浏览器扩展，可让您通过右键单击文本来显示文本的基本排版样式。
总结
网站版式是网页设计的一个重要方面，可以极大地影响网站的可读性、易读性和整体用户体验。通过了解排版的基础知识，您可以创建更有效、更有吸引力的网站。