Advertisement
Typography

Web Design Basix: Why Typography Matters

by

Typography is one of the most important skills that a designer can have... industry veterans spend years honing their technique and you could easily spend years at a university studying the topic; But where is the best place to really start out? Today, in the latest addition to our Basix series, we're introducing typography for beginners by explaining one simple thing: why typography matters so much in web design.


What is Typography?

Typography is an ancient discipline that can be most simply explained as the art of arranging and designing the written word. The earliest examples of typography go back as far as 1800 B.C. with the ancient Greeks, but the modern era of typography is tied to the mid 15th century when the printing press was invented.

I'll keep the history lesson short here: typography is important for one reason: because it is the primary way that designers can communicate with readers... whether the medium be a book, a print advertisement, billboard, or a television show, typography is important because it the embodiment of the visual language.


So, What Do We Mean When We Say "Web Typography"?

96% of the Internet is comprised of written information or text. This text is distributed into big and small chunks of information that is spread over different pages with different formats.

The formatting of all this written information in a website’s design is what we call "Web Typography".

Typography is the most important part of a web design because it influences the way that a website communicates with readers. From larger headlines and bold blocks to small body, the various uses of text on the web are the core communication method... so it's natural that how a web designer decides to arrange type on a web-page is crucial to the effectiveness of that site.

We see its usage everywhere as all websites rely on typography to convey their message to the readers. However, there are some web designers who tend to over-look the inevitable importance of typography and focus only on the visual or graphical part of the web design.


How is Web Typography Different From Print Typography?

Using typography for print medium like brochures, fliers, magazines, books or outdoor mediums like pole signs and billboards is different than using it for the computer screen. In terms of typography, the screen is a completely different medium... and as with any type of design, you truly need to consider the medium that people will be viewing your design through. Consider the following two images:

The top image is a poster for the band, The Black Keys. The bottom image is their website. Same band, different approach to typography. Why? Because the medium (and therefore the message and intent) for each design is different. One is to promote a concert, the other is a portal to all sorts of information about the band.

When you are using typography in a print design for something like a book, the fact that it will be viewed from a relatively close proximity gives you the ability to play with the fonts quite a bit because it won’t hurt the readability much. If you are using typography for outdoor communication mediums like a billboard or poster, you know that the reader has only a fraction of time to view the board and consume what is being communicated and so you don’t mess with the fine tuning of the typography much - instead you might focus on the initial impression an readability of the type.

However, with a website there are totally different objectives in mind. Designing typography for computers and the web requires the designer to divide lots of information into different segments and sub-segments (Micro and Macro-typography). Also, a web page is not constant as it has to appear on different browsers, different Internet access devices and with different screen resolutions. So the web typography has to deal with a good number of issues as compared to other mediums. So, while choosing typography for their website, a designer must consider the cross-platform compatibility and readability. These are just a few of the concerns that a web designer has to keep in mind when approaching a website.


Web Typography is "Information Design"

When it comes to web design, typography is not limited to choosing a font and laying it out; It is the art of dividing up bundles of information in such a way that the reader will have a good chance of finding what is of interest to him... this is where typography on the web becomes more like information design.

Typography on the web is as much about organizing type into effective, meaningful layouts as it is about using a great typeface.

Drawing attention to a certain block of text, helping users find the content they are searching for, or fitting a wide variety of content onto a single page is all done through typographic skills.

The idea of designing type to be more than just legible, but to also be meaningful is part of what confuses a lot of people about web typography. Anyone can type out a paragraph of text; fewer people can use things like letter-spacing, line-height, and font-size to give it a sense of character;... but the best web designers can organize type across an entire layout in a way that imparts meaning to readers and helps guide them across an entire website.

This is what we mean by typography being information design.


Macro-Typography and Micro-Typography

It's often helpful to begin the typographic system for a design by breaking it up into two different segments:

  • Macro-typography, which comprises of overall text structure of the document
  • Micro-typography, which covers the smaller and much detailed aspects like the font type, line-height and spacing etc.

By approaching the Macro-typography first, it can be easy to sketch out the "bigger picture" elements of the type system in a design. Where will the navigation be? How will type on the site be laid out? One column? Two? More? All of the overarching structural rules should be defined first. At this point you can use just about any typeface that you want... but you can begin getting a feel for the size and scale of a design.

Once you have the "big picture" outlined, it's time to approach Micro-typography. This is where you'll begin to really refine your type system by defining the stylistic elements such as your primary (and possibly secondary) font-face, how large big headlines will be, the default size of things like sidebar titles, paragraph text, link color, etc.


Web Typography Tips

If you're just starting out as a web designer, looking around at all of the wild and crazy things happening with web typography can be daunting. You might have a number of questions, like: Where to start? What's right and wrong? Are there rules that I have to follow? The good news is that at it's core, web typography does indeed have a few consistent rules that you should be aware of. What follows are are some useful tips I have collected for creating effective type systems for the web:

Clean and Clear Hierarchy

The hierarchy of typography is very important in a web design. Think of all of the different places that you use text on a website: the navigation, headlines, paragraphs, image captions, sidebars, etc... Chances are good that there's a lot of text! How are you going to turn all of this into a logical type system? By developing a type hierarchy.

A well-developed hierarchy enables you to know where to start reading, how to proceed reading further, and the difference between most important and less important information on a page. With an effective type hierarchy, you don’t need to rely in text placement anymore to highlight what you want your readers to go through first.

Read more about Understanding Hierarchy


Cascading Typography - Be Consistent

Lack of consistency in typography is one of the most common and most repeated mistakes which web designers commit these days. A print designer often will meticulously design each and every letter on a page... but that's not necessary with web design.

Instead of trying to manually design each and every piece of type on a site, design with the idea of Cascading Style Sheets (CSS) in mind. Make use of the blessing of CSS and set the font, size, color, line spacing, height and other features of your typography throughout the entire website.


Go Through The Text

I have mentioned this earlier, but let me emphasize the point: Great web designers do more than just place images and paste text into a web layout. It takes good professional habits to make a winning website design; One of the best professional habits a web designer should have is to read the text before placing it in the web layout. If you have access to the text-content that you'll be using, avoid just pasting it all in blindly. By going through and reading the actual text, you'll be able to make a better connection between the content and the design.

Also, when you are done placing the text and other elements in the design, make it a point to go through it again as a proofreading practice to avoid any mistakes or things left out. It's amazing how often designers forget to style simple things like bullet lists because they rushed through the design phase.


Macro and Micro Typography – Both Matter!

For a successful web design, a web designer should pay attention to both macro and micro typography. Even the best layouts can fall apart if things are missing on the "micro" side of things... and even the best micro-typography won't be useful to readers if it's not laid out using proper macro-typography principles. Both are important!

Lots of designers are especially good on one or the other... so take some time to consider what your strongest suit is: macro or micro? Then do your best to strengthen your abilities (through practice and attention to detail!) in your weaker skillset.


Colors and Typography

This goes without saying for lots of designers, but the color of text is another important thing to consider. There are hundreds of websites which take this point for granted and use font colors that either:

  • Make typography immensely difficult to be read
  • or... are boring! (and boring colors are wasted colors)

You don't need to go and splash the entire rainbow across the page, and you don't need to use something awful like red text on a green background... just use simple, sensible color theory to pick colors for your fonts that are readable and interesting. Remember, links should be colored in most cases... it tells people they can click them!

Read more about Web Design Color Theory.


Design With The "Live Text"

Stop using Lorem Ipsum! There is no substitute for the actual text while designing a website. While you can use dummy text to get an idea of how things will look like in the layout, as soon as your web design is coming to a completion, try to use the actual text that you or your client plan to use in the live website. Only then will you be able to synchronize the design with the text and determine the impact of how the overall website will look like... even small oversights in this process can lead to weak points in a design, so take the time to use live text before calling a project 'complete'!


Show Your Typographic Personality

The wonderful thing about web typography is that there are a wide variety of ways to approach it - every designer will have his or her own style for doing things, and there really isn't a single "right" way of layout out type on the web. Type has personality, just like you or the client you're working for, so don't be afraid to play around with your own creative variations once you nail the basix of a site design.

Read more about Choosing the Right Font


Conclusion: Practice Makes Perfect

Web design requires you to master a number of things in order to make a really great layout, and typography is definitely one of these things. A web designer who truly understands the importance of typography will be able to hit the success factor more often than not... and all it really takes is practice to train your mind to see the best possible way to lay out any given piece of type! Typography is not rocket science, but it does take a lot of work to discover the best way of doing things for any given project.

Take some time every day to practice - try taking an article that you really like and re-design it; Design your own resume, portfolio, whatever you can find... just use whatever ideas that you can to practice and you'll find yourself getting better in no time! Trust me, as soon as you understand the basics, it'll become a piece of cake!

This article was co-written by Arfa Mizra and Brandon Jones. Thanks for reading!

Related Posts
  • Computer Skills
    Word
    Microsoft Word Text Effects 101Word text effects logo
    Word has the tools you need to make beautiful text effects that are far nicer than the often cheesy bundled Word Art options. This tutorial has everything you need to start making beautiful text in Word.Read More…
  • Computer Skills
    Office
    How to Make Professional Invoices in a Word ProcessorStacksonstacksonstacks
    Starting a business, or doing freelance work? Here's a quick and easy way to create estimates and invoices that will impress your clients and get your payments through, hassle-free, using the word processor you already have.Read More…
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Web Design
    Interviews
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    Roundups
    5 Awesome Ghost Themes You Can Learn FromGhost logo
    With the world near-saturated with the success of WordPress, along came Ghost, 2013's new blogging platform of note. Born from a simple concept, the project was successfully backed with nearly £200,000 of Kickstarter pledges and released to the world as an alternative open source platform. Much like WordPress, Tumblr or any major blogging platform, Ghost is supported by an ever-growing community of themes to customize the appearance of your blog. In this roundup, we're going to take a look at a handful of some of our favorite Ghost themes and analyse why they work so well.Read More…