Skip To Content
Get a Quote
Toronto-based boutique agency specializing in web design and development, identity and print design.
Jan 14

Typography 101

The way content is presented on a website plays a great role in how it affects a user. The content itself should be clear and precise and the content should be presented equally well. The website layout, content layout, typography, and many other factors affect how effectively the content reaches the user.

Typography in particular plays a very important role when you are laying out content for a website. It is something which requires a lot of attention.

Typography is nothing but the technique of arranging type in a clear, precise, legible, but attractive way. Typography is not about simply choosing from different fonts. Everything from character size to the space between lettering matters and how.

Do you know that the founder and CEO of apple, Steve Jobs actually took a course in typography?

He says that this is one of the reason that the Mac from Apple has multiple typefaces and proportional fonts.

Typography improves experience by a large fraction and it is important to pay close attention to it.

Here are some basics of Typography to help you out while you layout the content for your website.

The Difference Between Typefaces And Fonts

A common misconception about typography is that both typefaces and fonts are one and the same. You could not be more wrong. Typeface is a group of fonts. It is a collection of all the different types of a specific font. For instance, Arial is a typeface but the fonts Arial, Arial Bold, Arial Narrow, and Arial Narrow Bold are variations of the typeface Arial.

Font is the way the type is presented. For instance, Times New Roman at 12 points is a different font than Times New Roman at 30 points.

Both typeface and font are crucial elements of typography. Both affect the way type is presented to the users.

The Difference Between Serif And Sans Serif

Serif is a variation of a typeface. Serif was used to represent text in books and newspapers from very early on. The Serif typeface has a decorative stroke at the ends of each letter. One of the examples is Times New Roman. Serif is much easier to read which is one of the reasons why they are popularly used in bodytext. It is easier on the eyes and provides more clarity to text.

Sans Serif is a typeface in which the edges of letters are ‘sans’ the decorative strokes present in Serif typeface. An example of the Sans Serif typeface would be Arial. Being more difficult to read as compared to Serif, these typefaces are commonly used in headlines or captions.

What is leading, tracking, and kerning in typography? 

Leading, tracking, and kerning essentially refers to the different types of spacing that is used in typography.

Leading: It refers to the spacing between two lines of text. This kind of vertical spacing determines how legible a group of text is. There are different types of leading and each can affect the ease with which you can read text.

  • Tight leading: In this type of leading, lines of text have almost no vertical spacing between them. This reduces the legibility of text especially in cases where there is a huge amount of text to be read.
  • Normal leading: In this type of leading, lines of text are spaced well enough so as to give the users greater clarity. The vertical spacing is adjusted just right in this case.
  • Loose leading: In this type of leading, the vertical spacing between the lines of text are more than normal. There is too much of spacing between lines of text and even a few lines of text take a lot of space.

Tracking: It refers to the horizontal spacing between letters. There are two types of tracking, namely tight tracking and loose tracking and the use of both these types depends upon whether the text is large scale or small scale. Tight tracking is used in case of large scale text so that words are better displayed. Loose tracking is used in small scale text in order to provide room between letters and improve the legibility of the text.

Kerning: The term kerning also refers to the spacing between letters, but unlike tracking, in this case, horizontal spacing between two letters is what is modified. Kerning is used to customize the spacing between two letters that are too tightly spaced.

The use of hierarchy in presenting a text

Hierarchy represents to the way in which certain text is made to stand out more than the others. This is based on the importance of a particular block of text in relation to the entire text. Text may be made to stand out using Bold, Italics, or Underline. For instance, titles are often Bold and large sized. Italics are used in cases where a text is meant to be emphasized. Underline is used to state the importance of a particular line in text.

These are the few basic ideas that are important in typography. Paying close attention to these details can help you create an effective content layout on your website.