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

• 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

• 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 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.

Oxford

Chino ITC Pro

Serif-Beta

Tenderness

Bellerose

Print Clearly

Alexandria

Blue Plate Special

The Real Font

Vlaanderen

Speakeasy

League Gothic

Cantarell

Capricorn OSF

Teen

Fertigo Pro

Delicious

Nirvana

NovemberMedium Font