15 Quick Web Typography Tips for Newbies

In web design, you have to understand that all the elements, whether they are big or small are really important. Like in a system, they exist in a perfect symbiosis if all of them are working fine, thus making your website look and feel great. Experienced designers already know that even the most unnoticed elements in web design need special attention. Let’s talk about typography for instance. It might seem like all you have to take care of is fonts and sizes, and YES this is true but only partially.

Newbie designers should know that typography is really important in a design and should pay more attention to it. It’s not only about the content and the design, but it’s also about how this content is presented to the visitor of your website. If you are new in the business, we would like to give you some tips about typography in web design and stress out their importance.

Web Typography Tips

15 Quick Web Typography Tips for Newbies

This article will showcase some quick useful tips you should read first, so that you can proceed to using typography in your design.

1. Fonts:

The right font is important for a website and you know it. There is no point in a good content if the font you choose is unreadable. You have to choose one that is right for your design and at the same time appears clear in all sizes and headings.

2. Font size:

One thing you don’t want is make your visitors tired while reading your blog/website right? In this case the right font size is required. A big font will request lots of scrolling, while small fonts will test your visitors’ eyes and they might not like that. You have to make it comfortable for the eye and easy to read.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

3. Make your font adjustable

People are different and so are their preferences. You have design your website in a way so that it will be comfortable for the visitor. So, be sure to take into consideration the option to increase or decrease the size of the font you are using.

4. Don’t overdo it

While we are sure you want your website to look unique, there is no need to play too much with your fonts. Selected a limited number of fonts that you will use for your website, unless it is a website specialized in fonts. Diversity in web design is good, but not when it comes to fonts on a single page.

5. Use the right color

Be sure to use a suitable color for your fonts. It has to differ considerably form the background color range, in order to be readable.

6. Proper dashes

There are generally three types of dashes used in typography and you have to understand where and when each of them should be used. These are usually let out of sight and considered to be unimportant but this is wrong.

- The “em” dash (—)

It is named like this because it is the width of a capital M and at the same time equal to one times the current font size. The “em” dash (—) is used when you want to delimit a separate clause in a sentence.  As the em dash is quite long as it is, you have to choose whether you should allow spaces between it and it depends on your font mostly.

- The “en” dash (–)

This one is usually used in order to denote ranges (in 1-2 months) or relational phrases like “mother-daughter” for instance.

- The hyphen (-)

The hyphen is usually used instead of the M-dash and this is totally wrong. You have to use it in hyphenated words like “low-cost airlines”.

7. The guillemets (») are not for direction

The guillemets are mostly used in quote marks. However I have seen people using them in order to show direction like in ‘Read more »’ for instance. This is kind of wrong and you should consider on changing that if you practice it.

8. “Ellipses” is not three separated dots.

The ellipses is used in typography in order to show continuation or omission. It might not seem important but a lot of people use three dots (…) in order to show the continuation of their thought – which, in web typography is wrong. The ellipses is a single entity and should be used properly. You can use it as “…” in HTML.

9. Make use of grids

It is important to have a neat structure on your website, thus you can catch the attention of your visitor. Use a simpler design but make use of the right proportions by using grids and you will see how pleasant for the eye this can be. You can find lots of grids on the Internet; you only have to research a bit.

10. White Space Balance

You already know the quote about the cluttered desk right? The same etiquette applies to web design. Nothing is more awful than a cluttered website with no space to let it “breathe”. It is really disturbing for the eye, so it might make the visitor close your page and just forget about it. You have to respect the white space on your website. Leave space for margins on all sides of the text and between lines.

11. Choose the right size

Take into consideration the sizes you will use for your website. You have to choose the right scale for selecting the size of your fonts. Remember that there is a hierarchical structure when it comes to headings, subheadings and the text of your content.

12. Text alignment

Another thing to consider is how you align your text. The ideal choice would be – left aligned and unjustified. Justified type is usually a bad choice as it might become hard to read and there are lots of weird spaces between words.

13. Proper quote marks are pleasant to the eye

There are two types of quote marks that you can find on the keyboard and you should use them properly in order to please the eyes of your visitors. There are single quote marks (HTML entity – ‘ (left) and  ’ (right)) and double quote marks ( HTML entity – “ (left) and ” (right)).  And there are two ways to represent them: ‘single’ vs ‘single’ and “double” vs “double”, the first choice being more pleasant to the eye than the second.

14. Single font per sentence

As I have stated before it is better to use less fonts as the content will be more readable and won’t irritate the viewer. I would like to stress out its importance especially if you are thinking of using several fonts in one sentence. This would be a wrong choice unless you really want to emphasize something and point out the importance of some words in a text.

15. Proper leading matters

This means leaving space between the lines of a text in your content. It depends on the size of your font and it is really important, as it makes the text readable. As a general rule, the leading on your website should be ≥140% of your font size and you should make sure to follow that. Experiment with your leading and you will understand what is the best choice for the design of your website.

A girl that lives through the lens of her camera - as this is the best way to see things as you want them to see. Born and raised in Moldova, now living in sunny Cyprus.

Newsletter

6 Comments
  1. mrsarun Mar 24, 5:40 pm

    Hey, great article, but shouldn’t you practice what you preach ?

    #12 : “The ideal choice would be – left aligned and unjustified. Justified type is usually a bad choice as it might become hard to read and there are lots of weird spaces between words.”

    Your entire article is justified :)
    And nearly every blog out there is justified.
    Personally I like justified text the most, but as you say, there are occasions when the spaces become way to big.

    Cheers!

    Reply
    0
  2. Oliver Mar 26, 6:16 pm

    Justified type is usually a bad choice as it might become hard to read and there are lots of weird spaces between words.

    If you use hyphenation it’s not a big problem to keep it readable.

    Reply
    0
  3. Sebastian Apr 20, 2:51 am

    I find this article to be very resourceful. Typography has been of those ‘farfetched’ topics for me, mostly because I could not gain a comfortable grasp to make use of it. The way you have broken down your individual points has really helped. I’m much obliged to say thanks!

    Reply
    0
  4. Russell Aaron May 23, 12:47 am

    I love DM as much as the next person. Why Aren’t all of the postings an article like this. I hate having to click here to read something, only to have it outsourced to another website. Just some food for thought as your website has a lot of visitors.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters