Did you know that 95% of all the information available on the web is written language? A lot of thought goes into the graphics, interface, and style of the website, and the same amount of effort is needed in choosing the right typography. Let’s have a look at some of the web typography best practices for 2018.
Have a Visual Hierarchy
One of the most important objectives of good web typography is to have content that would look aesthetically pleasing. You need to have a page that is properly divided into headings, sub headings, body text as well as attractive fonts (much like this page right now). Make sure that there is enough white space, so everything doesn’t look too congested.
Have a Strong Body
The next thing that you need to focus on is the main body of the site. The text of the site is very important because that is what people will be spending their time on. You need to have short paragraphs so that the readability is high. Here are some tips that will help you out:
- The normal size of the text is 16.
- Do not center align your text because the uneven sides on both the sides look very unsightly. What you need to do instead is set the margins on auto as it will give it a neat effect.
- You should know that web pages are different than printed pages, so you may want to avoid uneven spacing.
- Opt for fonts that have low contrast because high contrast ones are difficult to read.
- The line height of the paragraph should be between 1.25 to 1.5x.
Pay Attention to the Headings
Some people will not read the text on the page but if you want to grab their attention, you need to invest your energies on the headings. Here’s how you should work on the headings:
- The heading size should be around 36px.
- You should pay more attention to the heading than the body.
Look at the Space Between
The amount of space between the text says a lot. It is a design principle that you need to pay attention to. You have to find the right balance between dominant headers and small headers attached to the paragraphs.
Keep the Lines Aligned
You don’t want your sentence to run across the screen as that will just cause eye fatigue. What you need to do instead is limit the number of characters per sentence. It is recommended that the number should be 60 to 75 for desktops, as well as 35 to 40 for mobile phones.
You Need to Keep Your Text Responsive
Responsive web design is more important than ever these days because more and more people use the internet on their mobile phones. Working on font sizes has become overwhelming because you need to go through different media queries to target the text on the website. So, keeping your text responsive is a better option.
Go For Ems Instead of Pixels
If you want to make your website’s topography easy, you need to focus on ems instead of pixels. Ems makes it possible for developers to comprehend the scaling between the font sizes because they have smaller units that are much more manageable than pixels.
Tips For Great Web Typography
Here are some tips for great web typography:
Keep it Simple
Make sure that the typography of your website does not increase more than 2 to 3 fonts. Ideally, you should have one font for the heading, one for the body, and one for subheadings. If you will opt for too many fonts the end result will be too messy.
Only Embed the Important Things
You only need to pay attention to the things that you think are important for your website. If you want a bold style, embed only that and leave out the rest of the styles. If you will load a lot of styles, it will be an additional load for the website
Pay Attention to the Readability
You may want to use a very pretty font for the website but if the alphabets are not clear, what is the use of such a font. Your users will not spend their time reading the font and will move ahead or worse leave the website.
Be Mindful of the Backgrounds
If you are using a dark font, you need to use it with a light background because that will promote readability. Dark backgrounds look great but make everything look congested, so make sure that you avoid that.
Learning about Pairing Fonts
Pairing completely opposite fonts will just confuse the reader, you need to opt for something that is different but still complements each other. One of the best ways to go about is to use variations of the same font family.
Hyperlinks
One of the most common ways to make hyperlinks prominent is to underline them. However, if you want to avoid this, make sure that you at least italicize the text that’s linked to something. You can also use a different color for the anchor text to make it stand out. Hiding hyperlinks is not recommended as that’s a good way to get penalized by Google.
If you want your content to get attention, you need to use all the web typography best practices that have been mentioned in the article. If you want to build a great website, you can always take courses to become a web developer.