Web Typography refers to the text appears on your website. It's not only about the basic CSS text properties: What fonts to use, whether it should be bold or italic but also alignment, line height, spacing around: letters, words, and paragraph, etc.
Typography is about 90% of the design, it is a communication art. When someone visits your website, they may not care much about the graphics but, surely they will read the content. Hence it is important to balance the graphics and text on the website. Most developers just ignore or never think about the typography - It is necessary to understand it's the psychological effect of conveying a message to an audience. Before reading the text, people judge the seriousness of the text based on the typography (fonts). So let's get started, make sure you read this article till the end because you will find tools which can make this job easy.
Importance of Typography
Let's first understand the importance of typography
Keeps People Reading
Good typography should allow the reader to focus on the content and not the formatting. Good typography often goes unnoticed because it just makes sense. Consider these two examples above. From above which article looks more legible and user-friendly? Which one would you prefer to read?
Conveys a "feeling" or "seriousness" of text
Typography can affect how a piece of text is understood. Consider the example below, which one looks more suitable based on the title?
Most of us would choose the example on the top. The font size and type convey a feeling of power, seriousness, and importance; while the example on the bottom is fun.
Things to consider for good web typography.
1. Too many fonts (Bad Idea)
Using too many fonts on a single webpage may not be a good idea because they all fight for their attention. It will distract the users and makes them focus on various fonts rather than the message conveyed and it also makes webpage load slowly. Check out the example line given below it's overwhelming.
Choosing the correct font will support the content. These are the places on the web where you can find different fonts:
| Place | Price | Quality |
|---|---|---|
| fonts.com | Paid | Good |
| fontspring | Paid | Excellent |
| Google fonts | Free | Good |
| Font Squirrel | Free | Hit or Miss |
2. Text Alignment
Text alignment makes an impact on the way you read the text, you may never have noticed it before but your eyes may keep jumping from word to word instead of smooth motion. There are four types of alignment in typography:
- Left align
- Center align
- Justify
- Right align
Let's look at this one by one and understand when to use it.
a) Left align
Left align is commonly used in all the text documents because this is how we read the text i.e. from left to right. It also gives a vertical anchor to the reader so that they can jump from line to line. The default text-align property of the web is always left but it can also be explicitly specified in the stylesheet.
The line on the left in the above image shows the anchor. In the long text, it is always preferable to use left alignment.
b) Center align
Sometimes developers choose to use center alignment for some content on the webpage, it may not be a good idea if this property is used with the long texts. It doesn't provide an anchor on left like left alignment property, this makes it difficult for the readers to jump from line to line. As you see in the image below the anchor is present at the center which is a major flaw.
Although there are problems, the center alignment will be a perfect fit for small texts: poems, small phrases, etc.
c) Justify
Justifying the text on the web is not suitable in the web typography because it generates uneven spaces between the words for aligning the text, which is not a good idea as the paragraphs look weird due to this and it even makes it difficult for the reader to jump between the words.
Especially when it comes to responsive web design it should be strictly avoided as the spacing between the words may look good on a device of particular size but they may get distorted on the small devices.
d) Right align
Right alignment is rarely used in web development. there are few cases tough when it makes sense.
- While using language which is read from the right like Arabic.
- When there is some content already present on the right side of the content may be an image or an illustration. (works only when there is less amount of text content)
- It depends on your design, layout. Make sure that it complements your whole webpage.
3. Paragraph Separation
Paragraph separation is a fundamental function in the typography as paragraphs are used to introduce new sections of the story, characters or pieces of information. There are two ways to separate the paragraphs:
- Indents
- Margins between paragraphs
As shown in the image above you can easily understand which are two different paragraphs. Never use both ways to separate the paragraphs. The readers don't need two indications to understand the separation of paragraphs.
4. Line width
Like alignment, this may slightly affect the readability of the content. It is always safe to include around 80-90 characters in a line. It takes energy for your eyes to move from the end of the line to the beginning of the next line. Longer lines also make it easy to get lost when you finish a line and need to jump to the beginning of the next line.
These are the reasons why so many websites use fixed-width layouts or split the content into multiple columns on wider screens. Without constraining the width of the page or dividing it into manageable columns, line length becomes unacceptably long.
5. Text Spacing (Vertical)
line-height CSS property will be used to define the vertical text spacing. This plays a major role in clean typography, it allows breathing between the lines which makes it easy for the reader to switch between lines and even read the line without focusing much on keeping track of the line they read.
In the image above: the paragraph on the right looks cluttered which makes it difficult to switch between the lines and reader even needs to keep track of the line which they are reading otherwise, they may switch to a different line unknowingly.
Typography tools
1. archetype
Archetype lets you easily create consistent typography styling and spacing live, in the browser. Here are some amazing benefits of it
a) You can play with the fonts which will give you a clear idea of how your text is going to look on the web.
b) You can alter the spacing between words and paragraphs and instantly see the results on the right screen.
c) Mobile and Desktop preview of the text is available
d) As soon as you are fixed with your website's typography, you can export the CSS file which is one of the most useful features.
2. fontjoy
This is another amazing tool that provides you with the facility of font pairing i.e. to select fonts that share an overarching theme yet have a pleasing contrast. You can use the generate button at the top to generate different combinations. It uses neural nets to generate these combinations of fonts. If you want to know how it all happens behind the scene you can visit this link
3. Golden Ratio Typography Calculator
This will help you discover the typography for your website by entering your current font, font size, and content width. This tool is similar to the first one but it suggests the styling based on fixed content width.
Bonuses
1. Calligraphr - Transform your hand writting into fonts
Creating your own font has never been easier. With your own font, you can create genuine personal designs and calligraphic artwork. This will make your website look different from others. Well, I suggest not use it if you don't have good handwriting 😅.
2. kerntype
This will help you improve your sense of typography. You need to achieve pleasant and readable text by distributing the space between letters. Typographers call this activity kerning. Your solution will be compared to a typographer's solution, and you will be given a score.
Good luck with your next project!
I hope you enjoyed this article.
Happy Development.
If my posts or resources I share has helped you in some way, please consider buying me a coffee. It will really help me pay my tuition fee and encourage me to share amazing and useful stuff with you all.
Top comments (11)
Excellent post!
I've done quite a bit of typography in web design, graphics design, and even print book, and I can attest to all the above. However, in print, we almost always use justified, which creates straight lines on either side to aid the eye in following the text on the page.
Making fonts is a lot of work, but it's also quite enjoyable too. I once completely re-kerned a handwritten font for a cartoonist; my edited version of the font has been in use from about 2015 onward. (Fun Fact: I was also his colorist from comic 2237 to 2450. That was a whole new level of fun!)
Birdfont is my absolute favorite tool for font editing.
Thanks Jason!
I back you up on using justify in print. Checked some posts between 2237 and 2450, I gotta say that you did an amazing job on coloring, I really liked it.
Never used Birdfont before, will definitely give it a try.
Great post, and it's great that you provide illustrative examples of your recommendations. This is useful!
I will also leave a mention of this resource gapsystudio.com/blog/how-to-make-a.... Here are some good practical typography tips for choosing and shaping fonts.
What a great post. I have used some of these, but this showed a few things I have not seen.
I love typography. Thank you for writing this!
Glad, you liked it!
Thank you so much for this wonderful and insightful post.
Great read. Please I'm new here and I'd like to know more about youak
Sure. You can DM.
Great post! Thank you for sharing those amazing tools and your thoughts on this.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.