Typography

by Tejaswini Singh

This topic is going to have two blogs, in which we are going to read about what are fonts, font face, how a type face should be aligned, How to make hierarchy, font pairing, etc. This is the continuation of the previous blog.

  1. Font types- There are 4 basic types of fonts, which are serif, sans serif, script, and slab serif.
  2. Font case - There are 3 types of cases which are as follows - Upper case, Lower case, Small caps.
  3. Point size - This is the size of the text. There are approximately 72 (72.272) points in an inch.
  4. Font weight - Boldness
  5. Italics - Slope towards right
  6. Widows and orphans - Poor and lonely words at the beginning and the ending of the paragraph, widows are in the beginning and orphans are at the end.
  7. Lorem ipsum - Dummy text
  • How many fonts to select?

two or three fonts are perfect, because it effects your loading time and page size. Assign each font with roles.

one font to heading and sub-heading and one font to body text.
Body text should be easily readable.

  • Rules of font pairing
  1. Avoid too much similar fonts, i.e, identical twins.
  2. Look for contrast (serif + san serif), (slab serif + san serif)
  3. Look for similar features (geometry, counters, roundness)
  • Things to keep in mind while pairing
  1. Firstly, choose body text font.
  2. Secondly, choose display/ heading font.
  3. thirdly, Keep in mind the theme/ purpose.
  • If the font belongs to same family or same designer then they fit well together.
  • If the x-height of two fonts matches they will go well together.
  • Contrast in pairing
  1. It is of many types, it could be contrast in the thickness of two fonts may be stroke thickness.
  2. It can also be the difference in style, one is very roundly and one is very edgy, bold.
  3. Contrast can be between any features of two fonts.
  4. Most of the time two out of three fonts share similar x-height. Always choose the font with a good x-height for body text.
    Good x-height = Good readability
  5. Most of the time serif and sans serif make a good couple.
  • Example of some font pairings
  1. Open sans + Roboto
  2. Open sans + Lato
  3. Open sans + Oswald
  4. Open sans + Source sans pro.
  5. Montserrat + Open sans