Web designers often use hit and trial methods to get beautiful typography for their websites. Understanding typography and its techniques will help you to build your website faster and make it look more professional. I this post I will am writing all about creating beautiful and readable typography.
What is Typography?
Understanding the meaning of typography is very important:
Typography is the art and technique of arranging letters to make the language more readable, beautiful and reflect the content. The arrangement of letters involves the selection of typefaces, point size, line length, line spacing and adjusting the spaces between groups of letters.
A typeface(or font family) is a group of letters(or fonts) which share the common design features. Each font has its weight, style and size.
Classification of Typefaces
Typefaces are divided into mainly three types: Serif, Sans-serif and Script. Each of this kind is further classified.
In humanist serif the contrast(or difference) between the think and thin line is minimal.
This typeface is suitable for journalism and historical websites. Adobe Jenson, Arno, Berkeley Old Style etc are examples of humanist serif.
In transitional serif the stroke is sharper and the contrast between the think and thin lines is bit more than humanist serif.
This typeface is suitable for real-state websites. Borgia Pro, Times New Roman etc are example of transitional serif.
In slab serif there is no contrast between the think and thin lines.
This typeface is suitable for marketing and promotional websites. Arvo, Clarendon, Rockwell , Courier etc are example of slab serif.
In sans-serif typeface there is no small line attached to the end of the letter. The stroke of the letter is made up of think and thin lines.
Arial, Verdana etc are examples of sans-serif.
In humanist sans-serif the contrast between the think and thin line is minimal.
This typeface is suitable for education and goverment sites. Alegreya, Verdana etc is an example of humanist sans-serif.
In transitional sans-serif the contrast between the think and thin line is higher.
This typeface is suitable for technology and transportation websites. Akzidenz Grotesk, Franklin Gothic etc are examples of sans-serif transitional.
In geometric sans-serif there is no contrast between the think and thin lines. geometric shapes form the backbone of letters.
This typeface is suitable for science and architecture websites. Kabel, Nobel etc are examples of sans-serif geometric.
Select typeface that is more readable and reflects the content of your website. Selecting a single typeface for your website is enough, use it it different areas of your website by changing its size, weight and color.
If you want to use different typefaces in your website then keep these points in mind:
- Don’t use typeface of same style(humanist, transitional etc) nearer to each other. For example: Don’t make the heading and content which are attached together to belong to same style.
- Don’t use fonts of same class(serif or sens-serif) nearer to each other.
Remember the simple trick, keep same typeface or change a lot.
These mentioned points will make the typography look awesome.
Different places of our website has different font sizes. Larger fonts are catched by our eyes before the smaller ones, therefore heading are larger then content font size.
Web designers first decide the font size of the page content. and then set font sizes of other components relative to that. Usually font size of page content is 16px, but its not compulsory to follow this measurement.
The font-size also depends on the viewport size to make the text more readable in different sized devices. Check out my article on responsive typography.
Headline(h1 tag) font size is around 200%-300% of the body content font size. h2 font size is 150% of the page content font size. Similarly you can decide the font size of other components according to the design and look of the website.
Text formatting tags reflect the same size as the content.
Line height is the amount of space between the lines of text. Line height should be 150% of the font size of the text.
Italic and Bold Weights
Weights can be used to emphasize the importance of the text and also can be used for designing. Therefore headings are usually made bold to emphasize their importance. Bold and italic text are read by users before anything else, so make sure they reflect the importance of the text.
I covered all techniques I use to make typography of my website look professional and awesome. I will be adding more points in future to update this article. Thanks for reading.