设计师了解印刷知识_软件开发人员的印刷术基础知识和最佳实践

最新推荐文章于 2024-08-11 20:00:32 发布

吴雄辉

最新推荐文章于 2024-08-11 20:00:32 发布

阅读量264

点赞数

文章标签： java

原文链接：https://medium.com/@ZeanQin/typography-basics-and-best-practices-for-software-developers-2867679792a0

版权

设计师了解印刷知识

This article was first published at https://zean.be/articles/typography-basics-and-best-practices

本文最初发表在https://zean.be/articles/typography-basics-and-best-practices

Typography is about shaping and laying out the texts on your website to create a pleasant user experience. Web design is 95% typography. And it’s essential for website developers to know the basics and some common practices.

排版是关于在您的网站上整形和布置文本以创建令人愉悦的用户体验。网页设计是95％的版式。对于网站开发人员而言，了解基本知识和一些常见做法至关重要。

There’s a lot more jargon and subjectivity in Typography than in other areas. This article is intended as a concise and practical guide for software developers on choosing/using custom fonts and laying out the texts nicely and comfortably. It covers the basics to get you most of the way there.

印刷术比其他领域有更多的行话和主观性。本文旨在为软件开发人员提供简洁实用的指南，帮助他们选择/使用自定义字体，并轻松舒适地布置文本。它涵盖了使您获得最大收益的基础知识。

基本 (Basics)

Let’s start with some basic terms and the common categories of fonts.

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

1.字体与字体 (1. Typeface vs. Font)

“Typeface” and “Font” mean different things,

“字体”和“字体”的含义不同，

typeface is the design (e.g. shape) of a collection of letters, numbers and symbols (also called glyphs), whereas
字体是字母，数字和符号(也称为字形)的集合的设计(例如形状)，而
font is a specific size, weight, or style (e.g. regular, bold, italic) of a typeface.
字体是字体的特定大小，粗细或样式(例如，常规，粗体，斜体)。

Most of the time people use them interchangeably. But hey, we’re trying to look professional here ;-).

人们大多数时候可以互换使用它们。但是，嘿，我们在这里看起来很专业；-)。

2.常用字体类别 (2. Common Font Categories)

Typefaces come in all different shapes, and there is no single classification system. Below are a few of the most commonly seen categories.

字体具有各种不同的形状，并且没有单一的分类系统。以下是一些最常见的类别。

2.1 Serif

2.1衬线

A “serif” is a small stroke attached to the ends of letters, giving them a traditional feel. The “serif” category includes a few sub-categories such as Old Style, Classical, Neo-Classical, Transitional, Clarendon, etc. These typefaces are mostly used in books and newspapers.

“ serif”是附着在字母末端的小笔画，给人以传统的感觉。 “ serif”类别包括一些子类别，例如Old Style，Classical，Neo-Classical，Transitional，Clarendon等。这些字体主要用于书籍和报纸。

Below is what the “Caslon” font (in the Old Style subcategory) looks like. Notice the small feet present at the tops and bottoms of each letter.

下面是“ Caslon”字体(在Old Style子类别中)的外观。请注意每个字母顶部和底部的小脚。

You can see the top 10 most popular serif fonts here.

您可以在此处查看最流行的10种衬线字体。

2.2 Sans Serif

2.2无衬线

“Sans” comes from the French “without” and as the name states — sans-serif typefaces don’t have these extra strokes, giving them a smooth, modern feel. It includes humanist, geometric and grotesk etc. as sub-categories.

“ Sans”来自法语“ without”，顾名思义，sans-serif字体没有这些多余的笔触，使它们具有光滑，现代的感觉。它包括人文主义，几何学和格罗特斯克等子类。

Below is the font called “Futura” in the Sans Serif category. Again, notice the clean and straight lines, compared to the serif fonts.

下面是Sans Serif类别中的名为“ Futura”的字体。再次注意，与衬线字体相比，线条要干净整洁。

You can see the top 10 most popular sans serif fonts here.

您可以在此处查看十大最受欢迎的sans serif字体。

2.3 Monospace

2.3等宽

Monospaced typefaces are non-proportional — every glyph takes up the exact same space. It’s possible to arrange them into visual structures. And your code editor probably uses a monospace font.

等宽字体是非比例字体的-每个字形都占用完全相同的空间。可以将它们排列成视觉结构。而且您的代码编辑器可能使用等宽字体。

Below is the “Courier” font which is a monospace font.

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

You can see the top 10 most popular monospace fonts here.

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

3.“网络安全”字体与自定义字体 (3. “Web safe” Fonts vs Custom Fonts)

A font is “web safe” if most computers have it installed already, and these computers don’t have to download it separately when visiting your site. Examples include Arial, Times New Roman, Courier, Georgia, Verdana and more.

如果大多数计算机已经安装了字体，则该字体为“网络安全”，并且这些计算机在访问您的网站时无需单独下载。例子包括宋体，宋体，快递，格鲁吉亚，宋体和更多。

A website can declare a custom font as a resource, just like CSS, images or JavaScripts. And the visiting browser will download the font and apply it to the texts on the website.

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

使用字体 (Using fonts)

You can apply a font by using the “font-family” attribute with the following syntax in CSS.

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

body {
  font-family: 'custom-font', fallback1, fallback2;
}

Where is the custom-font coming from? Well, it could be from either your OS if you have it installed (e.g. Segoe UI on Windows, or Roboto on Android), or a third party such as Google Fonts, Adobe Fonts etc. In the later case, you most likely need to tell the browser to download it by including the <link> tag in the head of your page, like below.

custom-font来自哪里？好吧，它可能来自您的操作系统(如果已安装)(例如Windows上的Segoe UI或Android上的Roboto )或第三方(例如Google字体， Adobe字体等)。在后一种情况下，您很可能需要通过在页面head包含<link>标记，告诉浏览器下载它，如下所示。

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

无样式文字闪烁 (Flash of Unstyled Text)

In the case that a custom font used by a website is not available on the visiting computer, it needs to be transferred across the wire. This takes time! The browser will use a fallback font in the font stack until the custom font is loaded. This can cause the flash of unstyled text (FOUT).

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

As an example, suppose you had the font stack below,

举例来说，假设您下面有字体栈，

body {
  font-family: Merriweather, Georgia;
}

and the font “Merriweather” needs to be downloaded by the browser, you could have the texts to flash like below after the page is loaded.

并且需要通过浏览器下载字体“ Merriweather”，页面加载后，您可以像下面那样闪烁文本。

Some common approaches to mitigate FOUT include,

减轻FOUT的一些常见方法包括：

using a third party (e.g. Google Fonts, Adobe Fonts etc.) to optimise the font files and deliver them via a CDN,
使用第三方(例如Google字体， Adobe字体等)优化字体文件并通过CDN交付它们，
transforming your font files using tools like Transfonter,
使用Transfonter之类的工具来转换字体文件，
picking a fallback font that’s similar to the custom font you want to use with tools like Font style matcher.
选择与您要与诸如字体样式匹配器之类的工具使用的自定义字体相似的后备字体。

本机字体堆栈 (Native font stack)

A “native font stack” allows for optimum text rendering on every device and OS with zero latency. For example, Bootstrap 4 uses the following native font stack by default,

“本机字体堆栈”允许在每个设备和OS上以零延迟实现最佳的文本呈现。例如，默认情况下，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;

And you can find more system font stacks here.

您可以在此处找到更多的系统字体堆栈。

最佳实践 (Best Practices)

I’ve listed some of the practices that I follow in choosing font size, heading size, line height, letter spacing and how many characters should be included in one line.

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

1.字体大小 (1. Font sizing)

Sizing in CSS can be specified in either absolute units (think px) or relative units (e.g. em). The size of an element specified in absolute units doesn't change, while the size of an element specified in relative units depends on the size of other elements on the page.

CSS的大小可以以绝对单位(认为px )或相对单位(例如em )指定。以绝对单位指定的元素的大小不会更改，而以相对单位指定的元素的大小取决于页面上其他元素的大小。

You should avoid using absolute units like px, and instead use relative units like em as much as possible.

您应避免使用px等绝对单位，而应尽可能使用em等相对单位。

Tpx unit should be to serve as the foundation of a type system based on relative units. In other words, it’s an absolute value that a relative unit can point to in order to define its own size relative to that value.

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

Fun fact, the px unit doesn't actually have anything to do with screen pixels - it's just a poorly chosen name. It's actually an non-linear angular measurement. And this is why you can actually specify pixels in decimals such as 12.4px.

有趣的是， px单位实际上与屏幕像素没有任何关系-它只是选择不当的名称。 它实际上是一个非线性角度测量。 这就是为什么您可以实际指定小数点的像素，例如12.4px 。

As an example, most desktop browsers usually sets the texts inside the body tag to 16px by default. You can use 2em on an element if you want it to be twice as big as the body text.

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

When setting the size of some texts, try to think in relative units — “I want element A to be twice as big as element B”. Instead of thinking “I want element A to be 20px".

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

2.标题大小 (2. Heading sizing)

The size of headings are usually expressed in relative units. And it’s common to define 6 levels of headings.

标题的大小通常以相对单位表示。定义6个级别的标题是很常见的。

Bootstrap 4 defines the size of headings as below,

引导程序4定义了标题的大小，如下所示，

Another popular approach is to define a modular scale to define the heading sizes. Basically, it means specifying a root number and a ratio, and ratios are multiplied by the base to produce a scale of numbers that is proportionally related. For example, the following scale uses base 1em and the ratio 1.5. You can use this tool to create your custom scale.

另一种流行的方法是定义模块化比例尺，以定义航向尺寸。基本上，这意味着指定根数和比率，比率乘以基数以产生成比例相关的数字比例。例如，以下标度使用基数1em和比率1.5 。您可以使用此工具创建自定义比例。

3.线高(3. Line height)

Line height can be specified in CSS using the line-height property like below,

可以使用CSS的line-height属性在CSS中指定line-height如下所示：

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

When you don’t put a unit, it’s relative to the computed size of the text. For example, if the text is 12px (or 0.75em in a browser with default font size of 16px) in size, the line height will be 18px.

当您不放置单位时，它与文本的计算大小有关。例如，如果文本大小为12px (或在默认字体大小为16px的浏览器中为0.75em )，则行高将为18px 。

The browser sets the line height to 1.2 by default, but it’s usually too tight. And a line height of 1.5 makes the viewing experience a lot better. See image below, the line height on the left is 1.2 while the line height on the right is 1.5.

浏览器默认将行高设置为1.2，但是通常太紧了。 1.5的线高使观看体验更好。参见下图，左侧的行高为1.2，而右侧的行高为1.5。

4.字母间距 (4. Letter spacing)

This is used a lot less compared to line-height or font-size. In general, we only need to specify custom spacing for texts that are either too big or too small. And you can do it in CSS using the letter-spacing property. Similar to font-size, it's best to be specified in relative units such as em.

与line-height或font-size相比，它的使用量要少得多。通常，我们只需要为太大或太小的文本指定自定义间距。您可以使用letter-spacing属性在CSS中完成此操作。与font-size相似，最好以相对单位(例如em指定。

p {
  letter-spacing: 1em;
}

5.线长 (5. Length of line)

The general consensus is that lines should contain 60 to 70 characters for best reading experience, especially for text heavy pages.

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

And you can specify the line length in CSS using the following property,

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

p {
  width: 50ch;
}

The unit ch represents the width, or more precisely the advance measure, of the glyph "0". And 50ch generally results in line width to be 60 to 70 characters in length. A lot of text heavy sites, such as Medium.com, or even the Google search result page, put a similar limit on the number of characters in a line.

单位ch表示字形“ 0”的宽度，或更准确地，表示提前量度。 50ch通常导致线宽为60至70个字符的长度。许多文字密集型网站，例如Medium.com，甚至Google搜索结果页面，都对行中的字符数设置了类似的限制。

That’s all!

就这样！

翻译自: https://medium.com/@ZeanQin/typography-basics-and-best-practices-for-software-developers-2867679792a0

设计师了解印刷知识

吴雄辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计师了解印刷知识_软件开发人员的印刷术基础知识和最佳实践

设计师了解印刷知识This article was first published at https://zean.be/articles/typography-basics-and-best-practices本文最初发表在https://zean.be/articles/typography-basics-and-best-practicesTypography is about shapin...
复制链接

扫一扫