At Webydo, we understand the importance of creating websites that work well and look great across a wide range of devices being used today.
Responsive websites with layouts that change based on a visitor’s screen size are critical to success on today’s Web. The typographic styles used on those sites (and how those styles adjust for mobile viewers) are an important part of this equation.
When it comes to combining fonts that will be viewed on mobile there are 7 Golden Rules that apply to pretty much every case:
1. Make It Readable
Even if you chose to ignore every other rule on this list(which you shouldn’t), one rule that you can never ignore is that you need to make your site’s text easy to read.
If a site’s content is a challenge to read then people will simply not read it. This means lost business and potential customers.
On mobile devices screens are small and variables such as lighting & reflections can make those screens more difficult to read. Text with letterforms that are sized properly, not too thin, and colored in such a way to make them easy to read against their background are all keys in making text readable.
2. Establish a Visual Hierarchy
Visitors typically scan websites very quickly. By establishing a visual hierarchy with your text, you immediately show those readers which text is most important and where they should focus their attention.
You can use this focus to your advantage by directing people to the content you want them to pay attention to, rather than where they decide to look. This can be the difference between a mobile visitor quickly scanning a page with homogenous text & quickly leaving the site because nothing stood out to them, or that same person keying in on critical content that will keep them interested and driving towards a goal destination. This could be making a purchase, becoming a member, or simply requesting more information.
3. Consider the Audience
Think about the audience that will use a website. The typographic styles and font choices that you use should feel natural and welcoming.
If they’re used to going to sites with very modern fonts and sophisticated design, then using grungy fonts will be out of place and confuse visitors.
The font choices you make should immediately set a tone that feels familiar to a site’s visitors and makes them comfortable.
4. Create Contrast
Contrast in typographic design works in a number of ways. You must use contrasting colors to ensure readability. Dark text set against a lighter background makes that text easier to read, while fonts and backgrounds that are too low in contrast make the text difficult to process (see point #1).
Contrast in typography also can refer to the different fonts that are paired or the way that they are styled. If those fonts are too similar, you lose the visual hierarchy benefits of a design and that design starts to look bland lacking any variety.
5. Use Fonts from the Same Family or Designer
When deciding which fonts to combine on a site the possibilities can seem daunting. With so many amazing fonts available it’s easy to feel overwhelmed.
One way to find great combinations is by using fonts that are a part of the same family, or which were created by the same designer.
One of my favorite fonts to use on websites is Raleway. This font was designed by Matt McInery as a single thin weight, but was later expanded by other designers to include 9 weights ranging from very thin to extremely bold and thick.
The variety that this one family gives designers is incredible, and pairing the different weights of this font into a design offers variety while still feeling uniform.
In some cases fonts do not have multiple weights or versions. You can then look for other fonts that were created by the same designer. Oftentimes those fonts share similar characteristics and are perfect candidates to work together.
6. Limit the Number of Fonts
Regardless of how you decide to combine fonts, one important thing to look out for it overdoing it with too many fonts. Many experts will suggest you use only two or maybe three fonts in a given design.
While this is certainly good advice to consider and follow, there are instances where more fonts may make sense. But in most cases too many fonts is a sign of a design that lacks focus.
Overloading a site with fonts not only affects the visual appearance of that site, it can also have a dramatic impact on the performance of the web pages. Web fonts that must be loaded require time to download, either from the server or from a third party webfont service.
This can make a site crawl and when people are visiting that site on mobile devices with laggy Internet, every millisecond counts!
Too many fonts = slower load time, and slower load times often mean unhappy visitors who decide to go elsewhere.
7. Don’t Forget to Test It Out
All the rules in the world are pointless if you don’t test a site in real world settings.
Make sure you load your webpages on actual mobile devices and see how the text flows and lays out for those small screens. What may have made sense in your design concepts may break down once you see it in practice, meaning you need to make some adjustments to get that text where it needs to be to be most effective.
Author Bio: Hadar Talyosef is Community Designer at Webydo, a web design platform for professional designers and web agencies. Hadar also runs “TALYOS” a line of bespoke, Japanese-bound notebooks, sketchbooks and notepads.
Leave a Reply