态度决定一切细节决定成败

One of the most important skills you can learn as a designer is how to choose type. This is because text is one of the primary ways designers can communicate with users. Typography can make or break a design.

作为设计师，您可以学习的最重要技能之一就是如何选择类型。 这是因为文本是设计人员与用户通信的主要方式之一。 字体可以设计或破坏设计。

There’s a beauty and complexity to typography. Some people devote their entire careers to type. Thankfully, their work is well documented, so we have tons of online resources for typography.

排版具有美感和复杂性。 有些人全职投入打字。 值得庆幸的是，他们的工作有据可查，因此我们拥有大量的在线排版资源。

This article is designed to serve as a starting point for helping you learn how to choose type for your designs. It will encourage you to explore fonts and font combinations beyond those you’re familiar with.

本文旨在用作帮助您学习如何为设计选择类型的起点。 它将鼓励您探索您不熟悉的字体和字体组合。

确定你的目的 (Identify your purpose)

Before you do anything else, first identify the purpose of your design. What information do you want to convey? What is the medium for your design?

在执行其他任何操作之前，首先要确定设计的目的。 您想传达什么信息？ 设计的媒介是什么？

Good design aligns its typography with its purpose. This is because typography is key to setting mood, tone, and style in your designs.

好的设计使其版式与其用途保持一致。 这是因为排版是设置设计中的气氛，色调和样式的关键。

For example, if you are designing a greeting card that’s illustration heavy, choose a font that fits the style of your illustration. Harmonize your type with the rest of your design.

例如，如果您设计的贺卡的插图很重，请选择适合插图风格的字体。 与您的其余设计协调您的类型。

If you’re designing an image-driven landing page, choose a simple font that doesn’t detract from your images. Use type as a way to emphasize information to communicate meaning.

如果要设计图像驱动的登录页面，请选择一种不会影响图像的简单字体。 使用类型作为强调信息传达含义的方式。

确定您的受众 (Identify your audience)

After determining the purpose of your design, identify your audience. This step is crucial because age and interest will influence your font options.

确定设计目的之后，确定您的受众。 此步骤至关重要，因为年龄和兴趣会影响您的字体选项。

After clarifying the purpose of your design, identify your audience. This step is crucial because information about your users such as age, interests, and cultural upbringing could influence the decisions you make for your type.

在阐明设计目的之后，确定您的受众。 此步骤至关重要，因为有关用户的信息(例如年龄，兴趣和文化背景)可能会影响您为类型做出的决定。

For example, some fonts are more appropriate for children. When learning to read, children need highly legible fonts with generous letter shapes. A good example of this is Sassoon Primary. Sassoon Primary was developed by Rosemary Sassoon and based on her research into what kind of letters children found easy to read.

例如，某些字体更适合儿童使用。 在学习阅读时，孩子们需要字体清晰，字体清晰的字体。 沙宣小学就是一个很好的例子。 Sassoon Primary由Rosemary Sassoon开发，并基于她对儿童发现易于阅读的字母进行的研究。

Other fonts are more appropriate for seniors. Senior-friendly fonts use readable sizes, high contrasting colors, and avoid scripts and decorative styles.

其他字体更适合老年人。 友好的高级字体使用可读的大小，高对比度的颜色，并避免使用脚本和装饰风格。

When choosing type, take into account your audience and their needs. Simply put, empathize with your users.

选择类型时，请考虑您的听众及其需求。 简而言之，请同情您的用户 。

寻找灵感 (Look for inspiration)

Look at the work of other designers. Try understand how they made their decisions for type.

看看其他设计师的作品。 尝试了解他们如何做出类型决定。

字体灵感 (Font Inspiration)

For font inspiration, The 100 Best Free Fonts by CreativeBloq is a great article to put you in the right mindset for choosing type. In the article, CreativeBloq explains the motivations behind each font.

对于字体灵感，CreativeBloq 的100种最佳免费字体是一篇很棒的文章，可让您正确选择字体 。 在本文中，CreativeBloq解释了每种字体背后的动机。

Another useful resource is 100 Greatest Free Fonts Collection for 2015 by Awwwards.

另一个有用的资源是Awwwards的2015年100种最伟大的免费字体集合 。

Invision also compiled a giant repo of typography resources. You’ll find lots of sources for inspiration there.

Invision还编辑了一个巨大的版式资源库 。 您会在那里找到许多启发灵感的资源。

For inspiration from actual websites, check out Typ.io. The site curates font inspiration from around the web. In addition, the site provides CSS font definitions at the bottom of each inspiration sample.

要从实际网站获得灵感，请查看Typ.io。 该网站从网络上收集字体灵感。 此外，该网站在每个灵感示例的底部都提供CSS字体定义。

Asides from looking at dedicated font inspiration websites, visit your favorite sites and check out what fonts they use. A good tool for this is WhatTheFont. WhatTheFont is a Chrome extension that lets you inspect web fonts by hovering over them.

除了查看专用的字体灵感网站之外，还可以访问您喜欢的网站并查看它们使用什么字体。 WhatTheFont是一个很好的工具。 WhatTheFont是一个Chrome扩展程序，可让您将鼠标悬停在其上方来检查它们。

配对灵感 (Pairing Inspiration)

Beyond just fonts, also look at font pairing inspiration. Font pairing is just as important as the fonts themselves. Good font pairing helps establish visual hierarchy and improve the readability of your designs.

除了字体之外，还请查看字体配对的灵感。 字体配对与字体本身一样重要。 好的字体配对有助于建立视觉层次并提高设计的可读性。

For inspiration, start with Typewolf. Typewolf curates font pairing inspiration from different sites. Beyond that, they also have font recommendations and in-depth typography guides. It’s a treasure trove for typographers.

为了获得灵感，请从Typewolf开始。 Typewolf策划了来自不同站点的字体配对灵感。 除此之外，他们还提供字体建议和深入的版式指南。 这是印刷者的宝库。

FontPair also curates font pairing inspiration, specifically for Google Fonts. You can sort by type style combinations such as sans-serif and serif, or serif and serif.

FontPair还会策划字体配对的灵感，特别是针对Google字体 。 您可以按类型样式组合(如sans-serif和serif或serif和serif)进行排序。

Lastly, there are tons of font pairing collections created by designers online. For example Typography: Google Fonts Combinations and Typography: Google Fonts Combinations Volume 2. Just search “font pairing” on sites like Behance and Dribbble.

最后，设计师在线创建了大量的字体配对集合。 例如 字体：Google字体组合和字体： Google字体组合第2卷 。 只需在Behance和Dribbble等网站上搜索“字体配对”。

选择字体 (Choose your fonts)

Armed with research and inspiration, you are ready to choose your type. When it comes to choosing type, keep the following principles in mind: readability, legibility, and purpose.

有了研究和灵感，您就可以选择自己的类型。 在选择类型时，请牢记以下原则： 可读性，易读性和目的 。

Choose fonts that are conventional and easy to read. Avoid highly decorative fonts in favor of simple and practical fonts. Also, be mindful of the purpose of a font. For example, some fonts are more suited to be headers rather than body text.

选择常规字体和易于阅读的字体。 避免使用装饰性强的字体，而推荐使用简单实用的字体。 另外，请注意字体的用途。 例如，某些字体更适合用作标题而不是正文。

For this reason, before choosing a font, research its intended purpose.

因此， 在选择字体之前 ， 请先研究其预期目的。

In terms of font pairing, keep it simple with a maximum of three different fonts. In addition, pair fonts that contrast one another. Doing so will help guide the eyes of readers, first to headers and then to body texts. You can also create visual contrast using different font sizes, colors, and weights.

就字体配对而言，最多包含三种不同的字体，以使其简单。 另外，配对字体要相互对比。 这样做将有助于引导读者的眼睛，首先是标题，然后是正文。 您还可以使用不同的字体大小，颜色和粗细来创建视觉对比。

For web fonts, you can use Google Fonts, Typekit, and Font Squirrel. Google Fonts is free, Typekit and Font Squirrel have free and paid fonts.

对于网络字体，您可以使用Google字体 ， Typekit和Font Squirrel 。 Google字体是免费的，Typekit和Font Squirrel具有免费和付费字体。

确定字体大小 (Determine font sizes)

The next step after settling on a font combination is determining sizing. A great tool for this is Modular Scale by Tim Brown, the head of typography at Adobe. Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes.

确定字体组合后的下一步是确定大小。 一个很好的工具是Adobe字体负责人Tim Brown的 Modular Scale 。 模块化比例尺是一种用于识别历史上令人愉悦的比率以创建比例尺以确定类型大小的系统。

For example, you might use a scale based on the golden ratio. Here would be your first five computed font size options:

例如，您可以使用基于黄金比率的标尺。 这是您计算的前五个字体大小选项：

Golden Ratio (1:1.618)

1.000 x 1.618     = 1.6181.618 x 1.618     = 2.6182.618 x 1.618     = 4.2364.236 x 1.618     = 6.8546.854 x 1.618     = 11.089

One issue that you might encounter is that your ratio is too large. Take a look at what happens to the later intervals of our scale based on the golden ratio.

您可能会遇到的一个问题是您的比率太大。 根据黄金比例看一下我们的规模的后续区间发生了什么。

Golden Ratio (1:1.618)

...11.089 x 1.618    = 17.94217.942 x 1.618    = 29.0329.030 x 1.618    = 46.97146.971 x 1.618    = 75.99975.999 x 1.618    = 122.966

As you can see, the intervals between numbers start to become too large. For most interfaces, you need smaller intervals. Thankfully, Modular Scale has a variety of ratios based on geometry, nature, and music.

如您所见，数字之间的间隔开始变得太大。 对于大多数接口，您需要较小的间隔。 幸运的是， 模块化比例基于几何，自然和音乐具有多种比例。

Minor Second    15:16 Major Second    8:9Minor Third     5:6Major Third     4:5...

So instead of using the golden ratio, you can use a ratios that yield smaller intervals like the Perfect Fourth.

因此，可以使用产生较小间隔的比率(例如“完美四度”)来代替黄金比率。

Perfect Fourth (3:4)

...9.969  x 1.333     = 13.28813.288 x 1.333     = 17.71317.713 x 1.333     = 23.61223.612 x 1.333     = 31.47531.475 x 1.333     = 41.95641.956 x 1.333     = 55.927

Once you have settled on a scale, you can cherry pick font sizes from your list and round them to the nearest decimal.

确定比例后，您可以从列表中挑选字体大小并将其四舍五入到最接近的小数。

Font Sizes

Header 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14px

Body: 17pxCaption: 14px

The Modular Scale method uses mathematical precision in order to generate font sizes. However, it’s only a guide. Use this method as a starting point and then adjust sizes with your eye.

Modular Scale方法使用数学精度来生成字体大小。 但是，这只是一个指南。 使用此方法作为起点，然后用眼睛调整大小。

创建排版样式指南 (Create a typography styleguide)

The last step of the process is to create a styleguide for your typography to help standardize type across your designs.

该过程的最后一步是为您的版式创建样式指南，以帮助标准化整个设计中的字体。

In programs like Sketch, you can create shared text styles to quickly insert text with styles already applied from your guideline.

在Sketch之类的程序中，您可以创建共享的文本样式，以快速插入已从准则中应用的样式的文本。

It’s during this step of the process that you can tweak and finalize your text attributes such as color, weight, and size.

在此步骤的过程中，您可以调整和确定文本属性，例如颜色，粗细和大小。

A word on color: when choosing color, take into account your color palette. Choose colors for your type that harmonize with your color palette.

颜色一词：选择颜色时，请考虑您的调色板。 选择与您的调色板相协调的颜色。

In your styleguide, make sure to at least include the following things: font definitions, font sizes, font colors, and example usages.

在样式指南中，请确保至少包括以下内容：字体定义，字体大小，字体颜色和示例用法。

Google’s Material Design typography guidelines is a good example of what to include in a styleguide. A couple of other examples includes the typography guides of Mailchimp, Apple, and Focus Labs.

Google的Material Design排版指南是样式指南中包含内容的一个很好的例子。 另外两个例子包括Mailchimp ， Apple和Focus Labs的印刷指南。

印刷术完全是关于实验的。 它既是一门科学，又是一门艺术。 (Typography is all about experimentation. It’s both a science and an art.)

I challenge you to break out of your comfort zone and explore type in your design.

我向您挑战，请您突破自己的舒适区，并探索设计的类型。

What are your favorite fonts? Leave me a note or send me a tweet on Twitter.

您最喜欢什么字体？ 给我留言或在Twitter上给我发一条推文 。

If you enjoyed this article, you might also enjoy CSS in Javascript with Aphrodite, a library by Khan Academy.

如果您喜欢本文，则还可以通过Khan Academy的库Aphrodite来使用Javascript中CSS 。

CSS in Javascript: The future of component based stylingThis week, I want to introduce you to the concept of CSS in Javascript with Aphrodite by Khan Academy. Aphrodite lets…medium.com

Java脚本中CSS：基于组件的样式的未来 这周，我想向您介绍Khan Academy的Aphrodite的Java脚本中CSS的概念。 阿芙罗狄蒂让… medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

您可以在我每周出版的Medium上找到我。 或者，您可以在Twitter上关注我，在该处我发布有关设计，前端开发和虚拟现实的无意义的杂谈。

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.

PS：如果您喜欢这篇文章，那么如果单击“？”将有很多意义。 并与朋友分享。

翻译自: https://www.freecodecamp.org/news/typography-can-make-your-design-or-break-it-7be710aadcfe/

态度决定一切细节决定成败