Tag: typography

Web Typography: Why Web Fonts Aren’t a Matter of Opinion

Web typography: why web fonts aren't a matter of opinion.

Website font choices affect more than the design aesthetics.

You’re reviewing the latest mocks for your new website, and you’re not quite sure about the font choices. They look nice, but you wanted something edgier, bolder, something that pops off the page and grabs the visitor’s attention. Should you raise the question with your designer?

We understand why you would want to. After all, your website reflects your business. It’s something personal, and just as most of us would prefer to choose our own clothes in the morning, we hesitate to fully turn over design decisions to anyone else, even the person we hired because of their hears of professional expertise.

But there’s something else you should know before you start basing your decisions on personal preference: your font choice isn’t about you.

It may sound silly to go this deep into a design decision as basic as web typography, but the truth is that your web font decisions need to be based on what is best for your visitors. And that’s not a matter of opinion—it’s a matter of objective research. There actually are good and bad choices for web typography, and making the wrong one can have an impact on how your users engage with your website. Here’s just a few.

1. Serif vs. sans serif fonts.

You know those little flourishes that appear on the edges of letters in traditional typefaces such as Times New Roman? Those are called serifs. Whether or not a font has serifs is one of the most basic distinctions in typography.

Serif fonts used to be the norm, and you’re probably used to seeing them in books, newspapers, and many other print mediums. Sans serif (without serif) fonts have a more modern edge, and proliferated in early websites because of their greater screen readability.

These days, screen technology has improved enough so that serif fonts are more legible online—and in many instances, more legible than their sans serif counterparts. It is acceptable to use either font online, and it can even be a pleasing effect to pair them with each other, such that one forms a header and the other the body copy. But be aware that serif fonts become harder to read the smaller they get, and that in body copy, sans serif characters can sometimes be harder to distinguish from each other.

2. Font hierarchy and readability.

Your web copy should not appear as one gigantic wall of text. This has a negative impact on readability and can lead to fatigue on the part of your users. Instead, use your fonts to break up body copy by establishing clear hierarchies on the page.

Titles, subtitles, and headers should have larger text, while less important data, such as publication dates or bylines can be emphasized or de-emphasized by using a smaller font size than the body copy, different coloring, or style effects such as bold or italics.

3. Body copy legibility.

When it comes to body copy, choose styles that are highly legible. This means absolutely no script fonts. They may look nice in headers, but they will be torture for your readers. Furthermore, keep the font size no smaller than 14pt. Any smaller, and your visitors will strain to read the words on the screen.

When it comes to line length, 40–60 characters is often the ideal length for comprehension, but this is too narrow for body text. Instead, save the 40–60 character widths for headings, and keep line length at a comfortable 650 pixels.

Text alignment is also key. Right-aligned text is terrible, because it goes against our natural reading movements. When the reader’s eye reaches the end of a line and jumps back to the beginning, it takes a few moments longer to find the right line to continue reading. Fortunately, there’s rarely any call to use right-aligned text, so it’s easy to avoid.

Center-aligned text has similar problems, but can be used judiciously for aesthetic reasons. It should never be used for a full piece of content, however. Ditto for justified. While the even line lengths look tempting, the varying spacing between words can add confusion. Instead, stick to left-aligned text wherever possible. It’s easiest to read, and it’s what most users expect.

4. Sizing, weight, and contrast for legibility.

Your visitors need to be able to read your website. If your text is too small, to thin, or too light to read, it’s not doing anyone any favors. And don’t base these assessments on your personal experience, either. Your eyesight might be fine, but someone who has vision problems will struggle even more. Err on the side of greater accessibility, and you won’t risk alienating anyone.

These things are also affected by other elements on a page. If text appears in front of an image or video, or if parallax scrolling means that the text will appear over a variety of backgrounds as it moves down the page, then you need to bear that in mind as you consider design options.

5. White space.

For some business owners, the temptation to fit more words into a space can lead to bad design choices, in particular, crowding out white space. Wide margins are more friendly for readers than narrow ones, and even the space above and below lines of text can affect how easy it is to read.

That includes the space between paragraph breaks and above and below headings. Give your text room to breathe, and your visitors will be more likely to stay on the page even if they have to scroll half a screen down to see your new product video.

Web typography must lead to greater legibility, readability, and usability.

All these restrictions and guidelines can make your options feel limited, but they’re actually good news! You can take a weight off your shoulders knowing that by following these principles, you’re creating a design that follows the rules of good taste and puts your visitors first. The result may not be exactly what you envisioned, but it will help you win over business and grow customer loyalty in the long run. And what’s not to like about that?

The post Web Typography: Why Web Fonts Aren’t a Matter of Opinion appeared first on build/create studios.


How to improve your digital typography

Moving from print to digital, there's one obvious and important difference to consider when it comes to typography. Unlike with print, in digital design, your type is not going to remain static. 

"Printed type can be tightly controlled, with the outcome exactly as the designer intended," says Jack Statham, mid-weight designer at Ragged Edge. "But typography on-screen may be rendered with varying levels of detail for different users, depending on their device."

That doesn't mean typography loses its importance, though; quite the reverse. "In recent years, web and app design has rid itself of superfluous decoration and now gives more space to content, and therefore to text," explains Massimiliano Frangi, senior design director at CBA Italy. "So the choice of a great font is now a key element for the success of a web project."

In recent years, web and app design has rid itself of superfluous decoration

Jack Statham

Nowadays, specialist web fonts are optimised to display as cleanly and consistently as possible across multiple devices and screen resolutions. "Often, typefaces designed for print have ink traps and a high contrast in stroke-width," says Statham. "Typefaces designed for the web usually feature more consistent stroke weights, higher x-heights, and more open bowls and counters."

All this means that if your design is going to work, look good, and be legible on multiple devices, screen sizes and orientations, then choosing the right font carefully and displaying it correctly is essential.

Legibility is key

"Just because a typeface is beautiful doesn’t mean it will readable in all sizes," says Martha Lisboa, digital designer at CBA Paris. "So avoid crazy typefaces, condensed styles and letterforms with thin strokes. And be aware that type effects such as shadows or bevels may look great at larger sizes but won’t work on small screens.

"In short, go with something simple and of a standard weight to ensure readability on all devices, especially for long paragraphs of text."

When it comes to typesetting, hierarchy is always important, but it becomes especially so when people are using your interactive design to achieve a goal, says Statham.

"You have a limited area in which to set type and reduced navigation and wayfinding elements," he points out. "So a clear type hierarchy helps a user to quickly find their way around the screen, and acts as a bit of a shorthand for the user to digest the information on screen."

Examples of Fifteen typography

Fifteen’s Nottingham Hospitals website design features a friendly, handwriting style font

Alexandra Lofthouse, senior UX designer at Fifteen, agrees, and reminds us that people don't generally use apps to read massive paragraphs of text. "So text should to be easy to read and digest," she stresses. "This comes down to the tone of voice used throughout the copy, and the typographic style fusing together in an interesting and an engaging way."

And of course, legibility is hugely important in digital. "Especially in long passages of text, the goal is to make typography 'invisible', in that the user is able to pass over a paragraph quickly, without having to focus too hard on each letterform," says Statham.

He advises you "pay attention to paragraph measure; keep them to between 45-75 characters. Provide generous spacing between lines: aim for a minimum line height of 1.5 for body copy. Aim for a slight increase in tracking, to give type room to breathe. And choose a reasonable point size: actual character size varies between fonts, but 16px is a good minimum."

Accessible typography

Colour is also an important consideration when it comes to legibility, he notes. "Backlit screens can increase the contrast between pure black and white, which can be tiring on the eyes, so using a softer black for text or pale grey background can make text more readable. Also there are a few apps, such as Contrast, which we often use to help ensure any colour combinations in a body of text are compliant with current accessibility standards."

Lee Carroll, interaction designer at Seymourpowell, offers similar advice. "Watch out for lack of contrast between text and background colours," he says. "Use the Snook.ca colour contrast checker to ensure the ratio is high enough for a double-A or triple-A standard of accessibility." He also suggests remembering that it might not be the colour alone that needs to change to solve some of these issues, sometimes a thicker weight or bigger text is what’s needed to increase the contrast.

Examples of De Nigris typography

Massimiliano Frangi’s redesign for De Nigris aimed to captivate viewers through its narrative

And all that's just for starters: in 2018, the field is evolving at breakneck pace. "The technology that we use to view type is constantly changing, and so the requirements of type on screen is changing too," says Statham. "Prototypo, for example, has some incredible features in its typefaces which allow you to use one font file for several instances. You might have finer serifs on your headlines than in your captions at smaller sizes, say, or decrease the width of characters on narrower viewports. Browser support is increasing all the time, so we're hoping to utilise this soon."

And staying ahead of this curve also means being on good terms with your more technically minded colleagues, says Dan Bradshaw, design director at TH_NK.

"One of the main differences with digital typography compared with print is that once you’ve designed it, it needs to be built," he points out. "So get friendly with a developer if you're not too familiar with the code side of things, to ensure your designs can be brought to life justas you've laid them out."

This article was originally published in Computer Arts, the world's best-selling design magazine. Buy issue 277 here or subscribe to Computer Arts here.

Related articles:

  • 5 typography trends for 2018
  • 50 top typography tutorials
  • Better web typography in 13 simple steps


The 10 commandments of typography

Whether you're an art director, graphic designer working from home or a web designer, getting your typography right is essential if you want to get your message across in the way you, or your client, intended.

For an in-depth look at various aspects of typography, check out our typography tutorials. In this post, we look at common type mistakes, how you can avoid them and offer up some further reading along the way.

01. Thou shalt not use default kerning

Don’t trust InDesign to do your kerning for you

We see it far too often: a great piece of design ruined by shoddy kerning. When setting any headline in InDesign CC, IllustratorCC or even PhotoshopCC, don't trust the software's judgement.

Take your time to look at spacing between pairs of letters (kerning) and the spacing of the whole word (tracking). You have a lot of control (rather understandably) over kerning and tracking in InDesign.

First, go to Preferences > Units & Increments > Keyboard Increments > Kerning/Tracking and set your required increment. Now you can use the Alt/Opt and left/right arrow keys to fine-tune your spacing. You'll find further advice in our article on kerning tricks.

02. Thou shalt not overuse script fonts

10 commandments of typography

Script fonts don’t automatically add ‘class’ to a design – their use needs to be considered carefully

Okay, there are times when a nice script font works (usually at large sizes; maybe in vintage logo designs or similar), but for most general design jobs they are unnecessary.

Think of how many times you've seen the awful Zapfino cropping up in headlines and even body copy on amateurish posters, leaflets and other printed collateral. Yuck. And you definitely shouldn't be even thinking about using a script font of any kind in body text. Just don't do it – no-one will read it.

On those occasions when script is appropriate, though, check out our collection of free script fonts.

03. Thou shalt not place type over busy backgrounds

There’s nothing worse than not being able to read a message because the background is overpowering it. Yes, you may have a beautiful photo that needs to go in the background, but don’t hunt for a space to overlay your type: think about the treatment in a sensible manner.

You may need to set your types in blocks of solid colour in order for it to stand out, or even crop the photo differently and run your text somewhere else in the design. Think about legibility. You may be able to read it – you know what it says – but your audience may just miss it.

04. Thou shalt not use many many fonts

10 commandments of typography

It’s great having access to thousands of fonts – but you don’t have to use them all at once

It's the cardinal sin of type – using too many fonts. Although we all have access to thousands of free fonts to use in our design work, thanks to the likes of Google Fonts and services such as Font Squirrel, you don't need to use them all at once.

Using multiple fonts across a site, magazine or, well, any piece of design can confuse and distract from your message. A general rule of thumb is to use no more than three fonts in your design (although there are exceptions, such as illustrated type pieces).

05. Thou shalt not fake small caps

10 commandments of typography

There are many fonts that come with small caps versions – so use them

Faking small caps never looks good – in fact, it looks downright ugly. So, if you're looking to add a bit of variation to your headlines by using small caps, pick a font that has one. There are loads of free quality ones available – just take a look at these for starters.

06. Thou shalt not use fake italics

10 commandments of typography

Don’t turn fonts automatic by skewing them – use the proper italic version

Though it's increasingly rare to find a font without an italic case, if you are using one don't be tempted to skew the font to make it italic – it won't look good. At all. Your curves will be distorted, stroke weight will be all out of sync and, well, do we need to say more?

Block the little Skew (False Italic) icon in InDesign out of your mind – it's for the best. For more on this, see this handy little post from type designer Mark Simonson.

07. Thou shalt not use all caps

10 commandments of typography

Setting all text in caps will make it difficult to read

Whilst capitals can look much slicker and, dare we say it, cooler in body copy, using all caps will turn your important body copy into an illegible mess.

The reason? Well, according to this article on Fonts.com, the most common explanation is that we don't read letter-by-letter, but rather by word shapes "which are in part created by the position and frequency of ascending and descending characters". So if you set something in all caps, it becomes a challenge to read.

08. Thou shalt not reverse type

10 commandments of typography

For the sake of legibility, avoid white text on a black background

Just like commandment 07, reversing type out of a dark colour (so using it white) does nothing for legibility. As this useful guide from UXmovement.com mentions: "You should avoid using white text on a dark background when displaying paragraph text to make it easier from them to read. Forcing users to fixate on the white text for a long time can strain the user's eyes."

This is because white stimulates all three types of colour sensitive visual receptors in the human eye in nearly equal amounts. However, as the article also mentions, there are times when you can use white on a dark colour to highlight a particular element on your site or in your design.

09. Thou shalt not combine serifs

10 commandments of typography

Some typefaces just don’t go together

Whatever you do, don't use a serif for a headline and the body copy that follows. It will throw your typographic hierarchy all out of balance. In fact, try not to combine any fonts that are too similar. When using a serif for a headline, try a sans for body; when using a serif in your body copy, try a slab.

A lot is about trial and error, but we recommend reading our 20 perfect font pairings post to set you off on the right track. Remember… contrast, not conflict!

10. Thou shalt not use long measures

10 commandments of typography

Go for between 45 and 75 characters

What is measure? Simply put, it's the length of a line of type – or the width of a column, if you like. Too long or too short and your reader will have to fight to construct the sentences; it can be very distracting.

There are a number of different theories on the ideal line length. Eric Gill in his 1931 book An Essay on Typography suggests that the ideal line length consists of 10-12 words, whereas Robert Bringhurst recommends in his 2004 book The Elements of Typographic Style that 66 characters is best for optimum legibility, but anything between 45 and 75 is okay. Choose a theory and stick to it.

And the 11th commandment…

Thou shalt not use Comic Sans. (Well, we had to put it in, didn't we?). 

For more on this, see our post on the person who inspired Comic Sans, and what he thinks of the font.

Related articles:

  • 46 great handwriting fonts
  • 23 places to download free fonts
  • 43 free retro fonts