Typography always seems to be an underrated topic when it comes to web designing. In a world where your website becomes your identity, you could either choose to be the elegant, educated prince or the ignorant pauper. And yes, typography can make that difference. The design and the readability of your website is completely dependent on good practice typography.
For those newbies to web design, typography predominantly has to do with the very way your website looks and feels – Its not just fonts and font size, there is a lot more to learn.
1. Emphasize on the Typeface
The content remains the primary tool for grabbing the attention of a reader, with the design coming second. As most web designers say, the design will only takes you there; it is the content which impresses people. Although, to add emphasis to the content, it is essential that you to choose the right typeface.
Here is an essential infographic to help: So You Need A Typeface Infographic.
2. Using the Grid
The structure of a website is important for captivating the attention of the user. Simplify your design decisions and give proportion and order to your content by making use of a grid. There are a multitude of grid resources available.
3. White Space Balance
No one likes a website cluttered with content with very little breathing space for the letters. Leaving some space for margins on all sides of the text is a must; equally vital is the line height. Too little white space tends to frustrate the user, just as too much would as well. Finding a balance is very important.
For an in-depth overview of white-space within web design, you could try this article: How to Effectively Use Whitespace in Web Design.
4. Size Does Matter
All websites have a hierarchical structure where the headings, the subheadings and the text are of different sizes. Typically, how big should the heading be than the subheading? This is more of a preference than an answer. There are different scales for selecting the size; choose the one which appeals to your website.
If you are looking for some guidance with your typography scale, try this article: How To Use Size, Scale, And Proportion In Web Design.
5. Line Spacing
Line spacing (Leading) dramatically affects the readability of sentences – depending on the font size, type face and other measures, the line spacing should be selected for the best possible display. Typically, a line space of 2 to 5 points more than font size would be perfect for an average website.
Here is a handy resource that helps with line-spacing: Type:Line Spacing.
The measure of a web page is basically the width of your text. Too wide requires the person to shift his eyes and neck too much, while too narrow measure requires a lot of scrolling of the screen and the eyes.
7. Text Alignment
The worst thing you could possibly do to a web page is to justify the content’s text alignment. For one thing, it looks like an elongated spring; another consideration is the readability.
There is no reason to think that font is not that important just because it appears late in this list; in fact, the font is one of the important considerations in typography. Choose a font that appears clear in all sizes and headings.
9. Single Font per Sentence… at least
If a sentence had different fonts for every word, it would look like a traveling circus and definitely irritate the user. It is better to stick to one font for the entire sentence or for the whole paragraph.
10. Font size
The font size is another primary factor to be considered. While too big a font size requires the user to keep scrolling, smaller font sizes strain the user’s eyes.
This HTML Font Size Code should give you some guidance.
11. Allow for Font Size Increase
Scaling up the font size has proved to be a challenge for every website because of the retention of the content within its given space. Plan your layout in a way that allows font size to be increased.
12. Quotation and Apostrophe Marks
Most people don’t realize that while typing in a word processor, it automatically identifies the start and end of a quotation and adds suitable symbols. HTML requires that you use
" for quotations.
For a comprehensive list of HTML special characters, try HTML: Special Characters and also All You Will Ever Need to Know About the Apostrophe.
13. Limit your Fonts
Unless you are designing the website for a specific font creation company, it would be wise to limit the number of fonts you use to only two or three.
Don’t use too many typefaces from Web Design from Scratch.
14. Use “–“ instead of “–“
The use of the double hyphen can affect readability; therefore, it is recommended that you use the M-dash or the N-dash instead of the double dash.
15. Serif for Headlines and Sans-Serif for the Body
Serif fonts are the accented fonts and look amazing on the headlines, while sans-serif offer more readability even if the font size is smaller – hence, they can be used for the body.
The ellipsis symbol is used to denote omission or continuation. In order to be precise, the actual ellipsis should be used instead of using three periods – (…). (HTML: Special Characters).
17. Shoot Properly
Bullets are one of the factors that can improve the look of the content. If the bullets are within the paragraph, it would look sloppy; therefore, bullets have to be indented separately.
This tutorial will shows you how to make your lists stand out: Making Lists Look Nicer with CSS.
The color of the font is of primary significance since colors highlight the content. Use of contrasting colors is advisable; also a menagerie of colors could ruin the effect.
- 10 CSS Code Snippets That Demonstrate Responsive Text Techniques
- 8 Fantastic Examples of Variable Fonts in Action
- 10 Stunning Examples of Text Distortion Effects in Web Design
- 10 Popular Web Typography Frameworks & Libraries
- 8 Excellent Examples of Using Stacked Text Blocks in Web Design
- The Subliminal Connotations of Our Font Choices
- 10 Amazing CSS & HTML Retro Type Effects
- 10 Code Snippets for Creating Stunning Text Masking Effects
- Going Up: Vertical Lettering in Web Design
- Set Your Text in Motion with These Dazzling Effects