Typography - The art of text arrangement

Have you ever heard about Typography and wonder what it is?

This blog will help you to have an overview of Typography and understand some basic definitions, include visual hierarchy, baseline measuring, character properties, paragraph alignment and font classification.

What is Typography?

Let’s have a search on the internet…

Wikipedia: Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Etymology: The word “typography” in English comes from the Greek roots - τύπος - typos = “impression” and - γραφία - graphia = “writing”.

Simply understand, typography is the way you work with text, choosing and arranging the position, spacing and style of letters. Visual performance and readability of text in digital products have a great impact on user experience. That’s why typography plays an important role in the design industry.

Visual Hierarchy

Visual Hierarchy is used to guide the reader’s eyes to which content is most important. In other words, it shows them where to start, where to go next, step by step, using different levels of emphasis.

Designers will decide which elements they want the reader to notice first, then make them stand out. High-level contents usually have larger size, be bold, italic or different in some ways.

Clear typographic hierarchy makes the contents well organized and clear to navigate, the text will be legible and easy to scan.

Baseline

The baseline is an imaginary line upon which most letters “sit on”. This is an important specification in measuring the vertical distance between text and other elements.

x-height

x-height refers to the height of the lowercase x measured from the baseline. In small font sizes, text with taller x-height will be more legible because of the extra space within each letter.

Cap height

Cap height refers to the height of a flat capital letter measured from the baseline (such as H capital letter). 

Round capital letters (such as B, O) and pointed capital letters (such as A) are drawn with a slight overshoot above the cap-height to achieve the effect of being the same size with flat capital letters.

Ascenders and descenders

An ascender is the portion of a lowercase letter that extends above the x-height. A descender is the portion of a lowercase letter that extends below the baseline.

In some cases, a collision between these strokes can occur when the line height is too tight.

Leading

Leading, also known as line-height, line spacing, is the distance between two baselines in a block of text. Too much or too little spacing can make things unpleasant for the reader.

Tracking

Tracking is the overall space between characters.

For larger font sizes, such as title, headlines, use tighter tracking to reduce space between letters and improve readability.

For smaller font sizes, looser letter spacing can improve readability because more space between letters increases contrast.

Kerning

Kerning is the specific space between pairs of letters.

Kerning is different from tracking, it’s diverse because each letter fits together differently. Kerning adjusts the space between individual letters, while tracking adjusts spacing uniformly over a range of characters.

Font Weight

Font Weight refers to the thickness of a font’s stroke. A typeface can have many weights.

Common weights: Light - Semilight - Regular- Semibold - Bold

Alignment

Alignment controls how the text aligns in the space. There are 4 types of alignments.

Left-aligned text is the most common & default setting for left-to-right languages.

Right-aligned text is suitable for short contents within a layout such as note, explanation, definition, or some specific purposes.

Justify-aligned text is my favorite type of alignment. It’s balanced and there is no redundant space.

Center-aligned text is best used for short content such as heading, title, quotes, testimonials, CTA (Call to action), etc.

Font Classification

Serif

Serif is a small line or stroke regularly attached to the main part of the letter. Typefaces with serifs are called serif typefaces.

Because of their classic look, Serif fonts are good choices for traditional projects. They are also common in print publications, like magazines and newspapers.

Sans Serif

In French, the word “sans” means “without”. Typefaces without serifs, don’t have the extra stroke are called sans serif typefaces.

Sans Serif fonts are considered more clean and modern than Serif. It tends to be easier to read on computers and phones screen.

Monospace

A Monospace font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space.

Monospace typefaces display all characters with the same width.

Tabular lining figures

“Tabular” means the figures are designed for tables, so the figures all have the same advance width.

“Lining” means the figures align horizontally with each other, usually around the height of the capitals.

Tabular lining figures (also known as monospaced numbers) keep values optically aligned for better scanning.

Handwriting

Typefaces that looks like it’s been written by hand with a natural feeling are called Handwriting typefaces.

Handwriting fonts typically are used for personal diary, journals, blogs, etc.

Display

A display typeface is a typeface that is intended for use at large sizes for headings, rather than for extended passages of body text.

Because of its decorative nature, Display fonts are best for small amounts of text: title and header, or graphic-heavy designs.

References

Wikipedia - Typography
Creativebloq - Glossary of typographic terms
Shillington - What Is Typography? A Deep Dive Into All Terms And Rules
Material Design - Understanding typography