Text is an important, if not the most important element in a design. It conveys the information that the user needs. How can we make sure the text in our design is readable and accessible? How to select the right type?

文本是设计中的重要元素，即使不是最重要的元素。 它传达用户需要的信息。 我们如何确保设计中的文本可读易读？ 如何选择正确的类型？

Ok, let’s start with the basics: What is typography?

好，让我们从基础开始： 什么是排版？

Typography describes the arrangement of type to make written language legible, readable and appealing. The arrangement of the type includes the selection of fonts, the font size, line lengths, line-spacing, letter-spacing and kerning.

印刷术描述字体的排列方式，以使书面语言清晰，可读和吸引人。 类型的安排包括字体的选择，字体大小，行长，行间距，字母间距和字距。

版式要素 (Elements of typography)

Typeface and fontA typeface is a design of type, while the font is the variation in a particular size and weight (such as extra bold, bold, regular, light, italic, condensed, extended).

字体和字体字体是一种类型的设计，而字体是特定大小和粗细的变体(例如，额外的粗体，粗体，常规，浅色，斜体，压缩，扩展)。

Mean lineThe mean line indicates the top of a character’s body (or the top of the x-height).

中间线中间线指示角色身体的顶部(或x高度的顶部)。

BaselineThe baseline is the line on which most of the letters are placed.

基准线基准线是放置大多数字母的线。

x-HeightThe distance between the baseline and the top of the lower-case letters is called x-Height.

x-Height基线与小写字母顶部之间的距离称为x-Height。

KerningKerning adjusts the spacing between individual letters to achieve a visually appealing result.

字距调整字距调整可调整各个字母之间的间距，从而获得视觉上吸引人的效果。

TrackingTracking, or letter-spacing, is the consistent adjustment of the optical distance between letters.

跟踪跟踪或字母间距是对字母之间的光学距离的一致调整。

LeadingLeading (or line-height) is the spacing between two lines of text. Well-designed leading makes the text more legible because it helps the eye to go from one text line to the next one. The standard leading is 120% the point size of the font, but it can vary according to the typeface.

Leading Leading(或行高)是两行文本之间的间距。 精心设计的引线使文字更清晰易读，因为它可以帮助眼睛从一个文字行转到下一个文字行。 标准的前导是字体的磅值的120％，但是它可以根据字体变化。

Negative spaceIn typography, negative space describes the area between individual text elements e.g. paragraphs or different sections of text. When used well, the negative space can greatly improve the readability of the copy.

负空格在排版中，负空格表示各个文本元素(例如，段落或文本的不同部分)之间的区域。 如果使用得当，负空间可以极大地提高副本的可读性。

不同的字体分类 (The different typeface classifications)

SerifSerif typefaces are often used for printed materials, but they can also be used for digital products.

衬线衬线字体通常用于印刷材料，但也可以用于数字产品。

This typeface can be used for body text and headlines.

该字体可用于正文和标题。

Sans SerifSans serif typefaces have good readability on displays, especially on low-resolution screens.

Sans Serif Sans Serif字体在显示器上，特别是在低分辨率屏幕上，具有很好的可读性。

Sans Serif can be used for body text and headlines.

Sans Serif可用于正文和标题。

MonospaceEvery character has the same width. Often used in programming.

等宽字符每个字符具有相同的宽度。 常用于编程。

For body text, it’s not ideal (besides code), but it can be used for headlines.

对于正文，它不是理想的代码(除了代码)，但可以用作标题。

DisplayDisplay types are made for type at large sizes. Most effect typefaces are display types.

显示显示类型适用于大尺寸的类型。 大多数效果字体是显示类型。

Shouldn’t be used for body text, but can be used for headlines (It’s very important to pay attention to the legibility).

不应用于正文，而可以用作标题(注意可读性非常重要)。

ScriptScript typefaces mimic calligraphy or handwriting.

脚本脚本字体模仿书法或手写体。

Shouldn’t be used for body text, but can be used for headlines (Same like for Display typefaces, it’s very important to pay attention to the legibility).

不应用于正文，而可以用于标题(与Display字体相同，请务必注意易读性)。

Cameron Chapman from Toptal created a very helpful overview of the different typeface classifications:https://www.toptal.com/designers/typography/typeface-classification

Toptal的Cameron Chapman创建了非常有用的不同字体分类概述： https ://www.toptal.com/designers/typography/typeface-classification

最佳实践 (Best practices)

Let’s take a glance at the bigger brands. What kind of typography are they using?

让我们看一下更大的品牌。 他们使用哪种字体？

Airbnb

爱彼迎

Uber

优步

Dropbox

投寄箱

Evernote

印象笔记

Intercom

对讲机

Spotify

Spotify

Basecamp

大本营

Slack

松弛

They all use sans serif, either geometric or humanistic style. Some brands like Basecamp and Intercom or Airbnb and Spotify use the same typeface, but a different variation. Every typeface has very good readability. They use a bolder variation of the typeface for their headlines to ensure a good contrast to subheadlines and body text.

它们都使用无衬线字体，无论是几何风格还是人文风格。 一些品牌(如Basecamp和Intercom或Airbnb和Spotify)使用相同的字体，但使用不同的字体。 每个字体都有很好的可读性。 他们在标题上使用了较粗体的字体，以确保与副标题和正文的良好对比。

有关在用户界面中更好地排版的一些准则 (Some guidelines for better typography in user interfaces)

Keep the number of used fonts at a minimumUsing more than 3 different fonts makes a website look unstructured and unprofessional.

保持使用的字体数量最少使用三种以上的不同字体会使网站看起来结构混乱且不专业。

Good contrast and the choice of the right color is very important for legibility and perception.A contrast that is too low harms the legibility of the text. A contrast that is too high is also not good. The right balance must be found here.

良好的对比度和正确的颜色选择对于提高可读性和感知力非常重要。 太低的对比度会损害文本的可读性。 对比度太高也不好。 必须在此处找到正确的平衡。

Make sure your text and highlighted elements are recognizable for colorblind people, too. An example: If you use grey text and highlighted text in red, they may see no difference.

确保色盲人也可以识别您的文本和突出显示的元素。 例如：如果您使用灰色文本和红色突出显示的文本，则它们可能没有区别。

Use as few colors as possible for your content (less than 3).Text that is too strongly designed can be misunderstood or viewed as a different element (as advertising or something similar). Also be careful with the color blue, because blue is often used for links.

为您的内容使用尽可能少的颜色(少于3种)。 设计过于严格的文本可能会被误解或被视为不同的元素(如广告或类似内容)。 也要注意蓝色，因为蓝色通常用于链接。

Sans serif fonts are better for text on screens than serifs (which are better for print).Sans serif typefaces are often the best choice for digital devices, but these are rules of thumbs and no laws. There are great serif fonts that are also suitable for body text.

与衬线(较适合打印)相比，Sans Serif字体更适合屏幕上的文本。 无衬线字体通常是数字设备的最佳选择，但这是经验法则，没有法律规定。 有很棒的衬线字体，也适合于正文。

Pay attention to your line spaceFor your line space aim for about 140%-180% of the text size for optimal legibility.

注意您的行距为了获得最佳的可读性，行距的目标是文本大小的140％-180％。

Reduce the length of your textIf you have long text lines, it can confuse the eye, so limit your line length to 70–80 characters.

减少文本的长度如果文本行太长，可能会使眼睛感到困惑，因此请将行长限制为70-80个字符。

Small text needs more spacingThe smaller fonts are more difficult to read and so the letters need more space to be better recognizable.

小文本需要更大的间距小字体更难以阅读，因此字母需要更多空间才能更好地识别。

Content should always use mixed capitalization.The user will have difficulties with reading the content if all the text is upper or lower case.

内容应始终使用大小写混合。 如果所有文本均为大写或小写，用户将难以阅读内容。

Pay attention to your character spacingIs it too wide or too narrow, it will affect the legibility of the text.

注意您的字符间距太宽还是太窄，都会影响文本的可读性。

Create a good hierarchy for your text elementsStarting with the base size of your body text, you define the typographic scale for all other text elements (headings, subheadings and so on). A nice tool for that could be https://type-scale.com/.

为文本元素创建良好的层次结构从主体文本的基本大小开始，为所有其他文本元素(标题，副标题等)定义印刷比例。 一个不错的工具可以是https://type-scale.com/ 。

Like most elements in digital products, the functionality should be recognizable, interactions simple and the experience user-friendly and pleasant. Text that is difficult to read will harm the customer experience, so make sure to do it right.

像数字产品中的大多数元素一样，功能应该是可识别的，简单的交互以及用户友好和愉快的体验。 难以阅读的文字会损害客户体验，因此请确保正确执行。

Three criteria should be considered when choosing the typeface for your product:

选择产品的字体时，应考虑三个标准：

易读性 (Legibility)

Individual letters and punctuation marks should be recognizable.This is where the elements of kerning and line spacing come into play.

各个字母和标点符号应该是可识别的。 这是字距调整和行距元素起作用的地方。

可读性 (Readability)

The overall picture of the text is important here. Is it possible to read the text without a struggle?

文字的整体图片在这里很重要。 是否可以毫不费力地阅读文本？

多功能性 (Versatility)

A visual hierarchy on your website is essential. Make sure your chosen typeface will have different font weights and styles.

网站上的视觉层次结构至关重要。 确保您选择的字体具有不同的字体粗细和样式。

All of that are guidelines, no rules. It doesn’t mean you have to use sans serif and geometric fonts only in your next project. Medium is using a serif typeface, and as you can see it works great. The type should match the brand or product. If the user doesn’t think much about the typography at all and simply has a pleasant reading experience, then you’ve done everything right. ;)

所有这些都是准则，没有规则。 这并不意味着您只需要在下一个项目中使用无衬线和几何字体。 Medium使用衬线字体，如您所见，它的效果很好。 类型应与品牌或产品相匹配。 如果用户根本不考虑版式，只是拥有愉快的阅读体验，那么您就做对了所有事情。 ;)