• Home
  • Inspiration
  • Design / Dev
  • Freebies
  • Deals
  • Home
  • Inspiration
  • Design / Dev
  • Freebies
  • Deals
CodeGrape Community Blog CodeGrape Community Blog
Input your search keywords and press Enter.
Inspiration

9 Tips On Typography in Web Design

by codegrape / March 20, 2020

Picture may be worth a 1000 words but for that, you need to have those 1000 words. LOL.

This means words are really important when we consider the website design. You see, 95% of content on the internet is just text.

So, words are still the best and effective way to communicate on the internet. While designing a website, it is necessary that you check how does the content appears to a site visitor.

Basically, the typography of your website should be compatible with all the display devices and should be user-friendly. We have jotted down a few tips that can help you improve the typography while designing your website.

Let’s take a look at each of the tips…

1. Choose fonts that justify your website’s purpose

This might feel a little tricky to you. But every font conveys a different message. Let us take an example for this –

You want to make a website to sell wedding dresses.

The fonts that will look attractive will be – Pacifico, Caveat, Lobster, etc. You see the cursive lines are connected and thus they look beautiful when used for a website that sells wedding dresses.

If you use similar fonts for an agency website, that won’t work. The brain works there and not beauty. LOL.

So, pick a font that serves the purpose of your website.

2. Choose fonts that are responsive on all the devices

Most of the website owners make mistakes by considering mobile display as a second option. Last year, it was found that 58% of people use mobile phones to access websites. And so, it becomes necessary that your website is mobile-ready.

The font type of your content should be such that they are easily readable on mobile devices. This means that the fonts you select should be visible and clear in all the sizes i.e. small size as well as large size.

You see these texts in various sizes. The fonts of Comfortaa and Caveat are compared here and you can easily make out that Comfortaa are easy to read even when the text size is reduced.

This means this font is mobile-ready.

3. Avoid Using All The Letters in Caps

IMAGINE THAT WE ARE CAPITALIZING ALL THE TEXT IN OUR CONTENT. DOES IT LET YOU FOCUS ON EACH AND EVERY WORD? HOW DO YOU FIND THE LETTERS TO BE?

NO NO NO… WE ARE NOT SHOUTING AT YOU.

But, it doesn’t feel that way, right? Yes, using all the letters in caps on your website makes a visitor feel like you are shouting on them.

You might end up annoying visitors. Using caps does show confidence and commitment, but using it for the whole content makes the user feel like you are screaming.

4. Sufficient space between letters, words and sentences for better readability

If you get a blank space between the words and sentences doesn’t mean you need to utilize that space. The gap should be enough that it can be comfortably read by a visitor.

The letters shouldn’t feel narrow or widespread, sufficient and constant gap between the letters and the sentences looks good.

5. Avoid using RED / GREEN text or support it with a special character

Due to Deuteranopia, there might be a few people who won’t be able to distinguish between normal text and Red or Green colored text.

But there is always a way. If you want to use the Red or Green text, you should try to support it with a special character (@,#,$,%,*,&). Normally, an asterisk (*) is used before or after these colored texts.

6. Do not use more than 3 types of Font styles

“Oh my God! This is so confusing, I am finding this hard to read and can’t keep my eyes on just one style of font.”

Yes, you can’t. This is what happens when you use different font styles on your website. Limit the use of font styles to two or maximum three styles but not more than that.

7. Decide the font based on the background image or video

You might not consider it important or sometimes would be ignoring this, but the background image or video on the web page gets covered by the text. You may think that it doesn’t matter, but it does.

Take a look at the above two images – two different layouts of a website’s homepage. Which one do you think looks good visually?

Undoubtedly the second one. This is because the text doesn’t overlap the objects in the image. When your text appears over the objects, it creates a disturbance amongst the visitors and it doesn’t look visually attractive.

So, it is necessary that your fonts match the background as well as they don’t overlap the image or the video in the background.

8. Keep the Typography and the Background Contrasting

The background color of the website on which the text will appear and the text color should be kept contrasting i.e. Use the light-colored font with the dark-colored background and vice versa.

Lorem Ipsum Dolor Sit Amet – ( or ) – Lorem Ipsum Dolor Sit Amet

Which one do you find easier to read?

That’s right, the second one and that is because of the contrast in background and font colors. The contrasting colors make it easy for a visitor to read the content on your website.

For the first text “Lorem…”, a user has to struggle a lot to read the text and sometimes he or she might give up reading your content.

On the other hand, due to the letters easily visible to a visitor in “Lorem…”, there are more chances that a visitor will stay on your page and continue reading.

And therefore Contrast = Correct.

9. Keep the hierarchy of fonts

Yes, creating a visual hierarchy is a must. For instance, you keep all the font size the same for the title, classifications and the content, it would become hard for a visitor to figure out different sections.

So make sure you utilize the hierarchy technique. This means you should select the size and style of the fonts based on its functionality.

The title should be assigned a “Title” style.

Similarly, a heading of a topic should be assigned “Heading 1” or “Heading 2” and the rest of the content inside the paragraphs should be “Normal Text”.

Examples of some of the best web designs (Typographically)

Let us now look at some of the best website designs based on typography.

1. CRRTT

CRRTT is a website of a freelance website developer. This website has only a single type of font.

2. Vito Salvatore

This website has an image expanding in the background and the fonts remaining steady. The font style matches the background images used here.

3. Glyphy

This is a website where you can copy and paste the symbols. It has just a single type of font and has only two colors, yellow in the background and black for text.

4. Myles Nguyen

This is a website of an interactive website designer. The fonts on the website float and slide simply.

5. Paolo Fornasier

This is the website of a music artist. It contains three different font styles.

6. Flandria

This is a website where you can read books on and it only has limited fonts that gives it a classic look.

Conclusion

The typography on your website matters a lot while designing a website. You don’t want to give your site visitors a bitter experience on your website and for that, the typography must be taken into account.

About the Author

I’m Chris Wagner, Head of Content @HostingPill. I regularly write about Hosting Web Servers, and WordPress. I have more than 9 years of Industry experience. Read my article on the best web hosting companies here.

capsdesigndevicefontjustifyletterresponsivespacetiptypographywebword
  • ♥208 2033
  • Read More
  • Previous PostThree Key Ways to Save Cash on Marketing in 2020
  • Next PostThe Most Important Productivity Hacks That Entrepreneurs Should Use

Related Posts

How to Make The Most of Your Restaurant’s Social Media
October 1, 2020
Overcoming Challenges in Virtual and Hybrid Event Planning and Execution
September 20, 2023
Impactful Investments: 5 Tips for Making Socially Responsible Investment Decisions 
April 29, 2024

No Comments

Leave a Reply Cancel Reply

Trust Signals for Websites to Lead To Sales: The Complete 2025 Playbook

June 18, 2025

Continue Reading

Commercial Intercom Systems with Door Release Support Smarter Access Control

June 11, 2025

Continue Reading

Why Letter Mailing Services Still Matter in a Digital World

May 20, 2025

Continue Reading

Snapmaker Proudly Sponsors Printed World Conference 2025 in Amsterdam

May 15, 2025

Continue Reading

Top 5 Graphic Design Trends in 2025 & Assets That Match

May 12, 2025

Continue Reading

Newsletter

Latest Posts

  • Trust Signals for Websites to Lead To Sales: The Complete 2025 Playbook
    June 18, 2025
  • Commercial Intercom Systems with Door Release Support Smarter Access Control
    June 11, 2025
  • Why Letter Mailing Services Still Matter in a Digital World
    May 20, 2025
Corporate Business Card https://www.codegrape.com/ Corporate Business Card
https://www.codegrape.com/item/corporate-business-card/49184

#brand #business #card #cmyk #corporate #creative #psd
Clean Minimal Corporate Flyer Design https://www.c Clean Minimal Corporate Flyer Design
https://www.codegrape.com/item/clean-minimal-corporate-flyer-design/48844

#creative #flyer #corporate #liflet #stationery
Real Estate Flyer Template https://www.codegrape.c Real Estate Flyer Template
https://www.codegrape.com/item/real-estate-flyer-template/48818

#flyer #interior #design #agency #poster #mortgage
Qtheme - Photography Website Template https://www. Qtheme - Photography Website Template
https://www.codegrape.com/item/qtheme-photography-website-template/52831

#qtheme #simple #modern #html #bootstrap #photography #website #template
Corporate Business Flyer https://www.codegrape.com Corporate Business Flyer
https://www.codegrape.com/item/corporate-business-flyer/48800

#a4 #advertisement #agency #business #flyer #corporate #creative #psd
InstaMedia - Download From Instagram https://www.c InstaMedia - Download From Instagram
https://www.codegrape.com/item/instamedia-download-from-instagram/49516

#instagram #download #social #image #video #photo #tool
Tri Fold Brochure Design https://www.codegrape.com Tri Fold Brochure Design
https://www.codegrape.com/item/tri-fold-brochure-design/48594

#trifold #brochure #design #illustrator
Corporate Business Card https://www.codegrape.com/ Corporate Business Card
https://www.codegrape.com/item/corporate-business-card/48542

#stylish #modern #business #card #corporate #creative #design #elegant #trend
Follow on Instagram
  • Scripts
  • Themes
  • Plugins
  • Prints
  • Graphics
  • Mobile Apps

Copyright © 2025 CodeGrape. All Rights Reserved.