Typography Series (Part — 1) — Terminology every frontend developer should know

Hola folks! This blog series about Typography has two parts

Importance and basic terminology of typography that every frontend developer should know.
Major challenges faced while getting typography right. Check it out here.

In this blog post, we will be discussing basic typography terminology that every frontend developer should know. So, let’s get started.

In simple words, Typography is an art and technique of arranging type. When we talk about the presentation of content on a page, like its font size, font family, weight, vertical spaces, the hierarchy of content and so on, we are referring to its typography.

Importance

If the typography is right, half of your job is done. It’s typography that helps in conveying the feeling, your content is meant for. A right typography connects with the reader, keeps him energised and focused on content, thus the reader ends up reading the content posted.

Above all, a right typography is the main factor of making your applications/websites look beautiful. If you follow typography rules, each page of your website will look intact and will grab users attention.

So in short, three major things:

Conveys a feeling
Keeps user reading
Helps building beautiful applications/websites

Font and Typeface

A typeface is a set of one or more fonts. Each font in a typeface has a specific weight, style, condensation, width, slant, italicisations, ornamentation and designer, foundry and so on.

Let me explain with an example.

Here Robot is a typeface and Roboto Condensed, Roboto Slab and Roboto Mono are fonts belonging to this typeface.

If you notice, in Roboto Condensed distance between characters is smaller, it is condensed. For Robot Slab there is a small line attached at the end of the stroke, whereas for Robot Mono each character takes the same space.

Categories of Typeface

There are different categories of typeface and there are all sorts of myths around when to use what. We will now study five basic categories and it will eventually help us understand which typeface to use when and the reason behind it.

Serif: A small line attached at the end of the stroke of each character know as serif. Each serif typeface will have a distinct style for this mark that makes the family identifiable. It gives a very classic, elegant and confident look to the content.
Sans Serif: Sans in French means “without”. So Sans Serif is without serif. It gives a very simple and precise look. As print has higher resolution serif helps distinguish characters and thus enhances readability. For contents in print media, serif font suits best, whereas, sans-serif is best for the web. This is so because screens do not have an as good resolution as print and serif can blur text. For readability of content on the web, sans-serif suits well.
Display: Display typeface has a decorative style and hence used for decorative and illustrative use of content and majorly in print media, like, advertisements, banners, flexes and so on.
Handwriting: As the name suggests it would be more humanistic depicting a human handwriting. It is usually difficult to read and therefore used in either images or headlines, given the text used is short. It is also called Script or Calligraphy typeface.
Monospace: In Monospace typeface, each character takes equal space. It is mainly used in instructions, code blocks or typewriter text.

To read more about these typefaces and to see more examples, visit Google fonts.

What makes up a character

A brief introduction to some important typography terminology:

Glyph: A single character in a typeface.
Baseline: Invisible line on which all characters sit.
x-height: Height of a lower case ‘x’ character.
Cap Height: Distance between baseline and top of the uppercase character.
Ascenders: Part of lowercase character extend above x-height.
Ascender height: Height of ascender.
Descender: Part of lowercase character extends below x-height.
Descender height: Height of descender.

Size Units

Pixel: A dot on your display is called a pixel. So a grid of 10px height and 10px width will have 100 pixels.
Point: A point is a physical unit of length.
```
1 point = 1/12 pica
1 pica = 1/6 inch 
```
So for 72 pixels per inch display, 1 pixel = 1 point
Em and Rem: These are scalable units and thus helps in creating mobile friendly screens. Em is a base font size of an application.
```
div { font-size: 15px; }
1em = 15px
2em = 30px
0.5em = 7.5px
```
It is relative font-size of current element being styled or if the current element does not specify any particular font-size then it inherits it from parent elements.

REM, on the other hand, is relative to font-size of root document.
```
html { font-size: 15px; }
1rem = 15px;
```

Characters per line

Having the right amount of characters on each line is key to the readability of your text. What if we violate this range:

Too Wide: At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line. It may also make it difficult to figure out correct line if its large block of text
Too Narrow: The eyes will have to travel back and forth too often, which also breaks readers rhythm

In order to energise your readers and keep them engaged in reading, it is suggested to follow the range of 60–75 characters per line including spaces. In web design, we can achieve this by having fixed width containers and using scalable units like em/rem for measuring the width of these containers. So, if we base font size is 15px, then we can have the container of width 40–50 em.

Here, I wind up the discussion about different terms we use when we talk about typography. In next blog post, we will talk about the major challenges we as frontend developers face in order to get the typography of our websites right. Stay tuned!

Hope this helps and if you like it, please 👏. Thank you so much 😄

Keep dreaming! Keep Learning! Keep Sharing. Have a great day ahead.