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.
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.
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.
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.
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.
Typography design can be enhanced by using the axial system. Shown below are two examples of the axial system in action.
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.
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.
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.
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.
- 28 great typography blogs and websites
- 30 Top Sources of Typography Inspiration
- Resources for all things related to typography
- A showcase of effective minimalism in web design
- 50 useful design tools for beautiful web typography