Yesterday I read a tweet that Veer has become, yet another, type foundry added to Typekit’s remarkable list of foundries; allowing us to rent quality fonts for use on our websites. As exciting as this is, along with other movements and progressions in web typography, it also made me think of how dangerous this can for the good name of Typography.
As designers, we see websites, their parts and a variety of other design elements being overused, misused and abused on a daily basis. We label most of these as “trends”, but let’s face it: We have all fallen guilty of them and in a way we should be glad they exist. It helps the special few break free and try something new (again, setting us up for another future trend).
However, I’d hate to see typography become just another “trend”, when in my opinion, it is the backbone of good design. It shouldn’t be viewed on the same lines as rounded corner boxes or text-shadows that look cool for the time being. It is an element of design that has been around since design itself and should be handled in such a way. Ninety-five percent of the web is typography, right?
In order to help prevent typography from just falling into another category, learning about typography, beyond typefaces and fonts is essential a must to every designers toolbelt. The folks behind Typekit do a great job of this. They offer a short write-up about each font providing background / historical information, purpose for which it was created, and what its use is best intended for (ie: works well at very small sizes, good for body copy, great for headlines).
It’s great to start seeing a variety in fonts on the web, but this makes it very easy to abuse a beautiful typeface as well. Choosing a fancy font does not necessarily make for good design, but learning and executing a base typographic-understanding does.
Instead of focusing this article on choosing a typeface or what makes a quality font, I thought it would be better to focus on something indirectly related, yet thought about, but never enough: Space. Whitespace, negative space, however you deam it, makes for good typography.
The little things matter
Take A List Apart’s website for example: very minimal graphics, no use of @font-face, color is subtle and purposefully used. So what makes this site so beautiful if it’s 95% type?
They do one heck of a nice job crafting the space for their content. They allow the type to breathe on its own or as a collective. Look at the detail in their site that is often over looked yet leads to beautiful typography: The line leading (line-height for CSS folk) is superb, the capitalized author names are letter-spaced to allow and improve readability for smaller letters—yes, they even paid attention to space between characters.
Below I took a screen shot of the original site and mocked up the bottom portion so that it does not pay attention to the little details. Paying attention to space doesn’t always mean looking at the big picture. Pay attention to the little spaces and crevises. Look at the drastic difference below:
Read and look between the lines
A List Apart’s website also does a great job of reading between the lines. Take for example the image below. Look at the attention to space as it plays with relationship and comparison from element to element. When designing for web or print pay attention to how one or many elements play off one another. Are they in unison because they aren’t meant to relate to one another or did you design to to be disconnected to create tension for the viewer? Remember, typography has purpose.
Each block above shows the relationship of space between the same color near it.
Life beyond the fold
Not too long ago I read a nice, quirky article by Paddy Donnelly titled Life Below 600px. The quick and to-the-point article, and of course it makes you scroll and scroll (and scroll…) to read the entire article is a jab at those saying things need to be above the fold, and I couldn’t agree with Paddy more. Although I am all for placing important elements near the top in plain view, people will also know when to scroll to read and view additional information. The web is filling up with more and more content, screen sizes are getting increasingly larger and people are no longer unaware that scrolling exists.
I say use the space and use it well. Don’t be afraid to use the vertical space to its full potential. Many websites feel the need to cram tons of information into one tight area. Below are websites that use vertical space well and create a much more dynamic interaction:
Sure, many of these websites could have opted for another direction on how to engineer the space—added more pages, pulled elements closer together—but in my opinion this makes each one of these sites unique and more engaging. It allows the content to breathe and results in the elements becoming more noticed and digestible.
The web and print collide… and it’s pretty
A wide range of quality fonts at our finger tips, CSS3 techniques that allows us to break and flow text into multiple columns… The web is starting to give designers less and less limitations and comparable to its print ancestors. Many of today’s designers I feel started directly on the web or have very little print design background. Nothing wrong with this, but there are many lessons and inspiration that can be drawn by print design, especially in relation to space. Next time you pick up a newspaper to read, don’t read it. Instead look at how the space is manipulated (both good and bad). Start looking at poster design for web design inspiration or visit your local bookstore, open up a few well-designed books and inspire your new blog layout design.
Experiment and play
Don’t take the above too seriously. There are always exceptions to the rule and other ways of doing one thing. Practice, experiment and play.
Matthew Smith of Squared Eye recently redesigned a printed receipt just for the sake of discussion and fun. In this exercise he goes into how more room to breathe allows for importance placement among other things. While the typeface used is lovely, the spacing is what makes this receipt one that I would not want to throw out.
The next time you are designing a website, place extra attention on the spacing or start off on paper by sketching where elements should be placed in a uniquely spaced and positioned layout like that of The Many Faces Of. You’d be very surprised by how much placing extra time on spacing and space relationships and contrasts will do to improve your design’s typography.
