Typography

Typography is the visual arrangement of design letters or types in the ‘design space’. Typography is everywhere, whenever you create a design for your poster or a banner or designing any graphic artwork.

My name is Lalit M S Adhikari and we are at LTY. Let’s begin!



Introduction

By understanding the basic rules you make sure that you can convey the message in the most effective way.

Type is the most direct way to communicate visually, it is typically set either as a paragraph or in headers.

Many designers and beginners, when they get into a design program like Photoshop and Illustrator, may come across a vast array of fonts. 

And that can often feel like a kid in the candy store where you just go and try to match some fonts together and the problem is that it doesn’t work so well.

In this blog post, I am sharing some guidelines that you need to follow which will allow you to pair fonts and actually have a cleaner and more aesthetic design.


Type of Fonts

There are two different categories of fonts:

  • Serif
  • Sans-Serif
  • Script
  • Monospace
  • Display

As a general rule, Serif and Sans Serif can be used for Heading Text or Body Text. Script and Display fonts are only suitable for Heading Text. Currently, Monospace are used for displaying codes but in early stages they were used for both Heading and Body text.


Serif

Seirf fonts include a slight projection finishing off the strokes of its letterforms. They can be further divided into five types:

  1. Old Style Serif Fonts
  2. Transitional Serif Fonts
  3. Modern Serif Fonts
  4. Slab Serif Fonts
  5. Glyphic Serif Fonsts

Old Style Serif Fonts

Old Style Serif fonts

Old Style Serif Fonts include:

  1. Diagonal Stress (the thin parts are on the diagonal rather than horizontal or vertical axis)
  2. Bracketed Serifs (where there’s a curve attaching the stem and head)
  3. Minimal contrast
  4. Wedge-shaped serifs
  5. Angled heads serifs

For Example: Adobe Jensen, Garamond, Goudy Old Style etc.


Transitional Serif Fonts

Transitional Serif Fonts

Transitional Serif Fonts include:

  1. Usually vertical strokes
  2. Vertical stress
  3. More pronounced contrast than in Old Style Serif Fonts
  4. Oblique and bracketed Serifs

For Example: Baskerville, Perpetua etc.


Modern Serif Fonts

Modern Serif Fonts

Modern Serif Fonts include:

  1. Little or no bracketing on the serifs
  2. Vertical axis on curved strokes
  3. Dramatic contrast between thick and thin strokes
  4. Ball-shaped stroke terminals

For Example: Didot, Bodoni etc.


Slab Serif Fonts

Slab Serif Fonts

Slab Serif Fonts include:

  1. Heavy serifs with very little or no bracketing
  2. Virtually no contrast in stroke weight

For Example: Museo Slab, Rockwell, American Typewriter etc.


Glyphic Serif Fonts

Glyphic Serif Font

Glyphic Serif Fonts include:

  1. Emulate lapidary inscriptions rather than pen-drawn text
  2. Have minimal stroke weight contrast
  3. Use Triangular Serif Shapes

For Example: Albertus, Cartier Book, Newtext etc.


Sans Serif

Sans Serif Font (‘Sans’ in French means without) don’t include any projections at the end of the strokes of its letterforms.

They can be further classified as:

  1. Grotesque Sans Serif
  2. Neo-Grotesque Sans Serif
  3. Geometric Sans Serif
  4. Humanistic Sans Serif

Grotesque Sans Serif Font

Grotesque Sans Serif font

Grotesque Sans Serif Font includes:

  1. A spurred uppercase
  2. Minimal contrast on the strokes
  3. Some of the curves were more square (included in older versions)
  4. A double-story lowercase (included in older versions)

For Example: Franklin Gothic, News Gothic etc.


Neo-Grotesque Sans Serif Font

Neo-Grotesque Sans Serif Font

Neo-Grotesque Sans Serif Fonts includes:

  1. More legible
  2. Plainer (Otherwise have similar features to the older Grotesques)

For Example: Helvetica, arial, Univers etc.


Geometric Sans Serif Fonts

Image

Geometric Sans Serif fonts include:

  1. Have round ‘O’s
  2. Are based on simple geometric shapes
  3. Have no contrast between strokes

For Example: Futura, Avenir


Humanistic Sans Serif Font

Humanistic Sans Serif Font

Humanistic Sans Serif Font includes:

  1. Are based on the proportions of Roman-style capitals
  2. Were created to be more legible
  3. Have more contrast than other Sans Serifs
  4. Have a calligraphic influence

For Example: Gill Sans, Verdana, Lucida Grande etc.


Script

Script typefaces are based on the fluid strokes of handwriting and can range from formal to very casual. They’re suitable for display use.

They can be further classified as:

  1. Formal Script Font
  2. Casual Script Font
  3. Calligraphic Script Font
  4. Blackletter Script Font
  5. Handwriting

Formal Script Font

Formal Script Font

Formal Script Fonts include:

  1. Flowing loops and flourishes
  2. Letterforms that are generally connected

For Example: Bickham Script, Snell Roundhand, Kuenstler Script etc.


Casual Script Font

Casual Script Font

Casual Script Fonts include:

  1. A brush-like appearance with stronger strokes
  2. Letterforms that are sometimes connected

For Example: Brush Script, Bianca, Mahogany Script etc.


Calligraphic Script Font

Calligraphic Script Font

Calligraphic Script Fonts include:

  1. Emulate hand-lettered calligraphy
  2. Generally have high contrast

For Example: Mistral, Vivaldi, Ballerino etc.


Blackletter Script Font

Blackletter scirpt font

Blackletter Script Font includes:

  1. Very formal
  2. Based on handwritten calligraphy
  3. Strong contrast on strokes

For Example: Goudy Text, Monmouth, Engravers Old English etc.


Handwriting Script Font

Handwriting Script font

Handwriting Script Font includes:

  1. Are casual
  2. Mimic modern handwriting

For Example: Blog Script, Pacifico, Cedarville Cursive etc.


Monospaced Fonts

Monospaced fonts are non-proportional – every letter takes up the same amount of horizontal space on the page or screen. There are serif and sans serif varities.

For Example: Courier New, Consolas, Source Code Pro etc.

Monospaced font

Display Fonts

Display typefaces vary widely in their appearence and include both practical and novelty fonts sutiable for headlines and titles.

For Example: Broadway, Cooper Black, Curlz.


Typeface Vs. Font

Now, there are hundreds of different fonts but there are also typefaces.


Typeface

A typeface is a series of letters that are designed to belong together. It is a combination of geometric and organic shapes which is combined together to create a larger shape.

typography
Anatomy of Type

For example: each of these letters is an entity and is part of a complete typeface made of other letter shapes. The characteristics of every typeface can be broken down into what is known in design as the ‘Anatomy of Type’.

It is the type of shape given to the anatomy of each type in each letter that gives the typeface a distinct look and feel.


Fonts

Therefore, fonts make up typefaces in the same way chapters make up a book.

All typefaces are made up of letterforms. Letterforms are the individual design of any one letter.


Font Combinations

Font combinations are of two types:

  1. Friendly Fonts
  2. Enemy Fonts

Friendly fonts are group of fonts which look good together. They are also called Complementary Fonts.

typography
Example of Typeface

Here’s an example: ‘Verdana’ and ‘ Lato’ are two different typefaces. And they are very similar typefaces which have an emulated similar type of a feel to each other.

typography
Definition of Sans Serif

In this example: there are two fonts that are paired with each other. The header is a ‘Helvetica’ (Sans Serif) and the text below it is ‘Times New Roman’.  So, this is a classic way you can utilize different typefaces.

This allows you to have a little bit of contrast and a little differentiation.


Contrast in Fonts

In fonts, you can achieve contrast in a few different ways. You can do this through:

  • Size
  • Weight
  • Spacing
  • Style
  • Color
typography
Header & Body Text

Here’s an example, where there are a title and a body text below it.


Font Weight

The header has a bold feel to it and the word ‘Learn’ is lighter. They are the same fonts bit come in different ways. So, this is an example that you are distinguishing the contrast between the title, in one word and the rest of the title. 


Font Sizes

In this above example, the header is actually much larger. So, much larger font versus the actual content below it. Here, you are achieving contrast utilizing font sizes and it allows you to decide what you want the audience to focus on.  And in this case, the majority of focus goes towards the header itself.


Font Color

Colors allow you to basically engage your readers and allow you to emphasize certain elements. Although we have used the same font on the header and although the word ‘learn’ is actually lighter font format, however, the color of the word is actually engaging you and that’s where your eyes go towards. And it can be achieved using colors.


Spacing

Spacing is very important in a design. In this case the spacing between the header and the content below, you are achieving a certain sense of contrast.


Style

In style, you are talking about the whole mechanism. And if you look at this example, I am using the modern San- Serif typefaces. So what you are getting is a modern feel. You can use this type of typeface to achieve that.

typography
Colour combination

In this design, your eyes flow from one point to another and if you look at the example, there are a few rectangles to the top and the bottom and also the word ‘learn’ has the same color as the rectangle.

So, it actually looks like a triangle where your eye goes from one point to another.


Consistency

Consistency is a key element in font paring and typography. And what I mean here is that you must avoid using multiple different types of fonts with each other.

Here’s an example, where I’ve used three different types of fonts and it is not looking appealing to an eye because the design is lacking consistency.

Now, in the next example: I’ve used only two fonts in this same content. In this, the header is of one font and the body text is of another.

Even though it has a bit of contrast but it’s still minimal and it has a nice feel to it.


Default image
Lalit M. S. Adhikari

Lalit Adhikari is the main Author at Learn That Yourself. He has work experience in the field of Multimedia for more than 10 years and teaching experience of more than 5 years.

Articles: 103

Newsletter Updates

Enter your email address below to subscribe to our newsletter

3 Comments

  1. Good information about typography. New to any people. Great explanation with examples. Enjoyed reading

Leave a Reply