Understanding the fundamental of typography for the web: Part 1

Typography is a very hard thing to accomplish when designing or coding for the web. In this article I will hopefully give you a better understanding of how to use typography and how you can avoid clutters paragraphs and unaligned text.

Mixing Fonts

When I first begin designing and coding for the web I would always mix my typography. For example I would use a serif font(Georgia) with a sans-serif(Arial) font. If you are just starting off you might think that those fonts can be used together but they cannot. Serif fonts are different from sans-serif fonts.

What fonts can I mix?

I bet you’re wondering what fonts you can use for your next design or web project. There are 3 main types of font categories

  • serif
  • sans-serif
  • monospace

Serif fonts are commonly used by publishing companies or if you have ever been to a news site or magazine site you will often find that they are using one of the serif fonts.
Serif

Serif

  • Georgia
  • Palatino Linotype
  • Times New Roman
  • Book Antiqua

Sans-serif fonts are mostly used by all types of websites. I usually use San-serifs fonts for most of my projects.
Sans-serif

sans-serif

  • Arial
  • Helvetica
  • Arial Black
  • Impact
  • Lucida Sans Unicode
  • Lucida Grande
  • Tahoma
  • Veranda

  • Geneva

Monospace fonts are not used as often as Serifs, and sans-serif fonts but they are used.

monospace

  • Courier New
  • Lucida Console
  • Monaco
  • Courier

Line height

line heightLine height is very important when it comes to making your text look neat and clean. Often if you just leave a text as is then it will look cluttered, and tight. When I first began working with text I never really understood how to change the line height of a text and what it actually did. To give you a better understanding of line height I will give some examples below so you could better understand what I am talking about.

There is no line-height below just the default text. So I applied 12px line height to the paragraph below and as you can see the text looks cluttered and not very attractive.

Arial Font(line-height) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a line-height of 24px applied the paragraph below.

Arial Font(line-height) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

Think of the line height as the lines on a normal sheet of paper. If you were to write paragraphs but not on the lines then it wouldn’t look so good. Now let’s say you wrote on the lines(as you would usually do). If someone were to read your paper(Teacher) then they find it very easy to read.

Letter Spacing

Letter spacing is something that should not be overlooked. Many times when creating different types of paragraphs we might like to have some spacing in between words or letters.

There is no letter spacing in the paragraph below.

Arial Font(spacing) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a letter spacing of 1px in the paragraph below.

Arial Font(spacing) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

So as you can see typography is very important when coding for the web. I have covers just the basics in this article but will teach you more in the other series. If you have a question just leave a comment below and i will help you there.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Beto says:

    What’s up Marcell, you got the most informative site I have ever seen it seems you read my mind on things I wanted to know. I’m a noob to all of this and mannnn you help me out understand alot of sh*t. Thank you… =0)

Leave a Reply