Typography Tutorial for Beginners: Everything You Need to Learn Typography Basics

像你们中的许多人一样，我是受过训练的营销人员，而更多的是“自己动手”的设计师。

Sure, I read through营销人员在视觉内容创建中的速成课程and learned some sweet PowerPoint and Photoshop tricks that have helped me a lot with my content marketing job. But I really wanted to take my design skills to the next level.

So I asked all my designer friends what my next step should be -- and every single one said to take a course on typography.

Why typography? Turns out that while the importance of typography is often overlooked, it plays a批判的role in strengthening your brand, creating interest in your product, and highlighting your central message. Knowing that, I decided to sign up for a typography course at the Massachusetts College of Art and Design. Couldn't hurt to learn how to identify a good font from a bad one, right?

我学到的远不止于此。我意识到，当您为社交媒体提供电子邮件，电子书或图像时，即使关注最小的类型细节也可以使世界上的所有不同。

这就是为什么我要写这篇文章:分享the most important learnings and resources with my fellow marketers.

So, what do you say? Are you ready to take your DIY design skills to the next level? Let's get started.

Click on a section header below to jump to that section:

• 什么是版式？
• Why Is Typography Important?
• Typography Definitions & Terms
• Type Classifications
• 类型家庭
• Typography Fonts: Resources & Examples

什么是版式？

Before taking this course, typography -- to me, at least -- was more the art of scrolling through a dropdown menu until I found a font that looked like it could work. But it turns out there's a lot more to it than that.

Typography isthe art and technique of arranging type,type meaning letters and characters.

请注意，这不仅仅是designof letters and characters; the arrangement of those letters and characters is just as big a part of it all. That refers to the selection of point size, line length, and spacing, both on a single line and throughout an entire page or piece of work.

图片来源：Designspiration

To understand wherethe importance of arrangementcomes in, I like to think back to Johannes Gutenberg's printing press. At one point in time, people practiced typography using printed materials -- meaning they were literally taking letters and characters and arranging them in physical space.

Today, thanks to computers, open source fonts, and scalable computer typography, it's a lot easier to arrange letters and characters. But that physical piece remains important, even in the digital sphere.

Why Is Typography Important?

Typography is absolutely everywhere. Just look at your phone, a billboard, your coffee cup, or even the different styles used in this blog post. Every font, letter, and character arrangement在确定中发挥作用how a message is conveyed.

Sure, it mightseem trivial at times, but即使是smallest of type adjustments can impact the look and feel of your work. For example, back in June,Facebooktested a new fonton its users called Geneva. While the new font was only slightly thinner and lighter than the original, Helvetica, it made a noticeable difference to some.

"The overall effect is a lighter, more modern looking block of text," explainedChris Mills for BGR.

图片来源：可混合

Same goes for whenApple changed its default font从巨大的Helvetica Neue到他们在内部开发的名为San Francisco的内部。

"The differences between Helvetica and San Francisco are subtle, even to the trained eye, but they’re there,"wrote Liz Stinson forWIRED."While still an austere sans serif, San Francisco is bolder and friendlier than Helvetica Neue. Based on the German typeface DIN, San Francisco gives characters more breathing room, which will make it easier to read on relatively tiny mobile screens. Tall and skinny, San Francisco is space-efficient, like Google’s custom typeface Roboto, which you could consider a close cousin to Apple’s font."

The takeaway here? The little detailsdo事情。

In fact,one of the only college coursesSteve Jobs took was on calligraphy and typography, which he believed played a critical role in the success of Apple. As he once saidin a Stanford University commencement speech, "If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts." Can you imagine a world where Apple products didn't have a focus on beautiful design? I certainly can't.

Once you realize how much thought goes into carefully selecting a typeface, it becomes much easier to recognize the differences between typefaces and understand why they might’ve been chosen in the first place. Take a look at some of the examples below to get a better sense of what I mean ...

图片来源：awwards

图片来源：awwards

图片来源：awwards

图片来源：awwards

Ready to move on to some typography terminology? Let's go.

Typography Definitions & Terms

Typefaces vs. Fonts

If you thought these two words were interchangeable, you're not alone. But they actually mean two different things.

Typographer, Nick Sherman, once useda great analogy解释术语“字体”和“字体”之间的差异。他建议将这些版式术语与音乐术语“歌曲”和“ MP3”进行比较。当您解释自己享受特殊曲调的程度时，您会说：“我喜欢这首歌！”您不会说：“我喜欢这个mp3！”这首歌是艺术的作品，而mp3文件只是交付机构。

The same rules apply in typography. You should描述创意作品时使用“字体”一词（即您所看到的）。This is a more abstract design term used when referring to the way a specific collection looks or feels. For example, Helvetica is a typeface.

If you’re describing the physical embodiment of the collection of letters and characters, you should use the term “font."It refers to what you use -- whether that’s a file on your computer or a case full of metal letters. This is the tangible representation of that collection of letters and characters. For example, Helvetica Bold and Helvetica Light Oblique are fonts.

Here's how you could use these two terms in a sentence:

• “Wow. The typeface you chose really pulls this design together.”

• “I’ll change the font size to 12pt so it fits in the box.”

The Anatomy of a Typeface

It’s这样更容易communicate with designers when you actually speak their language, which is why it's important理解字体的解剖学。

Each part of a letter has its own special term, similar to bones in a human body. Below, you’ll see three diagrams that explain the makeup of individual letters, how these elements interact with each other, and how they sit on a line.

For example, let's take with the word "Faulty" as it's shown in the picture below.

Here's how each of the terms here are defined:

• Baseline:The line where the letters sit.
• Cap height:The distance from the baseline to the top of the capital letter.
• X-height:Located in between the baseline and the cap height, it's the height of the body of the lowercase letter. (In this case, it's the letters ‘a,' ‘u,' and ‘y.')
• 碗：字符包围某些字母的圆形或弯曲部分的角色的弯曲部分，例如'd，'b，'o，'o，''d，''和B.'（在这种情况下，正是圆形伸出字母“A。”）
• Serif:The slight projection finishing off a stroke of a letter in certain typefaces. (In this case, it's that little foot sticking off the letter ‘l.')
• Descender:The longest point on a letter that falls beyond the baseline.

Now, let's look at the word "flash":

Here's how these terms are defined:

• Ligature:加入相邻字母的中风。（在这种情况下，您会注意到“ F”和“ L”一起形成一个角色。）
• Stem:The base of a letter, similar to the stem of a flower.
• 脊柱：The curvy body of the letter 's' -- and only the letter 's.' It gets its own term because the spine can be almost vertical or mostly horizontal, depending on the typeface.
• Ascender:The portion of a letter that extends above the mean line of a font -- i.e., is taller than the font's x-height. (In this case, you’ll also notice the letter ‘h’ is actually taller than the x-height.)

还在我这儿？这里只有几个。让我们看一下“牛肉”一词：

Here's how these terms are defined:

• 十字吧：The bar that goes across the inside of the letter and connects one side to another. (In this case, it's the bar inside the capital letter 'B.')
• Counter:The empty space in the middle of letters such as ‘B’, ‘O’, or ‘A.'
• Finial:字母的锥形末端，例如“ e”或“ c”。
• 终端: A type of curve that you see at the top of the letter ‘f’ or the end of the letter ‘j.'

做得好。现在，您知道了字母形式的解剖结构，让我们介绍与间距有关的术语：Kerning，Tracking，Prade和层次结构。

Kerning

Kerning is the modification of the space between two letters. For example, check out the image below:

Here, I used Franklin Gothic Medium to showcase the natural space you see between two letter T’s. It looks a little too snug, right? By customizing the spacing between just these two letters, you'll be able to increase readability.

Tracking

与Kerning类似，跟踪对字母间距的修改。但是，跟踪不是在两个字母之间调整间距，而是对所有字母之间的间距进行调整。请参阅下面的区别：

For this example, I chose to make an extreme adjustment to the tracking. Typically, you’d want to apply tracking in small increments to avoid causing readability issues.

Leading

Remember in high school when you had to double-space your essays? Well, the terms “single-space” and “double-space” can also be called “leading,” which is the distance between the baselines. See leading in action:

You can choose to increase your leading, creating more space between the baselines, or decrease your leading, which pushes your lines of text closer together. The reason high school teachers asked for essays to be double-spaced was because it’s much easier to read, and they could make corrections to the text more easily.

等级制度

As you read through this blog post, you'll notice certain words stand out more than others. That's what designers would call creating a hierarchy. You can use different weights (bold, regular, light), styles (italic), and sizes to create a sense of order within your text. Not only does this help create a legible flow, but it helps the reader see what the most important points are.

Here's an example of what hierarchy looks like:

在大多数情况下，您希望人们先阅读标题。这就是为什么您会看到大多数标题比身体文本更大，大胆。呼叫引用和描述性句子也可以使用大胆和斜体化等技术在其余文本上方脱颖而出。

With effective hierarchy, the reader should be able to jump from one section to the next to identify the most important points.

Got all these typography terms down? Cool. Let's move on to how typography is organized with type classifications and type families. (Takes you back to biology class a little, doesn't it?)

Type Classifications

你看到的是调用的两个主要类型分类ed serif and sans serif. Other classifications include slab serif, blackletter, script, modern, and decorative. Let's start with the most common two, and then touch on just a few others to give you an idea of what they're all about.

Serif

还记得当我指出“有缺陷”一词的小脚时像脚那样的字体称为衬线。您可以看到我在下面突出了这些小脚的位置：

Common serif typefaces include Times New Roman, Georgia, and Garamond. If you’re reading a novel, you might notice the body text is a serif. That’s because a serif is much easier to read in long, printed works due to the distinctiveness between letters.

Sans Serif

In French, the word “sans” means “without.” So the term “sans serif” literally means “without serif.” In the image below, you’ll notice the words lack serifs, as I pointed out with the red arrows.

Common sans serif typefaces include Arial, Verdana, and Futura. You’ll see a lot of sans serifs being used in blog posts and documents on the web because it feels more modern and looks great even at lower screen resolutions.

Blackletter

Blackletter typefaces, also referred to as Gothic, Fraktur or Old English,are known for其戏剧性的厚薄strokes and its elaborate swirls on the serifs. These typefaces are based on early manuscript writing -- in fact, blackletters were used in Gutenberg's Bible, one of the first books ever printed in Europe. They were much more popular before 1500 than they are today.

图片来源：SitePoint

As you can tell, blackletters are pretty hard to read, which is why they're not typically used for body type. You'll usually see them in headers, logos, posters, and signs -- like on newspaper nameplates (New York Times'logo, anyone?), or on the headers of certificates, diplomas, or degrees. Common blackletter fonts include Cloister Black, Deutsche Zierschrift, and Germanica.

图片来源：SitePoint

脚本

脚本typefaces are based upon the varied and often fluid strokes created by handwriting. As scalable computer typefaces, characters in these scripts can now string together with one another automatically so they convincingly mimic handwriting, rather than users having to manually pick and choose which letters go after which -- which you can imagine was a painstaking process.

Under the umbrella of a script typeface, there are two basic classifications: formal and casual. Formal scripts are often reminiscent of the handwritten letterforms common in the seventeenth and eighteenth centuries, and they’re used for elegant designs like invitations and diplomas, not for body copy.

图片来源：Deciduous Press

Casual scripts, or informal scripts, are just that: less formal script typefaces that look more like everyday handwriting

图片来源：Font Haus

Those are just a fewexamples of type classifications让您了解它们的工作方式。但是，由于这是博客文章，而不是排版课程，所以让我们继续输入家庭。

类型家庭

The term “type family” or “typeface family” is used to describe a range of designs that are all variations of one basic typeface.

For example, you’ll see that Proxima Nova has variations such as bold, extra bold, black, regular, light, light italic, and regular italic:

Sticking to a single type family will help add variation to your designs, while keeping it consistent and uniform.

Designers might use various fonts within one family to create a sense of hierarchy -- designing so that the most important elements, such as headlines and quotes, stand out above the rest of the text.

Typography Fonts

Before we wrap up here, I figured I'd leave you with a few great resources for where to find free fonts to download from the web, along with eightfreeones I handpicked from these resources to get you started.

免费字体的优bob体育苹果系统下载安装质资源

• "35 of the Best Free Fonts You Should Download":A HubSpot blog post curating 35 of the best free fonts on the internet.
• Google Fonts:Hundreds of free, open-source fonts from Google that are already optimized for the web.
• Behance:A great resource for finding beautiful design work, including unique fonts that are free to download.
• HypeForType:Over 25,000 typography designs from top designers, many of which are available to download for free.

8Cool Fonts That Are Free to Download

1)Crimson Text

Here's one that's great for body copy. It was meant for book production, according toGoogle Fonts, so it's easy to read. But at the same time, there's a lot to it that makes it special: old-style figures, small caps, fleurons, and math characters and the like. It comes in three styles -- Regular, Light, and Bold -- along with the italic styles of those weights.

2)Harmattan

Harmattan is a typeface onGoogle Fontsthat was actually originally intended to suit Arabic scripts, but it also looks great on Latin characters -- and would love attractive in either headline or body copy.

3)Torcao

Torcao is a unique combination of letters that are "half square, half circle," robust and technical while at the same time, light-hearted and inviting. It a great headline typeface, but it still quite legible in longer text. The family comes in nine weights (slender to black) and has both condensed and extender selections for a complete set of forty-eight fonts.

4)King Basil

This free brush font posted onBehanceis great for commercial materials like social media images and flyers. It's a Lite version of the designer's "Full King Basil," and it contains many swashes and connecting letters that make for a beautiful, script-like font.

5)梅里韦瑟

梅里韦瑟was designed to be a typeface that's pleasant and easy to read on screens, making it perfect for a web asset like your homepage or blog. It's an evolving project onGoogle Fontsand will be updated, but right now, you'll find four styles -- Regular, Light, Bold, and Black -- along with the italic styles of those weights

6)Poiret One

Poiret One是我的长期最爱。它在Google Fontsas "a fresh, decorative, geometric grotesque with a hint of Art Deco and constructivism." It's sleek, simple, decorative, and great for short texts. Try it on large signs, labels, posters, T-shirts, titles, or headlines.

7)True North

复古风格的标题字体from HypeForType具有16种不同的样式和一个单脚本。它还包括野生动物，数字，符号，工具和其他图标等免费标签和附加品。True North带有标签，额外的横幅。额外的动物包括野生动物，插词，数字，符号，工具，枫叶和树木。True North是带有替代首都的标题字体。

8)Bravery

Here's a cool free font posted onBehancecreated by a professional font creator who was kind enough to accompany the free download with the mockups below. These mockups show folks how they can play around with the font in their own designs. It comes in capital letters and numbers only, and is great for headlines or social media images like the ones below.

Of course, there's always more you could learn when it comes to typography. When graphic designers get a degree, they usually have to go through several rounds of typography courses to become a professional.

But now you know some key terms to get you started and -- at the very least -- you'll be able to sound super smart when talking to your designer friends.

Want more typography tips? Check out this post on therelationship between fonts and feelings.

Editor's Note: This post was originally published inJune 2014and has been updated for freshness, accuracy, and comprehensiveness.