4

Typography Selection In Design And What You Need to Know About

 3 years ago
source link: https://uxplanet.org/typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Typography Selection In Design And What You Need to Know About

Typography Wars

1*2Vk1Ph3rbQiB4RQNLiE7vw.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

I will not talk about where the fonts come from, the font terms, the history of their names. Already, much more detailed information about its history can be found in the relevant books.

I will explain with examples the way a designer should choose the font to use and how he/she should use it. I will try to explain the path a designer should follow in choosing and using the font in the design.

Short History and Quick Information

1 — First Typeface

1*wpui5F24ssMKYwLJrmgK6w.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

The first typeface in history was designed by Gutenberg with the invention of the printing press. This font called ‘Roman’ was used in the Bible in the middle of the 15th century. Then, in the early 16th century, Italians designed slightly slanted fonts, italic fonts, to write more on paper.

2 — Typography ≠ Font ≠ Typeface

We can call typography editing text in general. Typography is formed as a result of all the design arrangements in the text. Many of us confuse typeface with the font. The font is a digital file with extensions such as .ttf .otf that can be installed on a computer. Helvetica, Garamond, Verdana — whichever comes to mind now — are typefaces. This typeface becomes a typeface family when we put it together like italic, thin, medium, bold. If we turn the typeface family into a digital file to be installed on the computer, what is the name: Yes! Font family.

3 — Typeface Classification

3.1 — Serif

It is divided into Old Style, Transitional, Modern, Slab. (Known examples from Garamond, Times New Roman, Georgia)

3.2 — Sans-serif

It is divided into Humanist-sans, Transitional-sans, Geometric-sans (Helvetica, Futura, Brandon, Gotham known examples)

The answers to questions such as how to use serif and sans-serif fonts (now you know I mean typeface) except for aesthetics, which one is better, are very confusing. First of all, we should get the five ws and one h answers in the design without answering these questions. We cannot design without knowing what impression we want to make. We will talk about these issues later.

In general, sans-serif fonts are used in headlines and short texts, serif fonts are used in long texts. Because sans-serif fonts strain the eye after a while, serif fonts guide the reader and long reading can be achieved without straining the eyes. For this reason, serif fonts are used in newspapers, encyclopedias, and some blog sites. This comfortable reading is not just dependent on the font, it requires a little more terms. Let’s talk about those terms quickly and go through the boring chapters now.

4 — Kerning, Leading, Spacing

  • Kerning

Kerning refers to the arrangement of the space between characters with each other. Kerning is a separate concept from spacing. It is applied according to the design of the characters. We need to regulate the space between characters, both for aesthetic concerns and readability. While making these arrangements, we follow certain rules so that the characters do not intertwine or stand apart from each other.

When two vertical letters are side by side, we move them away from each other (like H and K). Characters that are opposite-leaning to each other are close to each other (such as V and A). If vertical and leaning characters come together, we bring them closer to each other so that they do not stand apart (like A and D). A vertical letter and a round letter are brought closer to each other (like O and P). Again, when two round characters come together, they are brought closer (like O and G) so that they do not stand apart. The two leaning in the same direction characters are brought close enough to almost touch each other (like A and A)

1*6hChOAqO9ZCGZ71OBX8Vgg.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112
  • Leading

Leading refers to the spacing between lines. As the space between the lines increases, the lines appear to be separated from each other. Fortunately, there is a formula that solves this; font-size x 1.5 line spacing. (Note: we don’t always have to use this formula, it’s just a method). For example, in an article using 30 points, the line spacing should be 45 points.

1*HZmoN7fdsIgsuEs-vDhqnQ.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112
  • Spacing

It organizes the space between the whole part like words and paragraphs. Kerning regulates the space between characters, spacing regulates the space between words.

Now we can move on to the funny chapters.

Finding Answers to Some Questions for Typeface

First, we determined what we wanted: good design and typography. Let’s talk about the next questions in more detail.

Why this Typeface

Let’s consider this question like this: Why did I choose this typeface in this design? Can I give the message I want? “Typeface and how it feels” chapter focused entirely on that. We will come there.

Where this Typeface

The first thing we want in an article is that it is fit for purpose and readable. We divide it into a general classification as serif and sans-serif. Let’s also divide them into two general topics according to the usage area. Texts to be used for printing, texts to be used in digital media.

How To Use this Typeface

When we want to use it for printing, we first want it to be read comfortably; if this is a billboard design, we want it to be readable from a distance; if it is a book design, we want it not to strain the eyes. Although there are small differences in digital uses, they have many similarities with printing.

A Few Rules and Suggestions in Designs

1 — Align Left

This is a suggestion. Ethnicity is important here. It wouldn’t make sense to just lean left in an Arabic design. I am speaking for articles read from left to right. Likewise, other articles such as Arabic can be right-aligned. Aligning the text provides the white space on the page, making it easier to read.

1*__iIwPb4NHNedJ_laqL-Kg.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

2 — Ratio

The best shortcut suggested in prints is to have a good ratio between title, subtitle, and body text. Let’s call the body size x. Using 2x in the main header and 1.5x in the subheading provides a good ratio. It is also necessary to give a space between the headers and the body. We can also set the spacing between paragraphs to equal the size of the body text.

1*l5MsJz2yAQISFkUQ7duZeA.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112
1*tkty75kPjuOUs509Cf_RGQ.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

3 — Enough Fonts

If you don’t know exactly what you are doing, the best option is to not exceed 2 fonts. Of course, these are also compatible with each other. For example, as we said, using a sans-serif in short heading and a serif on the body is a nice harmony. If your body text is not very long, you can create great designs using two san-serif fonts or even a single-family. You are the designer!

1*HEL8h867qsMWvhG5Xi2R_Q.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

4 — Line Height

As I wrote above, the suggestion with line-height; If the font size is x, the line spacing is 1.5x. It will make even the simplest text more readable.

1*l7stqNDjKXTfHzt4d-CrzQ.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

5 — Number of Characters in Paragraph

It makes perfect sense to divide your design into columns. People are comfortable up to a certain line width while reading articles. Wider lines make texts difficult to read. Therefore, using approximately 50–75 characters depending on the paragraph width allows white space. Therefore, using approximately 50–75 characters in paragraphs allows white space and readability.

1*Cv5F8DG13_ODiW2AHhl3BA.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

6 — Capital case in Handwritten Fonts

In other fonts, capitalization depends on the designer. But handwritten fonts usually care about aesthetics, not readability. The readability is already low, and the use of capital letters makes the text even more difficult.

1*-qDATDROj5lJjcADl4kb0A.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

7 — Enough Emphasis

Every word you say can be important, I understand you. But you have more important words that deserve to be emphasized; just emphasize them. Too much emphasis is distracting. It makes the reader not know where to focus.

1*7vnbVoCek6OJRgxY8y4rOA.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

Typeface and How It Feels

Here we have entered brand communication and marketing.

  • Use of lowercase letters; Used for energetic, dynamic, exciting brands image.
  • Use of capital letters; It is used for a strong, well-established company image.
  • Use of rounded fonts; It is used to give a brand image that feels sincere and close.
  • Serif font usage; It is used for a well-established, professional, reliable, competent image.
  • Sans-serif font usage; Used for a modern and cool image.
  • Script or hand lettering font use; Used for a friendly and fancy image.

Note: These are not strict rules at all.

1*UIfsvaWK9mrLcRCWOs8H6g.png?q=20
typography-selection-in-design-and-what-you-need-to-know-about-2d5a98521112

Starbucks Case: The use of capital letters and the sans-serif logo seems to want to emphasize the strong and at the same time cool brand image. It is a coffee chain that has dominated the sector.

Zara Case: Again, it gives a strong brand image by using capital letters. With serif font, it offers us the guarantee that they are professional and gives us confidence.

Twitter Case: The use of lowercase letters is a feature we are used to seeing in technological companies. Already the emphasis is on technology and dynamism. The use of rounded font also indicates that a friendly atmosphere awaits you inside.

There is no such thing as this rule will work in every logo. By following the suggestions above, you may have taken a step towards the message you want to give.

You are the designer!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK