One More Time: Typography Is The Foundation Of Web Design

Advertisement

For years you have been searching for it. You hear the question being asked in your dreams as you go on an Indiana-Jones-type-crusade to find the answer. When the answer comes to you, you know that the confetti will fall from the ceiling and the band will start playing your favorite song. You might even get a kiss from that special someone. So what is this question?

What is the secret to Web design?

A tough question and one that might not have an answer. In 2006, Oliver Reichenstein wrote Web Design is 95% Typography. Some people loved it, others were not so amused. If Web design was based that much on typography, then what was the point of learning anything else? All you needed to do is understand the elements of typography and you were good to go.

Of course typography doesn’t mean font selection. With the advent of @font-face and services such as Typekit, Webtype, Fontdeck, and Google Web fonts, your skills in typography won’t improve. You can easily create wonderful designs with one font for the rest of your life if you choose to—they had to do it centuries ago and they didn’t have Photoshop sticking things to guides for them. If anything, more font selection will make things worse for you because creativity and beauty become hard to achieves when more options are given to us.

More toys means more fun though, right? If you want to go that route, then by all means go for it. I love to look at the different fonts being used and admire anyone that can successfully pull off using newer fonts for the Web. However, I’ve seen too many times what can happen when development options are given to the masses, and it isn’t pretty (re: Myspace). Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold, if that was the case.

I’m not being sarcastic, saying that is all you need to know for a majority of websites. Try going through all of the Web designs that you love, strip out the images and ask yourself “how would that website look with just text and spacing?”. When designers say “text is the interface”, they really do mean it. The iA site is a great example of that.

Information Architects
Information Architects is based around strong typography.

One of my all time favorite designs is A Working Library. The site is a showcase of text being the interface. The spacing is just right and the typography is on point.

A Working Library
A Working Library by Mandy Brown.

Some people find design like this to be dull and boring, they feel that design should have more pop to it. At the end of the day some extra visual flair might be what separates your design from the rest, but you need to get the first 95% down. The website that you are reading this article on now has done a wonderful job of presenting a visual design that isn’t reliant on images to be beautiful.

Well That Isn’t Hard

It’s possible to create a wonderful design without the use of images at all. I know that sounds crazy, but it is possible. I’m not saying it should be done, but if we can create elegance simply with typography and white space, then why shouldn’t we be able to create greatness when we start throwing in images, videos and other effects?

With the use of images I’m not talking about images that are needed to represent something such as icons, but images that are there for flare. Sometimes a picture is worth at least ten better words than any word you could use, so it’s better to go with an image (but you still need to consider using white space with it).

Here are two more examples of beautiful websites that place a heavy emphasis on typography to control the design. The first is Blake Allen Design and the second is The Harriet Series (both use images to represent their typography, but you get the point).

Blake Allen Design
Blake Allen Design uses images, but with great typography.

The Harriet Series
The Harriet Series by OkayType.

What makes the two designs above so interesting to me is that the typography not only guides you along a journey, but it does so with personality. You almost feel as if the typography is an expression of the person that designed it. Blake Allen uses Helvetica which gives the website a Swiss, clean and structured personality. On the opposite side of the spectrum, the Harriet Series website is a bit more playful and experimental—there is beauty in the organized chaos that the typography creates.

For 99% of the designs out there, typography and white space are going to be your underlying foundation. So if you can’t get them right, then the rest of your design has nothing to stand on. Stop worrying about the pop of your design and first worry about how it will stand tall. Once you get that down then you can begin to dress it up.

Clear is a very simple to do list application for iOS devices. While the majority of the excitement around it are the gestures used to control the interface, you will notice that the typography does enough to get out of the way and allow you to enjoy the application. Sure it is nothing more than Helvetica, but what if it was Comic Sans and had bad spacing all around? Great typography doesn’t have to stand out in a good way, but that doesn’t mean it should do enough harm when it stands out in a negative way, either.

Typography In Other Disciplines

Art of the Menu
Art of the Menu is a great website on menu design.

The Art of the Menu does a great job of showing the importance of typography in menu design. While a lot of restaurants like to add images and illustrations to their menus to give them a bit more pizzaz, they fail in providing a decent typographical structure that allows you to easily browse through the menu.

If you are a designer you have no excuse to say you can’t come up with a decent design. When you create a design that lacks a strong foundation, anything else you add to it is just going to make it worse. Too many designers attempt to save their designs with fluff without understanding they are pouring gasoline onto the fire. If a design is not enjoyable to read then it is not an enjoyable experience, no matter how many images, colors or sounds you decide to add to it.

Looking to understand typography a little bit better? Not too long ago Smashing Magazine did a comprehensive overview of some wonderful typography tools and resources.

(jvb)

↑ Back to top

Paul Scrivens is a passionate designer who runs Drawar and innovation consulting at Emersian. He loves design. He loves learning. He loves being wrong. That last one was a lie. Be sure to follow him on Twitter.

  1. 1

    ‎” Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold, if that was the case.”

    Best thing i’ve read for a long time

    27
  2. 2

    I enjoyed this post and it looks like I have a lot of reading to do based on the all the links I opened.

    In regards to this bit: “Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold, if that was the case.” What book exactly (if you had to select one) would you recommend? The Elements of Typographic Style by Bringhurst? It seems to be heavily recommended but I am worried if it is perhaps a bit too esoteric for someone attempting to get their feet wet.

    1
    • 3

      I’d recommend precisely that one, I personally consider it as a must-read for every Designer.
      But you’re right, a bit harsh for newbies,
      There’s a ton of typography books out there, to “get their feet wet” before going deeper with Bringhurst’s

      In a close topic I’d recommend Man and his signs from Adrian Frutiger, to understand how signs became letters then typography BEFORE anything.

      4
    • 4

      Its ok. It doesn’t really go into specifics and bits of it are pretty vague. And half the book is full of font examples.

      Besides that its good and probably the best pace to start.

      1
      • 5

        I’ve read Elements before Man and his signs, and I don’t think that was bad choice. Man and his signs is a lot about history, graphic communication, about how human brain receive, and treat shapes, lines, and directions. It helps understand how human create, and, as I said, receive signs, letters, and shapes. It’s full of very interesting, and useful information, but more theoretical than Elements. Actually I haven’t finished Frutiger yet.

        Bringhurst wrote more about practical typography, about rhytm in any publication, about fonts, proportions, and other pure typographic things. Kind of manual for people who manage with type in their work. There’s a list of typographic terms with explanations on the end of the book, so you could easily check if you don’t get what some means.

        One time I have very helpful, and interesting conversation (it was rather monologue, to be precise) with couple who lead one of the best polish typograhic studio – d2d.pl, and have about twenty years of experience in designing books (quite recently they realesed Elements…, and Man… in Polish). They accordingly said that Bringhurst’s Elements is a book which you need to read not once, or twice, but regulary get back to it. If you’ll read it for twenty times, it won’t be too much. So buy it, read it, wait for a few months, check other books, and sources of information and get back.

        If you’ll read Frutiger past Bringhurst, it won’t be any harm, it’ll just expand your horizons, and give a lot of handy knowledge. Just treat both not like a stream which you could one time swim across, that’s certainly not enough. These are deep sources which you need to extract for a long time.

        Maybe Couse is a bit right, that Man and his signs is more… elementary than Elements, but personally, if now you’re not really into history, and kind of antropological studies, but you’re interested in typography, start from Bringhurst. He would awake your interests, and then you’ll read Frutiger (who is certainly more academic) with more desire, and pleasure.

        Hope my English is understandable.

        -1
    • 6

      I highly recommend this book, too, but if there’s anyone who’s only slightly interested in typography and doesn’t want to spend the money, at least check out the online version, which has been mostly adapted to web development.

      -1
  3. 7

    Although I do get the point behind: ‎” Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold, if that was the case.”, I think it is a little condescending towards individuals starting out.

    On the same principle, pretty much every social network out there, WordPress, Tumblr, Facebook, Twitter (you name it), should have grammar tests if one wished to publish any content.

    Finally, I think it is better with masses having access to all these tools, because it reflects directly on our income. People who want high quality solutions will see the differences between a professional website that uses great typography and a crappy website where typekit was used in the most random way possible.

    4
  4. 8

    Nothing about how different platforms rendering the fonts?. because that’s a huge thing to deal with in Web design when using regular text instead of fancy pictures for e.g large headings. Just because you are using Arial, Helvetica, Sans-Serif etc. it doesn’t look the same on Windows, compare to e.g Mac or Linux. So it’s always good to test your page

    1
  5. 10

    Great article. I always liked simple websites that just had a great minimalistic look instead of those bloated sites where 100 images slowed everything down and made everything look ugly (kitsch).

    0
    • 11

      wont work for a photography portfolio site.

      -3
      • 12

        I think we have to make this very clear:
        Typography is not only about the text. The fundamental part of typography is about order & placement ( which i guess the author of this article fails to explain). For example; when it comes to photographs; the rules of asymmetrical typography was especially crafted with this medium in mind. It’s rules based on function, so it’s a good idea to at least read into it before dismissing it.

        -2
  6. 13

    People don’t go to websites to view artistic design. They go to find information on specific content quickly and efficiently. Good web design is 95% user-centered design. Look into it.

    9
    • 14

      And good Typography IS user-centered design. Typography is about Visual Hierarchy, Alignment, Readability, and Communicating the content. All of those things make it easier for a user to follow the flow and understand the content. What’s cool about that is that because it makes things so easy to understand and for the eye to make choices, its beautiful! (Not Artsy)

      7
    • 15

      Michael Meininger

      July 30, 2012 9:54 pm

      Artistic Design and Thoughtful layout(design) of the text keep people on the sites.

      There are exceptions but I still see them as 50/50. A perfect example is people’s familiarity with all things mobile. Most mobile UI’s use imagery(as a main focus of navigation and links) as opposed to words- hence the meteoric rise of icons in the past few years.

      To claim an overwhelming % of effectiveness is type does not register in my experience. In my experiences, it’s like dating – looks get you in, personality(text) keeps you in.

      Just my .02

      0
    • 16

      I do go, and many times over, just for mouth-watering, eye candy( in terms of excellent use of Type, white-space/layout) – awesome design. I think, I know more like me :)

      0
    • 17

      There does seem to be a problem out there with designers thinking they’re artists…

      0
  7. 18

    I respect anyone that shares their thoughts with others, especially on this site, but I think this article could’ve been a little more fleshed out with some examples of the principles talked about. Still, any typography blog post is OK in my books.

    0
  8. 19

    Great post, but I have one bone to pick with you. Your example from OkayType “The Harriet Series” uses type embedded in images!!! This is completely unacceptable in my eyes and actually negates your whole argument.

    I think the only thing worse than bad type is type that has been locked into images (PNGs in this case). Add to it the fact that there isn’t even a shred of alt text in the source code and it made me instantly want to burn it on the growing pile of unreasonably poor designs.

    Granted, it’s not the worst of the worst offenders since it seems to be used only for displaying type and it’s responsive; however, this is a classic example of “image flair”, as you put it run amok. I would have much rather seen a site coded semantically in Georgia with a designer making careful typographic choices on leading and spacing.

    2
    • 20

      Jackson Cavanaugh

      July 27, 2012 12:04 am

      Tyler, I think you completely missed the point of the Harriet Series website.

      0
      • 21

        No, in my last paragraph I acknowledge that I understand the entire page is dedicated to simply displaying the type face; however, if the point of your argument is to argue for well-designed web-type, then a page that looks pretty but is made entirely of embedded text in images is the last example you should use.

        He built a case for functional and semantic typography for the web, which I agree strongly with, I just feel like Harriet series is the antithesis of that. Pretty to look at, but below the surface it’s nothing more than a jumble of code meant to serve up responsive images with zero alt text, etc.

        3
      • 22

        Hey Jackson,

        I agree with Tyler here. What you guys have made is beautiful and serves the purpose you desired perfectly. But his point is that it has no place in this article as an example of good typography in web-design. It’s locked into an image, made with your graphics package of choice, the constraints and challenges of web typography were not a concern during its creation. It’s simply not web typography.

        0
      • 23

        I *just* wrote about how typography is a scceine and how I’m still trying to find all the rules it seems I have my work cut out for me with this. Thank you ever so much for the link, the download works best from Evan’s page directly though and the PDF interestingly won’t display in FoxIt at all.

        -2
  9. 24

    Typography is one of many schools of thought on what’s important in a design. “Typography is the foundation of web design” is only for academic type of sitting discussions while sipping coffee. What’s the of foundation of web design when it comes to children?

    3
  10. 25

    While one may say that internet is a communication channel and therefore all aspects of typography are of utmost importance. But what about information distribution through images & graphics.

    0
    • 26

      Or music, or livestreaming, or video or games or shopping etc, etc, etc… OK granted I haven’t read any typography books that has 10 chapters dedicated to why a stop sign has 8 sides or why cavemen drew on walls. But still other stories about typography linked above, to say that shopping or anything else doesn’t exist on the web and the web is only for “information” is a bit ludicris.

      I think perhaps a number of these posts needed to be worded better and I can totally see the point of typography on sites that are information gateways, such as blogs, article marketing sites, wiki’s etc.

      But to say a 5×5 grid of 50px photo’s is bad design for an image gallery because it’s not well structured text…. comon, or more to the point that these kinds of sites don’t exist?

      1
  11. 27

    Great article. Typography within web design cannot be stressed enough and can make such a difference and is often overlooked.

    Much gratitude.

    1
  12. 28

    I don’t entirely agree. My stance on design is influenced from the photography perspective, as I was a photographer first. Principles of photography can help in producing designs. Leading the user through a picture, good harmony, contrast, etc.

    One of the key things I do in photography is to “create” an image rather than ‘take’ a picture. So in design, I tend to rely heavily on strong imagery. For design folks, rich, characterful typography can speak loudly. But for many – perhaps the masses – strong imagery is what they’ll react to on a website (which makes photography selection important). So many websites invoke magazine-style, full-screen imagery. Some use illustrations. It’s all up to taste and audience. Typography is key – yes – but it is not *the* foundation for web design. Millions of website ‘personalities’ on the most important medium of our day can’t fit in a tidy box like that.

    5
  13. 29

    Great post!
    But i dont agree that type is the most important thing about the designs you are showing. All those sites are great, but i think that what makes them gret is the design. And by that i mean the layout, the balance, the colors, the white,spaces, contrast, etc. All the key elements of a good design.
    Im not saying that choosing a correct font is not important, but im sure that is not more important than the rest of the design elements.
    If you choose any of the designs in this post, and you change the font, they will remain great designs. And if you choose a really poor design, i dont care wich font you select, it will remain a poor design.

    4
  14. 30

    Typography is imperative in Web designing, but we can’t use fancy fonts just to make the site attractive. The content has to be really good and using different typefaces does not appeal much to the older generation. The targeted audience of your website plays an important role in deciding what fonts you use.

    3
  15. 31

    Like the article, to improve UXD is important, and a clear and readable font will ensure to improve the possibility to do so. Just like physical products, if a product makes user uncomforted of using it, no one will buy it and same as a website. To make the users more quickly to find what they want on the page, make it more easily to read the content, make they feel comfort and make customers to delivery their willingness and preference more accurate to designers may become the spirit of improve users experience.

    -1
  16. 32

    Christian Krammer

    September 3, 2012 9:03 am

    There is talk of the book “Man and his signs” by Frutiger in the comments here, but the best I was able to find is “Symbols and Signs” (http://www.amazon.com/Symbols-Signs-Explorations-Adrian-Frutiger/dp/3721204387). Is this the same book?

    0
  17. 33

    I think usuability is they key foundation of great webdesign, but also I would say typography is one of the most important parts on usuability.

    0
  18. 34

    Awesomely, awesome article. As a web designer, learnt the wrong conception I had and understood the mistakes I was repeating. Thank you so much.

    Regards,
    Hardik

    0
  19. 35

    Excelent article. Typography is really very important and this site is proof of it. Site almost without images, but look’s awesome. Even comments looks buitifull.
    +1 to article, it was added to favorite.

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top