Web Typography Tips

Tutorials

00_Header image@2x

How to use typography in digital design?

The hardest and the most intimidating part of designing, for me, was setting the typeface. I started as a designer who mostly worked in print. After making a career switch in the digital direction, I had to reshape my process, especially with setting the typeface while designing for the web pages. Here I will roughly share a part of my process, starting with choosing and setting typeface.

01_Inspiration@2x

Inspiration

You should continually read about typography, and refresh your typeface library from time to time. If you have too many typefaces, try making some list of fonts you actually use. Also, bookmark inspirational websites with awesome typography.

02_Do your reading@2x

Do your reading

Read the content for the website so you know what the website is about, and find out what the goal of your text is. Is it a place where people come to read medium to long articles? Or is it a website where most people are expected to scan the content, looking for something particular?

Before you do any type setting, start with training your typographic eye. Look around you, type is everywhere!
03_Make some notes@2x

Make some notes

Write down what you’re looking for. Should it be easy to read, or must it have bold or italics styles? Does it only require English characters, or will the website be multi-lingual? Write down the key points and visual cues but also all the random stuff that pops into your head.

04_Choosing typefaces@2x

Choosing typefaces

Choose typefaces with similar characteristics. Combine fonts with similar x-height. Fonts with similar x-height work better together as they have a similar visual weight.
Choose Typefaces from the same type designer. Each designer has a personal aesthetic that defines their style and because of that the fonts can usually work well together.
Put the two fonts next to each other and compare them based on their x-height, but focus more on the overall proportions.

Stay away from a typeface that comes in one weight or style. They will limit you too much and you will end up with the so-called faux font styles.
05_Setting ancor text@2x

Setting anchor text

In my process, I am really trying to start by choosing a typeface for body text. I start by setting a paragraph of text in Sketch app with as many typefaces applied I am choosing between, and I am comparing them and trying out in the layout. At this stage, I usually go and look for fonts on Google Fonts and TypeKit.

06_Dummy text, yes or no@2x

Dummy text, yes or no?

Use real content for trying out the different typefaces, if your client didn't send out the content use similar text which you found on a competitor website or similar web pages.

07_Trying out typefaces@2x

Trying out typefaces

Try the typefaces you consider using in your design in different sizes, colours and different browsers. The content will be displayed as a part of the website in multiple browsers and each has a different way of rendering fonts.

At the end of the article I will leave few useful resources to get an idea of how to preview and try out typefaces.

08_Scale@2x

Scale

The next step is to define font scale which relates to defining distances for all elements in-app or on the web. The default typographic scale is a a good place to start, but a modular scale is the best way to determine your typographic sizes.
Tim Brown (from Adobe) came up with the tool to create your own scale which is a Modular Scale.

09_Alingment@2x

Alignment


Left-aligned text is the most common setting for left-to-right languages. 
Right-aligned text is the most common setting for right-to-left languages, such as Arabic and Hebrew.
Centered text is not recommended for long copy. In most cases, centered text is used to distinguish short typographic elements within a layout and should be broken into phases with a variety of long and short lines.
Justified text is the norm for newspapers and books because of its efficient use of space. Web browsers can’t render spaces between the words for justified texts in a way  proper text editors can. This makes reading very difficult, so justifying text should be avoided on the web.

Train your eyes to become a pro at kerning with this fun kerning game.
10_Type color@2x

Type color

By “type colour” we don’t mean an actual colour like red, green or blue. In typography, “type colour” means how dark a text set in a certain typeface appears. This is affected by the contrast of a typeface but also by its x-height and style.

11_Text styles@2x

Text styles

After choosing the right typeface and after defining the typographic scale, I recommend creating text styles before you start designing the interfaces — of course, if you are working in Sketch, which will allow you to update with ease all layers which contain text layers.

*Continue exploring the Design Islands and you may find more tips and tricks about how to set the text styles in Sketch and many more tricks.

Happy sailing!

NEXT ARTICLE
Bounce
Tutorials
More treasures ahead
E95CC837-0713-48B5-BAA1-FC9DD4FA6399Arrrrr!
A true explorer like you is always in search of new quests and gems. How about we send you one every month?
TOP