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.
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.