Instantly improve your web typography skills
Craft an unforgettable user experience by harnessing the power of font usage on your webpage.
Choosing the correct font
The most commonly used typefaces on the web are Serif, Sans-Serif, Script, and monospaced fonts.
Serif:
These fonts are used for established or old-school brands like banks or for fashion magazines and jewellery brands.
These fonts convey a traditional and formal vibe.
They can be used for long-form copies, like big paragraphs.
Some popular serif fonts on the web are Bodoni, Garamond, PT serif, and Noto serif.
Sans Serif:
These are clean, minimal, and modern-looking fonts.
These are the most commonly used fonts on modern websites.
These can be used for long-form copies as they are easy on the eyes of the reader.
Some popular sans-serif fonts: Inter, Open sans, Space Grotesk, Poppins, and Montserrat
Script:
These are the fonts that look like they were hand-drawn.
They provide a warm and personal touch.
They are not suitable for a long-form copy.
They are commonly used for logos, headlines, and wedding invitations.
Popular script fonts: pacifico, dancing script
Monospaced:
These have each character of a word equally spaced so that we can see each individual character clearly at a glance.
The personality of monospaced fonts is often seen as practical, precise, and functional.
Commonly used to show code IDEs.
Can be used to show code snippets on a website.
Popular monospaced fonts: Courier, roboto mono
Tracking and leading
Tracking:
Tracking or Letter-spacing is the process of simultaneously adjusting the overall space between groups of letters.
Larger type sizes, such as headlines, use tighter letter spacing to improve readability and reduce space between letters.
For smaller type sizes, looser letter spacing can improve readability
Increase letter spacing with uppercase text
Decrease letter spacing when increasing font size & font weight
Leading:
Leading or line spacing is the vertical distance between two lines.
When text is very small we need to increase line spacing to make it more readable. Lines should not be too tight but they should also not be too big that you can actually notice the white blocks in between lines.
And decrease line spacing for large text sizes
The line height for a paragraph should be around 130 to 150% of the font size. Or you can always use the golden ratio (line height will be = font size * 1.618)
Text wrapping
Try to make each line about 10-11 words or 60 to 80 characters long, for mobile, it becomes 35 to 45 characters. Otherwise, people will have to turn their heads to read the long lines from left to right.
A tick I use to ensure proper text wrapping of each paragraph in my HTML page is using the clamp CSS property and setting the width of the paragraph to 50% of its container with its maximum value to be 75ch (75 characters long) and min width to be 45ch.
Widow
A widow is a very short line – usually one word, or the end of a hyphenated word – at the end of a paragraph or column. A widow is considered poor typography because it leaves too much white space between paragraphs or at the bottom of a page. This results in poor horizontal alignment at the top of the column or page. So try to avoid it.
Text Alignment
Left-aligned: Left-aligned text is most common for left-to-right languages like English.
Centre-align: Centred text is best used to distinguish short typographic elements within a layout (such as pull quotes), and is not recommended for long copies.
Right-align: It is the most common setting for right-to-left languages, such as Arabic.
Limit the number of fonts you use
Combining typefaces can be very tricky, so to avoid confusion:
try to reduce the number of typefaces you use in your project and,
select the combinations that are guaranteed to work.
Some font families come with both serif and sans serif typefaces so they are guaranteed to work together. PT and Noto are great examples of this.
Create a typographic scale
Make sure you scale up your typography with some rhyme or reason, not some random stuff.
I suggest using the golden ratio as it almost always works.
Golden ratio: Basically, you multiply the font size by 1.618 for every increasing step in your scale.
A useful resource for setting up your type scale is https://typescale.com
Contrast
The most common ways of giving contrast are using font weight, font size, and color.
Font weight: We can adjust the weight of the text to make it stand out. Thus the weight of the heading is much higher than that of the paragraph that follows it.
Font size: When adjusting the size of your typography to improve contrast, it's important to consider hierarchy and proportions and thus Headings and subheadings should be larger than the body text, to make them stand out and guide the reader's eye through the content.
Color: Adding color to your typography can also help improve contrast. Using a darker color for the text against a lighter background, or vice versa, can create a sharp contrast that makes the text stand out.