These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
Something like 95% of the web is text and yet most web developers don't pay any heed whatsoever to typography -- it's this mysterious esoteric subject reserved for designer geeks and their lattes. You are not "most web developers" so perk up!
Typography is important. It affects everything from the overall visual hierarchy to how effectively the user can consume content. Especially if you've got a content-heavy site, your users' experience will be significantly impacted by the typographical decisions you make.
Typography can also get pretty technical and is littered with jargon like "kerning" and "ligatures" and "cap height". You don't necessarily need to memorize these things but you should gain an appreciation for why they matter.
Your most important takeaways from this lesson should be an understanding of the high level reasons for choosing one font over another and how modifying things like the space between lines or font weights can affect the overall legibility of your site.
First, to get an appreciation of the importance of typography, read The Web Is all About Typography, Period. by Oliver Reichenstein.
It's been said best by others -- Read Typography Basics for Developers by Rachel Shillcock.
For more resources, see the Resources tab.
"Vertical Rhythm" is the idea that, as you're consuming a long piece of text, you will find it easiest if it allows your eye to scan smoothly downward by using a particular spacing between lines which is related to the height of the text.
Read Improving Layout with Vertical Rhythm by Rachel Shillcock to learn more about it.
Luckily, after a few decades of trying, people have figured out some best practices regarding typography and creating readable text:
#333
) instead of black for text on a white background to avoid the sharpness of contrast.Sometimes the best way to "get" typography is to experience it when you've got your eyes open -- Read 20 Websites With Beautiful Typography by Kevin Liew via Queness.
Another good way to learn typography on the web is to start asking questions of the websites that are out there -- and the Chrome "WhatFont" addon is perfect for this. Install the Chrome WhatFont Addon. Just activate it and click on a section of the page to see the font family that was used and its characteristics. Tuck away the ones you love in a document somewhere for a rainy day.
For those who are already familiar with HTML and CSS: