Improving typography through space

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:

AListApart-spacing

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.

Relationships of Space

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:

  1. www.pieoneers.com
  2. www.elemodo.com
  3. versionsapp.com
  4. marketcircle.com/billings
  5. blueskyresumes.com

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.



Discussion and Comments

+ Add to the discussion
  1. Type is a living thing – it needs space to exist and breathe.

    This why A List Apart (and almost everything Jason Santa Maria designs) is beautiful!

    Great article & reminder Brian.

  2. vk says:

    this is an awesome read brian, thanks for sharing.

  3. Jillian says:

    Thanks so much. Good read and great links. I learn more about web from you than I do at school, lol.

  4. Davis Hammon says:

    Great Read. Thanks for the post. I find myself sometimes spending hours upon hours tweaking the spacing around my headers just so.

  5. This is awesome and inspiring .I learn alot by this .Thanks for sharing .

  6. Kaspar says:

    Great read :)

  7. Really great article, I couldn’t agree more. Letter spacing and leading is ignored far too much on the web, and you’d think with attention spans dwindling that people would pay attention to the kings that make typography more easily digestible.

  8. Colin says:

    great read, well-laid out thoughts & opinion(s).

  9. Manuel Olmo says:

    Great article, even made me laugh! This topic is so important and I am very proud that someone has dedicated time and effort to mention some basic facts. If I could add one more criteria to evaluate when choosing a font, it would be legibility and readability. Wonderful job Behoff!

  10. Thomas says:

    Although I also like the websites you chose as good examples, somehow they feel very ‘trendy’ to me.

  11. Auré says:

    It was a real pleasure to read your article :)
    Thanks.

  12. Scott Corgan says:

    I agree with your A List Apart analysis. Man, do I struggle to get that space perfect with my typography…totally worth the effort in the end though!

  13. Gaëlle says:

    Always a pleasure to read your articles. Very interesting and helpful, thank you :)

  14. Chicago SEO says:

    Typography is a hard beast to master. Thanks for the insights.

  15. TomPier says:

    great post as usual!

  16. Grün Weiss says:

    cool article thx

  17. Ken Reynolds says:

    Yup I agree too.
    The basics of typography are easy enough to learn, and just using the basics will always improve a piece of design a lot more than you might expect.
    Mastering typography is a nother matter altogether!

    Thanks for an informative and inspiring post.

  18. Life below 960px…

    Frankly, (and I’ve written about this before) there’s still a fold horizontally. I won’t go on about it, but I will say that I hate sites where I have to scroll to and fro just to read the text.

    “…screen sizes are getting increasingly larger…”
    And smaller. The mobile space is booming; 640×480 or smaller is increasingly common, and netbooks tend to be 1024×600 (minus browser chrome and additional open programs). The iPad, as advertised, seems to be intended for portrait orientation, which also has to be accounted for.

  19. Brian says:

    Michael,
    Sure scrolling down and up and down again could be a little bothersome, especially with the newer CSS3 multi-column implemented into sites. However as far as optimizing for iPads/iPhones and other devices you can always call upon other stylesheets for those devices to help format content specifically. All in good code :)

  20. I was talking about scrolling horizontally (it’s happened), but I’ll have to remember CSS columns, too.

    Everyone really should be doing more with media queries, but it also means “…screen sizes are getting increasingly larger…” is a warning rather than an assurance.
    Was it Luke Dorny who was complaining today that “hey, internet designers. I browse with my windows as wide as my monitor.”

    Really, we’re working with widths from 160px to 1920px or more.

  21. robert phillips says:

    Very stimulating piece, Brian!

    List Apart has a nice overlapping golden sections too. Subtle but effective; a nice change after 960 grids everywhere.

    greetings from the Lehigh Valley!
    %%robert

  22. Joao Pereira says:

    Fantastic post. Thanks for sharing.

  23. Lee Wilson says:

    Great article, I think many dismiss type as something they squeeze in between there design, how wrong they are.

    What I do, once I have my grid system in place, I use blocks as placements for text, different blocks sizes (width and height) will look more visually appealing, obviously, Bronkmann teaches us ideal lengths of text, but the placement of different blocks of text on the page will give different results.

    This I find quite useful too for determining a global vertical line height:

    http://drewish.com/tools/vertical-rhythm\\

  24. Andy Walpole says:

    You certainly can improve typography through using space and which is where an underlying grid structure comes most in handy

  25. Mark Astle says:

    The thing I find amazing is that this is news. That people calling themselves designers haven’t bothered to ever learn this stuff. This is simple, basic typography and anyone with designer in their job description who deals with type should be ashamed of themselves if they haven’t bothered to learn it.

  26. Ilie Ciorba says:

    Many designers don’t pay enought attention to this kind of things, and when their web templates finally get coded they found a great lack of organization in the work.

  27. Brian says:

    Mark,
    I don’t think many are just learning this, but it often fails to spent enough time and attention on. Many treat text and copy as the secondary element, when in reality 90 or so percent of a website is text.

  28. Mark Astle says:

    I take your point. You’re right – it often gets neglected for flashy effects and backgrounds etc. But if you apply those effects to bad typography you’re just polishing a turd.

  29. Great post, This was the best read I have had for a while!! Typography can make or break any design!!

    Keep up the good work!

  30. Great post, thank you, good to know some people still cares about typography.

  31. Great Post Brian! Really nice to read and understand. Thx for sharing your knowledge!

  32. As a newer designer one area (of many) I need to work on is typography. I’ve definitely been guilty of overlooking the importance of it and this has made me stop and think about how I look at type elements when I lay them out in the future.

    Thanks!

  33. Mark Astle says:

    Not being funny, but can I just ask – as a newer designer, what areas exactly have you been working on? Websites, as this article points out, are pretty much all typography. If you’ve just been working on the coding side, you’re not a designer. Not yet. But good on you for taking the time to try and find out more.

  34. A_Flama says:

    Very nice article!!!
    Thanks :)

  35. Nice to see there are still a few people on the net that care about typography, good post and really intertesting read.

Brian Hoff
About Brian Hoff: Designer, Writer and Speaker

I’m a graphic designer living in Brooklyn, New York who loves creating compelling and useful websites and memorable interactions across the web. When I’m not designing I can be found writing, speaking and occasionally part-time teaching at colleges — all on the subject of design. I started this blog to share my passion and experiences with designers and clients. I'm most active on Twitter; say hello:


POWERED by FUSION