A Handy Guide to Proper Web Typography for a Successful Design

Posted in Tips, Usability, Web Design2 years ago • Written by 6 Comments

Basically, typography is the art and technique of arranging typefaces for communication purposes. In other words, typography is a simple arrangement in order to transmit a message, while good typography is the attention to visual accuracy and details, even the small ones. Typography started when writing appeared. The most simple arrangement of letters was also some sort of typography. Nowadays, typography is an element we see everyday and everywhere — Prints, Books, Newspapers and letters, TV and Web. Even the foremost websites were caring about typography, and were trying to improve it as much as possible with the resources available at that time.

Web Typography

Image Source

Web typography is just one of the most recent branches of the general typography concept. While images can also transmit a message, most of the content available on websites is made up of text, that is why so much attention has been given to web typography lately. While planning and designing a web page, typography isn’t less important than the visual hierarchy, selection of correct colors, functionality and many other features. We should never under-estimate the importance of web typography, nor think that it plays a minor role for a great user experience.

Anyone who strives to have amazing typography must understand that print typography and web typography are totally different things. While some principles may be the same, web design is a totally different “environment”. Both print typography and web typography have their own rules and guidelines which must be respected. A crossing of these two may result into mixing different principles which almost have no chance to exist together.

Hierarchy

While you may already be familiar with hierarchy in web design, you may feel that there is a hierarchy in typography as well. Hierarchy in typography will give you a starting point for reading the text displayed. This is quite important because you always want to deliver your message correctly and you want your readers to understand it properly. Lots of websites don’t have this issue anymore but you should keep it in mind, so your website doesn’t appear on a one-century-old websites’ list.

Spacing Issues

While there are really very few websites with typography hierarchy issues, there are quite a lot with spacing issues related to their typography. As there must be a logic in spacing between all elements on a website, so there must be a logic in your typography spacing as well. You may want to get familiar with a few terms like: Leading Size, Kerning, and Tracking.

Leading Size is the tool which allows you to increase or decrease the whitespace generated between the text rows available. You can read here why increasing it will help your readers reading your text. Kerning is the process of adjusting the spacing between characters in a font with the aim of achieving a more pleasant visual look. By using the Tracking tool, you can achieve almost the same effect, the only difference between Tracking and Kerning being the space generated. While tracking generates an equal amount of space between each character, kerning adjusts the space based on character pairs.

Colors and Color Palette

Image Source

The colors in typography don’t specifically mean the color of your text which is usually of one color, instead they mean the over-all colors used on your website. All the colors and graphics used on the site will represent a “background” for your text, that is why you should be careful with the colors used. They must always fit the color of your typography, and should never obfuscate your text. You can also experiment with bigger-sized typography (also called as macro typography) to achieve better results. Defined in a simple way, macro typography is the use of bigger-sized text for attention-grabbing purposes. It is usually not longer than 1-4 words that is why it is important to keep it as short and correct as possible. It may be followed by some heading-sized text under your key message, but it’s not as important because that isn’t the focal point on your site, while big-sized text is.

Examples of Macro Typography in Websites

Purple Bunny

Matt Hall

VS

Font Pairs

Font pairing is the process of combining 2 or more typefaces with the aim to create a nice combination. While this sounds interesting, for beginners it is a hard job. Choosing one font, or a few fonts that are nice is well, but when your aim is to combine 2 fonts to achieve a perfect paring, it is much harder then it sounds in theory. Font Pairing has the aim to reduce the flatness which may be created while using one font choice, even with different styles. It would be a good practice to use one font for all headlines you may have while the other one for simple paragraphs. There is even a great book by Douglass Bonneville with thousands of font pair combinations for those who’d like to see ready examples.

Contrast of Size/Weights

It would be a big mistake if  you make your fonts non-differentiable. As you already know, it is very important to use a pair of fonts in order to have decent typography, and not some uniform text. Even if you have found an amazing font pair, you shouldn’t forget about setting correct sizes and weights for your fonts. Setting unsuitable weights and sizes will basically ruin your pair as it will become hard to understand that you have used different fonts. Your fonts should never be lost in the background because of similarity, incorrect size or mismatched background color.

Font-Replacement Methods

Image Source

The old times are gone when designers had to use only fonts available on user’s computers or even images with text so they would see the correct font. As technology evolves, HTML5 is starting to get over flash, and there are a lot of amazing tools which would let you replace any font they have in the collection, without making your users install any specific font in order to view the text correctly.

@font-face

@font-face replacement method is one of the easiest methods. It has been introduced only a few years ago. It is really easy to implement as there is no more messing around with Javascript and jQuery code while you are installing it. It only relies on CSS, and takes addition of a few strokes of code to be up and running. The only con which font-face may have is that rendering is interpreted in different ways by different browsers. Using the latest versions of browser should minimize this problem, but, anyway it’s on the horizon and we mustn’t forget about it.

Google Fonts

Even though Google released its font directory only in 2010, it already has almost 500 font families. Google Fonts API is being widely used because of its simplicity and trust the company has built itself overtime. The only con Google Fonts has is its lack of really qualitative typefaces. Even if Google offers full font families, they don’t have those premium-looking fonts which would make your website stand apart.

Typekit

Typekit is a well known service which has been used a lot over the years. It has become really popular because of its huge font collections. It has almost one thousands fonts and most of them are looking amazing. Typekit got popular because it offers those premium @font-face solutions that Google doesn’t offer. Launched in 2009, it also got some popularity being founded one year earlier than the Google Font directory. The only con which troubles some of its potential clients is the paid subscription method. It is a yearly fee you have to pay, besides this, you are also limited to a specific number of page views per month and fonts per website, depending on your plan.

FontSquirrel

The best thing about FontSquirrel is that it has lots of fonts available which are used widely and it is absolutely free. It is being loved for the number of nice fonts it provides and the absolutely free usage on as many websites as you would like. FontSquirrel even allows you to use a @font-face generator which lets you create your custom kit @font-face fonts.

20 Written Articles

6 Comments Best Comments First
  • Alexia Liberty

    Sunday, April 8th, 2012 09:59

    1

    Thanks for this. I am struggling with typography at the moment.

    0
  • Anton Radev

    Sunday, April 8th, 2012 11:24

    2

    Thank to Stelian!

    One addition from me (since it is not mentioned in the article) if I may intrude :)
    Adjust careful the settings in Google Web Fonts – including different font styles and chars. Include only the important. You can always change che including stylesheet code.

    I have never tried Typekit but I think it is time for us to meet :)

    Greetings and thanx for the resource

    0
    • Stelian Subotin

      Tuesday, April 10th, 2012 07:45

      4

      Hey Anton!

      Thanks for the tip ;)

      Cheers!

      0
  • Maria Wendt

    Monday, April 9th, 2012 14:53

    3

    Great article, Stelian! Your examples of proper uses of typography are on the dot! One thing I wasn’t sure of is whether or not FontSquirrel’s fonts are free? Thanks! Hope you had a nice Easter!!

    0
    • Dainis Graveris

      Sunday, April 15th, 2012 06:24

      6

      Hello Maria, regarding FontSquirrel, check their site top tagline – 100% free for commercial usage. These fonts are completely free!

      0
  • Selahattin

    Wednesday, April 11th, 2012 02:53

    5

    inspiration for this article was good for me ir. Thank you for your sharing.

    0
  • Selahattin

    Wednesday, April 11th, 2012 02:53

    5

    inspiration for this article was good for me ir. Thank you for your sharing.

    0
  • Maria Wendt

    Monday, April 9th, 2012 14:53

    3

    Great article, Stelian! Your examples of proper uses of typography are on the dot! One thing I wasn’t sure of is whether or not FontSquirrel’s fonts are free? Thanks! Hope you had a nice Easter!!

    0
    • Dainis Graveris

      Sunday, April 15th, 2012 06:24

      6

      Hello Maria, regarding FontSquirrel, check their site top tagline – 100% free for commercial usage. These fonts are completely free!

      0
  • Anton Radev

    Sunday, April 8th, 2012 11:24

    2

    Thank to Stelian!

    One addition from me (since it is not mentioned in the article) if I may intrude :)
    Adjust careful the settings in Google Web Fonts – including different font styles and chars. Include only the important. You can always change che including stylesheet code.

    I have never tried Typekit but I think it is time for us to meet :)

    Greetings and thanx for the resource

    0
    • Stelian Subotin

      Tuesday, April 10th, 2012 07:45

      4

      Hey Anton!

      Thanks for the tip ;)

      Cheers!

      0
  • Alexia Liberty

    Sunday, April 8th, 2012 09:59

    1

    Thanks for this. I am struggling with typography at the moment.

    0

Comments are closed.

54.211.213.10 - unknown - unknown - US