Basics of Typography

Typeface or font?

The words Typeface and Font are often used interchangeably now. Calling a typeface a font isn't necessarily wrong, however it can still be useful to know the difference.

A font refers to a specific style or weight within a typeface family. A typeface is a collection of fonts.


Serif typefaces

There are multiple categories of typefaces. Serif typefaces are more formal and traditional and often used in books, newspapers, etc. The serifs are the details or extensions at the end of a letter's stroke.

They are ideal to convey a sense of tradition and are best used in old-school or classic environments, although if used well, they can also work in modern situations. They can give a feeling of trust and elegance. 

Merriweather

Sans serif typefaces

A sans serif typeface is simply a typeface which doesn't have serifs (the decorative extensions at the end of the strokes). They are considered more modern, bold and tend to be easier to read on computers screens as their sharp edges are usually rendered more clearly on a screen.

They are ideal for any modern web or logo project. Sans serif typefaces can be seen as more casual, friendly and approachable.

DM Sans

Display typefaces

Display fonts have a lot of character and personality, but should only be used reasonably, as they tend to be harder to read. They're ideal for headings and large text. 

Some rules of thumb for display typefaces

For script fonts and some other display fonts, don't use all caps text, don't increase or decrease the letter spacing, and always make sure your text remains legible.
Lobster

Less is more

Limit yourself to one or two typefaces. It's rarely (almost never) necessary to use more than two typefaces in a design project. Using only one or two typefaces will make your design more organized and structured and it will look more unified. 


Skip a weight

A good rule of thumb when using multiple font weights in a design is to skip a weight to keep more contrast between both styles. So for example, with a font that has RegularSemiBold and Bold weights, use the Regular and Bold weight. 

Let your text breathe

White space is important, so don’t put text too close to the edges of your page or screen, or too close to other elements. Give enough breathing room to your text so that it's easier to read. 


Define a hierarchy

Have a clearly defined hierarchy for your text. Your headings should be the first thing people read, then subtitles, and then body text. This is because most people scan content instead of reading, so make sure headings and subtitles are easy to spot when scanning your page or design. 


Where do you find free fonts?

Google Fonts and Adobe Fonts have a large library of fonts that are free for personal and commercial use. Google Fonts are perfect for web projects as they're easy to implement and have faster loading times. 

Thank you for reading!