Typography

In essence, typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages. In short, typography is what brings the text to life. Because so much of Hibu websites consist of text, improving your typography is a fundamental part of the overall success of your designs.

The Goal

You will be successful when your design clearly communicates the offering of the customer's business. The website will quickly and clearly state what the business does or sells, where they are located, and what the user should do next.  Secondarily, the type will help communicate the personality (or brand) of the customer.

BODY & HEADLINES
SANS SERIF FONTS

Without tails, sans-serif fonts are made up of simple, clean lines that are the same width throughout.  Popular sans serif fonts include Arial, Helvetica, Proxima Nova, Futura, and Calibri.
View San Serif Fonts

BODY & HEADLINES
SERIF FONTS

A serif is a decorative “tails” or “feet” added to the beginning and/or end of a letter’s stem, which creates small horizontal and vertical planes within a word. Serif fonts include Georgia and Baskerville.
View Serif Fonts

HEADLINES (H1, H3) ONLY FONTS

These fonts are more playful and expressive. Based on their varying styles, some should only be used in headlines.  Headline only fonts include Acme, Paytone One, Itim, Flamenco, and Julius Sans.
View Headlines Only Fonts

OFF-LIMITS
FONTS

"Off-Limits" fonts are not approved for headlines and / or body copy. Examples include Stalemate, Renie Beanie and Gloria Hallelujah (aka The Simpsons font.)
View Font

Tips On Typography in Web Design

1. Keep The Number of Fonts Used At a Minimum
Using more than 3 different fonts makes a website look unstructured and unprofessional. Keep in mind that too many type sizes and styles at once can also wreck any layout.

Oh dear
When you use too many fonts
see how they all fight for attention

In general, limit the number of font families to a minimum (two is plenty, one is often sufficient) and stick to the same ones through the entire website. If you do use more than one font, ensure the font families complement each other based on their character width. Take the example of fonts combinations below. The combination of Georgia and Verdana (left) share similar values that creates a harmonious pairing. Compare that to the pairing of Baskerville and Impact (right) where the heavy weight of Impact vastly overshadows Baskerville.

Georgia
Verdana

Baskerville
Impact

2. Try To Use Standard Fonts -- especially for body text
HwP has many interesting, "fun" fonts that can give your designs something new, fresh, and unexpected. So what can go wrong? Actually, this approach has one serious problem— interesting fonts can distract users from reading.  Users can spend time thinking about the fonts that designers used rather than reading the text.

Unless your website has a compelling need for a custom font, such as for branding purposes or to create an immersive experience, it’s usually best to stick with the standard fonts. Keep in mind that good typography draws the reader to the content, not to the type itself.
3. Make sure that the typeface you choose is legible on smaller screens
Try to avoid fonts that use cursive script, such as Stalemate (in the example below): although they are beautiful, they are difficult to read.
The big brown fox
The big brown fox
The big brown fox
The big brown fox
4. Use Fonts With Distinguishable Letters
Many typefaces make it too easy to confuse similar letterforms, specifically with “i”s and “L”s (as seen below). So when choosing your type, be sure to check your type out in different contexts to make sure it won’t cause an issue for your users.

Illusion
Noticia Text

Illusion
Muli

5. Make Sure You Have Sufficient Color Contrast
Don’t use the same or similar colours for text and background. The more visible the text, the faster users are able to scan and read it.  

Once you’ve made your color choice, it’s absolutely necessary to view on mobile. If you think there's a slightest hint that a user will have an issue reading the copy, callout, headline, then you can be sure that website visitors will  have the same issue. 

Can you read this?

Can you read this?

Can you read this?

Can you read this?

6.  Think twice about using red or green.
Color blindness is a common condition, especially amongst men (8% of men are colorblind), it’s recommended to use other colors especially when distinguishing important information. 

Conclusion
Typography is a big deal. Bad typography choices can distract users from reading. It’s essential to make typography readable, understandable, and legible.  
Remember, typography exists to honor context in a way that never adds to the user’s cognitive load.  Keep it simple.

Share by: