软件开发人员的排版基础知识和最佳实践

2025-06-10

软件开发人员的排版基础知识和最佳实践

排版是关于塑造和排列网站上的文本，以创造愉悦的用户体验。网页设计95%都与排版有关。对于网站开发人员来说，了解排版的基础知识和一些常见的做法至关重要。

与其他领域相比，字体排印的术语和主观性要多得多。本文旨在为软件开发者提供一份简明实用的指南，帮助他们选择/使用自定义字体，并设计出美观舒适的文本布局。它涵盖了基本知识，助您顺利完成大部分工作。

基础知识

让我们从一些基本术语和常见的字体类别开始。

1. 字体与字形

“字体” 和 “字体” 的意思不同，

  • 字体是字母、数字和符号（也称为字形）集合的设计（例如形状），而
  • 字体是字体的特定大小、粗细或样式（例如常规、粗体、斜体）。

大多数时候，人们会交替使用它们。不过，我们想在这里表现得更专业一些 ;-)。

2. 常见字体类别

字体形态各异，没有统一的分类体系。以下列出一些最常见的类别。

2.1 衬线

“衬线”是指附加在字母末端的细小笔画，赋予字母传统的感觉。“衬线”类别包含几个子类别，例如旧式、古典、新古典、过渡、克拉伦登等。这些字体主要用于书籍和报纸。

以下是“Caslon”字体（属于“Old Style”子类别）的外观。请注意每个字母顶部和底部的小脚。

卡斯隆

您可以在此处看到十大最受欢迎的衬线字体。

2.2 无衬线字体

“Sans”源自法语“没有”，顾名思义，无衬线字体没有多余的笔画，给人一种流畅、现代的感觉。它包含人文主义、几何和怪诞等子类别。

下面是无衬线字体类别中名为“Futura”的字体。与衬线字体相比，再次注意其干净笔直的线条。

富图拉

您可以在此处看到十大最受欢迎的无衬线字体。

2.3 等宽字体

等宽字体不按比例排列——每个字形占用完全相同的空间。可以将它们排列成视觉结构。你的代码编辑器可能就使用等宽字体。

下面是“Courier”字体，它是一种等宽字体。

导游

您可以在此处看到十大最受欢迎的等宽字体。

3.“网络安全”字体 vs 自定义字体

如果大多数计算机都已安装某种字体，并且这些计算机在访问您的网站时无需单独下载，则该字体属于“网络安全”字体。例如，Arial、Times New Roman、Courier、Georgia、Verdana等。

网站可以将自定义字体声明为资源，就像 CSS、图片或 JavaScript 一样。访问网站的浏览器会下载该字体并将其应用于网站上的文本。

使用字体

您可以使用 CSS 中的以下语法使用“font-family”属性来应用字体。

body {
  font-family: 'custom-font', fallback1, fallback2;
}
Enter fullscreen mode Exit fullscreen mode

那么，这些字体是custom-font从哪里来的呢？嗯，它可能来自你安装了的操作系统（例如Segoe UIWindows 或RobotoAndroid），也可能来自第三方字体，例如Google Fonts、Adobe Fonts<link>等。在后一种情况下，你很可能需要在head页面中包含标签来告诉浏览器下载它，如下所示。

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
  </head>
</html>
Enter fullscreen mode Exit fullscreen mode

无样式文本的闪烁

如果网站使用的自定义字体在访问的计算机上不可用，则需要通过网络传输。这需要时间！浏览器会使用字体堆栈中的后备字体，直到自定义字体加载完成。这可能会导致无样式文本闪烁 (FOUT)。

举个例子，假设你有下面的字体堆栈，

body {
  font-family: Merriweather, Georgia;
}
Enter fullscreen mode Exit fullscreen mode

并且字体“Merriweather”需要通过浏览器下载，页面加载后，文字就会像下面这样闪烁。

无样式文本的闪烁

缓解 FOUT 的一些常见方法包括：

原生字体堆栈

“原生字体堆栈” 允许在每种设备和操作系统上实现最佳的文本渲染，并且零延迟。例如，Bootstrap 4 默认使用以下原生字体堆栈：

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
Enter fullscreen mode Exit fullscreen mode

您可以在这里找到更多系统字体堆栈。

最佳实践

我列出了我在选择字体大小、标题大小、行高、字母间距以及一行中应包含多少个字符时遵循的一些做法。

1. 字体大小

CSS 中的大小可以用绝对单位（例如px）或相对单位（例如em）来指定。使用绝对单位指定的元素大小不会改变，而使用相对单位指定的元素大小则取决于页面上其他元素的大小。

您应该避免使用像这样的绝对单位px，而应em尽可能使用像这样的相对单位。

单位的用途px应该是作为基于相对单位的类型系统的基础。换句话说，它是一个相对单位可以指向的绝对值，以便定义其相对于该绝对值的大小。

有趣的是，这个px单位实际上与屏幕像素没有任何关系——它只是一个糟糕的名字。它实际上是一个非线性角度测量。这就是为什么你可以用小数来指定像素，例如12.4px……

例如，大多数桌面浏览器通常将body标签内的文本设置为默认大小。如果您希望元素文本的大小是正文的两倍，16px则可以在元素上使用。2em

设置某些文本的大小时，请尝试使用相对单位来思考 - “我希望元素 A 是元素 B 的两倍大”。而不是思考“我希望元素 A 是20px”。

2. 标题大小

标题的大小通常用相对单位来表示。通常定义6级标题。

Bootstrap 4 定义标题的大小如下，

Bootstrap 标题

另一种常用的方法是定义一个模块化比例尺来定义标题大小。简单来说，它指的是指定一个根号和一个比率，然后将比率乘以底数，得到一个按比例排列的数值比例尺。例如，以下比例尺使用了底数1em和比率1.5。您可以使用此工具创建自定义比例尺。

模块化规模

3. 行高

line-height可以使用如下属性在 CSS 中指定行高，

p {
  line-height: 1.5; # Note - better to not use any unit here.
}
Enter fullscreen mode Exit fullscreen mode

如果不指定单位，则行高是相对于文本的计算大小。例如，如果文本大小为12px（或0.75em在默认字体大小为 的浏览器中16px），则行高为18px。

浏览器默认将行高设置为 1.2，但这通常太窄了。而 1.5 的行高会让观看体验好很多。如下图所示，左侧的行高为 1.2，右侧的行高为 1.5。

替代文本

4. 字母间距

line-height与或相比，这个用法少得多font-size。通常，我们只需要为过大或过小的文本指定自定义间距。你可以在 CSS 中使用letter-spacing属性来实现。与 类似font-size，最好使用相对单位，例如em。

p {
  letter-spacing: 1em;
}
Enter fullscreen mode Exit fullscreen mode

5. 线的长度

普遍的共识是，为了获得最佳阅读体验，每行应该包含 60 到 70 个字符，尤其是对于文本较多的页面。

您可以使用以下属性在 CSS 中指定行长度，

p {
  width: 50ch;
}
Enter fullscreen mode Exit fullscreen mode

该单位ch 表示字形“0”的宽度，或者更准确地说是前进量。50ch通常，行宽为 60 到 70 个字符。许多文本量很大的网站，例如 Medium.com，甚至 Google 搜索结果页面，都对每行的字符数设置了类似的限制。

就这样。如果你有任何反馈，请在评论区告诉我！

鏂囩珷鏉ユ簮锛�https://dev.to/zeanqin/typography-basics-and-best-practices-for-software-developers-542n
Devto 翻译
PREV
使用 HTML、CSS 和 JavaScript 构建登录系统
NEXT
API 如何工作？