Importance of Great Web Typography & Excellent Examples

Typography is one of the visual elements that can be used to create great web design. And the importance of good web typography is proportionate to that of good web design.

Good typography helps to establish good visual hierarchy, leading the reader across the page in accordance to the level of importance of the different text and images. It can also provide visual punctuation and graphic accents to help readers to connect text with images, and headlines with content.

Importance of Great Web Typography & Excellent Examples

Visual structure essentially consists of the following elements; image, type and colours. In order to create a good design, designers must understand the relation of these elements with each other so that they will make good artistic choices that are complimentary, working together instead of in opposition.

Simple and Strong Typography

Simplicity is very effective in design, but to create a good simple design is no easy task. To ensure readability, it is best to use 15 words or less for headlines. White type against a black background also increases readability due to its high contrast. Using a strong bright colour gives emphasis to a headline while a more subtle colour for the rest of the text can help accentuate the headline as well.

Minimalist web designs like the one shown below also allows the typography to stand out and draw attention to its content.

Aisleone
Aisleone

Typesite
Typesite

I Love Typography
I love typography

Font Game
Font game

Upsize My Type

To make an impact with typography on the web, the bigger the type, the better it is. Large type will draw the attention of readers to it. It will also place emphasis on the hierarchy of the content because of its visual contrast as compared to the smaller text around it.

There are various ways to get creative with the use of big typography in the design of a web site. There are many sites today that apply a fusion of the “poster” and the “newspaper” style in its design. The types of fonts used with this style of typography design tend to be standard san-serif fonts like Helvetica and Futura or uncomplicated serif fonts like Georgia and Times New Roman. Such fonts are used because they are not fanciful or distracting and allow the big typography to stand out on its own.

Here I’ve included some examples of how an upsizing of typography can enhance your web design.

Bruce Mau Design
Bruce Mau Design

Gummisig
Gummisig

Block Interactive
Block Interactive

Squared Eye
Squared eye

Hommu
Hommu

Deck Net
Decknet

Square Space Blog
Square Space Blog

Playing with Space and Objects

Manipulating space on a web page with the use of typography and images can produce a surprisingly good effect. Good management of white space is an important skill to have for web designers as efficient use of space is a form of visual relief.

If you insist on putting too much text or images into a space, instead of giving lots of information, you distract the viewer and might put them off as well. Negative space can play to your advantage, leave it alone!

Objects with an interesting shape can also work together with typography to help accentuate the design of the page. Use the unique shape of the object to draw the attention of the viewer as well as a partition to differentiate it from the other elements on the web page.

Here are some examples of the creative use of objects and negative space in web design.

Next Living
Nest Living

Neiman Group
Neiman Group

Plus Minus Zero
Plus Minus Zero

Shop Arc
Shop Arc

Away Back
Away back

Information Architects
Information Architects

Type For You
Type for you

The Axial System

The application of the axial system can be seen everywhere. Think of it like a tree, with a central vertical line and branches to the left and right balancing it out. It can be both a symmetrical or asymmetrical composition.

Paper Jam
Paper Jam

Paper Jam Axial

Typography design can be enhanced by using the axial system. Shown below are two examples of the axial system in action.

Zee
Zee

Zee Axial

As you can see, the axial line segregates the contents in a manner to strike a balance on the page. When an image is on the right, typography is place on the left. The axial system is a useful method of allowing the designer to consciously allow for a good balance on the page, so as to create an impactful and pleasing design.
Take a look at other web design that use the axial system effectively and see if you can draw the different axial systems used by each, like what I’ve done in the given examples.

Ico Design
Icon Design

Area 17
Area17

Design By Music
Design by Music

Daniel Guillan
Daniel Guillan

Horizontal Movement

Strong horizontal movement can work hand in hand with typography to create an effective and interesting web design.

Horizontal movement can be achieved by the simple use of a single horizontal line, or more to partition the content. It also allows the reader to easily make sense of the content of the web site by dividing the headline from the menu and the bulk of the information.

Some creative ways of using one or more horizontal lines in web design can be seen in the examples shown below.

Bkwld
Bkwld

Odd Web Things
Odd Web Things

Inkd
Inkd

One Day Without Google
One Day without Google

Able Parris
Able Parris

Trent Walton
Trent Walton

Fun Fonts

It is not easy to create a new font type that is decorative, unique and still practical. A fun font used in a design sets the tone of the website, and gives the viewer an insight to the designer’s style as well as the web site owner’s personality. It also adds character to the website and helps creates a mood and theme for the web site.

Although fun fonts can greatly compliment the design and subject matter of the website, it can also be over used and become distracting and even annoying. Exercise control over the use of such fonts and limit the number of different font types in one design to a maximum of 3.

You can have lots of fun with typography in web design. Appropriate use of fun fonts in a seemingly random manner can add spontaneity without losing readability. Here are some examples of how the use of unique fonts can add to the aesthetics of a web site.

Muji
Muji

Gdpsu
Gdpsu

72 Ave
72 Ave

Sibling Rivalry Wine
Sibling Rivalry Wine

Matej Toman
Matej Toman

Tennessee Education
Tn Vacation

Graphic Exchange
Graphic Exchange

Hello Lucky
Hello Lucky

Carsonified
Carsonified

Learn the Art of Typography

Web Typography can offer a great deal to the overall visual appeal of a web site. Learning the basic structure of typography isn’t difficult and the ability to use typography creatively will enhance the quality of your designs. Understanding the structure of visual design will allow you to explore various creative ways to improve your design whether it is with type, objects, space utilization or colour.

More Resources

  1. 28 great typography blogs and websites
  2. 30 Top Sources of Typography Inspiration
  3. Resources for all things related to typography
  4. A showcase of effective minimalism in web design
  5. 50 useful design tools for beautiful web typography

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.