Getting your typography right is key to ensuring your client can get the best out of your web design. As well as being aesthetically pleasing your choice of type needs to be functional. Choosing the most elaborate font is no good if the content can’t be read.
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
10 typography crimes to avoid in web design
1. 10 Typography Crimes to Avoid In Web Design
Getting your typography right is key to ensuring your client can get the best out
of your web design. As well as being aesthetically pleasing your choice of type
needs to be functional. Choosing the most elaborate font is no good if the
content can’t be read.
Typography crimes are common and you’ve probably come across many of them
before, in fact, you’ve probably committed some. Below we’re looking at the top
ten and how you can avoid them.
2. Follow the Trend
There are fonts which are universally known to be unpopular such as
Comic Sans and Brush Script so your web designs should naturally avoid
these. The most common font on the web is Helvetica, some would
consider it overused and there are other alternatives such as Times New
Roman and Myriad Pro which do just as good a job. When putting
together your web design you need to put thought into your chosen font.
Research and find a font which suits your client’s image.
Use Web Fonts
You may have found the perfect font, it suits your client perfectly but you
need to pay to download it. It simply isn’t worth the effort. You should
always use one of the many standard web fonts to ensure the end-user
will have said font installed on their PC. What’s the point in picking a
perfect font if no one but you can view it?
3. Pick and Choose Selectively
There are thousands of fonts to choose from and it can be easy to get
carried away. There are some unfortunate websites where a different font
is used for the Heading, Subheading, Body, Bullet Points. It looks
unprofessional and it’s important you pick a set of fonts for your project
and stick to it. We’d recommend 2 to 3 for your headings and body and
perhaps a third choice for the subheadings. Simplicity is the key to good
typography.
One for Body, One for Headings
There are fonts which have been designed to be used for titles and
headings whilst others are meant for body text. The standard option is to
choose a bolder, more noticeable typeface for headings, usually a sans-
serif or decorative font. Serif fonts are the ideal option for body text as
they’re designed to look and read better in bulk.
4. Stick to the Rules; Heading, Subheading, Body
Each segment of text in your web design relates to the next. You need to
consider them all as a whole. The rules are simple. Provide a clear
heading, a subheading or subheadings if necessary and body text. Each
should be clearly indicated through the chosen font and additional signals
such as bold, italics and underline.
Don’t Mess with the Font
Fonts are designed by professionals, the typographer knows what they’re
doing so if you start stretching the size of a font to make it fit into your
designated space, you’re going to have a problem. If you need to simply
switch the font, some such as Helvetica have condensed alternatives if you
need to squeeze them into a tight spot.
5. Don’t Mix your Signals
Signals such as italics, bold and all caps are used to emphasize on
important parts of your content. However, you can’t use too many of them
or the user won’t have a clue what’s important and what isn’t. Most web
development and web design projects will only need one signal used
consistently.
Choose Colours Creatively
Working in web design you should already have a keen understanding of
what colour schemes work and which don’t. Colour has the potential to
make or break your text. You need to ensure the contrast between text
and the background colour is high, otherwise the design won’t be
readable. Choose colours that complement each other and avoid dark on
dark or light on light.
6. Don’t Justify for the sake of it
Aligning the body of your text so it looks aesthetically pleasing can be hard
but the answer isn’t simply to justify every time. Poor justification results
in what are known as ‘rivers’ of white space which run through the middle
of the text and make it hard to read. You need to try and achieve good or
clean rags instead.
Rags are what occur when you don’t justify the text. The edge of each
paragraph will look slightly ragged and you need to avoid it looking
completely messy or your design won’t look fresh and inviting.
Avoid Orphans and Windows
That statement sounds strange out of context but when working with text
and typography, it’s pretty straightforward. Orphans are single worlds
which appear on their own, taking up a whole line. They’re messy and
should be avoided at all costs.
Similarly, windows refer to a single line from a paragraph carrying over to
a new column. It looks messy and can be hard to read when the end of a
section is carried over to the next.
7. Conclusion
The main thing with typography is to play around a bit, do your research
and choose fonts and styles which match the brief without being
unreadable and ruining the end-user experience.