Blog_WebTypo_Featured_V1

Categories

Web typography for non-designers

Why is web typography so important?

Although a lot of today’s web content is highly interactive and image-based, language–and thus words–is still the basic means of expression on almost every single web page. Hierarchies upon hierarchies of titles and sentences, pages, paragraphs, columns, all prove the fact that the main course of this whole feast is none other than text. And as each and every gastronomy critic knows, presentation matters, especially when it comes to your entree.

Blog_WebTypo_95_V1.1

Now since the chief design language of the web is text, every web designer should first and foremost comprehend the art of typography. If you want to be successful in this domain, you’ll have to go beyond choosing a pretty looking typeface; typography means maximizing the written content’s expressiveness and this can be done–and it usually is done–irrespective of the typeface in use.

These are by and large the ideas featured in this great article on web typography that I highly encourage you to read. It basically tells us how the art of typography hasn’t changed at all in terms of its goal; typography is still all about making sure reading the text is as enjoyable as it gets.

The following is by no means a comprehensive introductory course to web typography. It is, however, an effort to create a yardstick for people who understand or want to see why text can be so beautiful and sometimes so ugly, for people who want a kick start in this field, and for those who need a stake in order to straighten their growth.

Why a type first approach is better

Everyone is trying to make their web design responsive. It’s the new trend. Containers, images, menus, everything needs to scale to the smallest of devices in order for the consumer to have an enjoyable experience. But if you think about it, this consumer is a very specific type–he’s a reader. The number one reason he’s visiting that web page is to read the text on that page, irrespective of the device he’s reading it on. So, why should one design a web page with a particular device range in mind when he can better target what’s really important for his user?

Blog_WebTypo_V1_Typefirst_V1,2

Web typography is the backbone of almost every other web page–fact which makes it sensible to start any design with undiluted type. Not doing this may very well lead you to a point where you’ve sacrificed legibility and looks for usability.

Type anatomy

Just so you have an idea of what goes into the crafting of a typeface, here’s a comprehensive dissection of one. Each and every part is a parameter and subject to creative thinking, all the while keeping legibility to the maximum. This is why creating fonts requires mastery: your creativity is at the same type bounded and so diversified.

Some of the terms will be used in the rest of the article, but you shouldn’t worry too much about memorizing any of them.

Blog_WebTypo_V12

Type kinds

There are four basic type categories that you can choose from, each one having its own specific use cases. There’s Serif, Sans Serif or Sans, Script, and Novelty. Serifs are the classic typeface which are more formal. Sans are used in more modern and informal cases. Script and Novelty fonts shouldn’t really be used on the web as they do not emphasize readability.

Blog_WebTypo_Font Kinds_V1

Typesetting

Typesetting is the composition of types. It’s the way they work together with their sizes and positions in oder to better convey the meaning to the reader.

It’s also an art by itself, and some of its rules are mentioned in the following sections.

Leading

The leading is the space between baselines. The idea here is to strike the right value and stick with it. Use a leading that’s too small, and the paragraph is hard to read. Make it too large, and your reader will have a hard time jumping to the next line. Anything between 120% and 150% of the font size should work well with most typefaces.

Blog_WebTypo_Leading_V1

Measure

Like in the case of the leading, measure, which is the length of one line, also has a sweet spot. This sweet spot means 45-75 characters per line, value which helps the reader keep a pleasant and natural pace while reading without being interrupted too often by line breaks or getting impatient to reach the end of the line because of its length.

Blog_WebTypo_Measure_V1

Kerning

Kerning is the space between individual pairs of letters, not the general spacing between all the letters. The reason why kerning is important is that sometimes pairs of letters can work poorly together, they may overlap or look like a totally different letter. Kerning solves this problem by manually adjusting the space between such pairs in order not to convey the wrong meaning.

Below you can find some of the most iconic kerning fails and good reasons why not to forget about it when doing web design.

Blog_WebTypo_Kerning_V1

Tracking

Tacking is the space between all letters, and it’s another area where you can vastly improve legibility in some particular cases. It’s also usually one of the differentiators between good typography and great typography.

Blog_WebTypo_Tracking_v1

Alignment

The alignment of text helps a lot in the structure of a web page. Almost every modern web page uses at least two or three different alignment styles to enhance it’s structure. For example, you can align a big heading to the right, grid-based text should be centered, and usual paragraphs can be left-aligned or justified.

Blog_WebTypo_Alignment_V1

Size

Every web page should have a set of text sizes to work with. Getting these values to work well together is not an easy thing, but an idea might be to use the golden ratio between consecutive sizes with manual adjustment where necessary.

A natural and pleasing size variation will make a web page beautiful on its own while keeping everything nice and legible.

Blog_WebTypo_Size_V1

Capital sins of type setting

  • Text sizes
  • Lazy handling of titles and subtitles
  • Text blocks that are not split up into enough small, scannable, digestible parts
  • Indiscernible links
  • Text is not treated as an interface but as decoration
  • Fancy navigation drawing the attention from the actual content
  • Lack of active white space

As you can see, typesetting can make or brake a web page, but if you get it right, you’ve got solid ground to build upon.

How to choose fonts

Choosing a font for a specific task can be a hard thing to do. Each and every font communicates in a different manner and tells the story in its own voice.

Blog_WebTypo_Choose_V1

The webfont jungle

A good place to start from can be a webfont library. They’re really easy to integrate, they don’t cost a fortune (and thus aren’t an investment that can go way wrong), and they’re absolutely varied. This is why you can’t go wrong with such a library, and why it’s so handy to to people who aren’t fully invested in the art of typography.

On the other hand, one may get overwhelmed in this jungle of fonts and do a complete rainbow-like combination for a website. That is not the purpose. Typography is a temperate art, an art of elegance.

Blog_WebTypo_Artboard 13_V1

What to do?

Here are a few practical tips for starting with a webfont library.

  • Don’t get overwhelmed
  • Keep it simple
  • Rely on quality fonts
  • Create your own palette
  • Privilege workhorses and super-families
  • Prepare some text and read it–do you like what you see?
  • Ask for a second opinion

Workhorses and super-families

When it comes to fonts, workhorses are all the rage. They’re like the AK47s of typefaces. No matter how bad the conditions may be, they will still do their job and look elegantly doing it.

They’re great also because they come in a huge variety of weights and styles (bold, italic etc.) which rids you of the daunting task of finding good-looking font combinations; you can improve variety by playing with the weights and styles while also knowing for sure that they fit together perfectly.

Here are two of the most popular webfont workhorses. They are so varied and complete that you can create not only a whole website with them, but a whole brand identity around them. Open Sans is available for free on Google Fonts, while Proxima Nova requires an Adobe Typekit subscription.

Blog_WebTypo-14

Blog_WebTypo_GoogleFonts

Blog_WebTypo_AdobeTypekit

23

  • Alex O'Connor says:

    typesetting can make or brake a web page., should be ‘break’?

    Excellent article. One question is: how much depends on the device, in the sense that resolution presumably affects choices for spacing and scaling?

  • Jordey says:

    “But if you think about it, this consumer is a very specific type, he’s a reader. The number one reason he’s visiting that web page is to read the text on that page, irrespective of the device.”

    Let me guess: you’re a typographer, right? Of course you think that reading text is the most important feature of any webpage! πŸ™‚

    YouTube has billions of hits for videos that people watch who don’t speak the language in the video. Reddit and Imgur have billions of hits for images that people look at who don’t speak the language as the person who made or posted it. I’ve bought things off eBay and Craigslist based primarily off the photos, from people who clearly spoke almost no English. Many of my Facebook friends post only in their native language, but the photos and links are still interesting to me.

    If text is your thing, then by all means use it, but most of the web that I choose to experience is not primarily about text. And for the majority of the planet that doesn’t speak English (language of the internet), it can’t be, either.

    • Dragos Tiselice says:

      Thanks for your opinion.

      There’s room of it not to be about text, I agree, but I’d so far as to say that most people interact with text most of the time on the web. I’m certain, though, that there’s quite a large chunk of people for whom this hypothesis is not true.

  • Larry McPhillips says:

    Lots and lots of typos in this article. I eventually clicked off because it was getting too distracting. I would suggest to the author that proper grammar and punctuation is even more important than typography.

  • Oz says:

    Interesting to note that despite the article outlining Measure correctly this website does not follow the rule when viewed at full width. By my count each line is around 110 characters vs 45-75.

    • Dragos Tiselice says:

      Glad you noticed. πŸ™‚ That was so obviously part of the test to see if people are actually reading the article.

  • For an article addressing attention to detail, there were many, many typos.

  • me says:

    I don’t really know if that’s the right place, but:

    Android 4.4, builtin WebKit, version 537.36. After clicking Accept on the cookie bar, it’s still there but a littke bit lower. Screenshoot.

  • Julia says:

    Thanks for the great post. I never realized that there was so much more to typography. I normally just use guess work.

  • null says:

    text-align: justified on the last line does not expand the line like that.

  • Larry says:

    That IA article is bizarre. Google’s webpage is unadorned by pictures, mostly, but that doesn’t mean it’s “text as interface”. You could literally take every piece of text off that webpage, and it would still work exactly as well. Everybody would still know that on a search engine page, you put your terms in the box, and you click the first button after that. It’s not rocket science. In fact, that’s how most web browsers work.

    Similarly, I’m putting my comment in this big box not because you put the word “Comment” above it (which is utterly pointless) but because it’s the big box at the bottom of the page. When I’m done typing, I’ll press the big green button below it, not because of the text on it (whatever that might be) but because it’s the big green button below where I typed my comment.

    To continue with their examples, Ebay is also a strange choice, since its interface is almost entirely huge photographs. There are words next to the photographs, too, but people don’t really read them, and lacking photographs is practically a guarantee that your listing will never sell. And YouTube, Flickr, Digg — have they ever visited any of these webpages? All of these webpages have giant images covering their front pages! That’s pretty much all they are. You see an image, you click on it. I can’t recall any words on Flickr, and the words you do see on YouTube are the canonical example of useless internet content you should never read.

    The only one of these webpages that is primarily a text user interface is Craigslist, and that’s the perennial example of a website that succeeds despite its design, not because of it. Perhaps the real lesson here is that your website should provide a useful service and be absolutely free (for almost all of your users) and never show any advertising or try to sell or up-sell users anything. Amazingly, if you do that, users don’t seem to care if your design is lacking. Also, people paying 79c for Chicken McNuggets don’t seem to care that they’re served in a small paper box, with no silverware.

    Text is the primary interface on most webpages because it’s easy, not because it’s the most useful or most desirable. Go anywhere in the real world and you’ll see plenty of examples of this. My elevator doesn’t have 100 words describing how to get to the top floor — it has a column of buttons, and I hit the top one, even though the numbers wore off years ago. People go to the movies a lot more than they go to the library, even though the library is free. And I would have made this reply as a rage comic, but your comment area is just an HTML textarea, because it’s quick and easy to add to any webpage, unlike a drawing area.

    • Dragos Tiselice says:

      Thanks for you view on the matter. I believe it adds a very good point to the whole discussion on the innards of the web, and I’m hyped to see such reaction.

      I agree with you that a lot of the navigation is governed by visual structure and icons, but if you think about it, even on a website like YouTube you have to type into a box the name of the video you are looking for most of the time. And let’s not forget how popular YouTube’s comment section is.

      Comments are everywhere on the internet since what was then called Web 2.0. If you want the internet to have your creative input, you will most likely use text, not images and video.

  • Kenny says:

    Thanks so much for this article! I’m just starting to create a website from scratch and this was my missing link (I’m a programmer, not a designer). I really do believe how something’s presented matters. A great idea can die when wrapped up in a bad user experience, and a potential client can be turned off by the look of the text on a site!

  • Dana Elza says:

    Years of corporate marketing experience . . . People don’t read ads, trade show booth signage, website content . . .. Until they are looking for specific content. Design, especially typography, distinguishes your story, increases brand retention. Good primer.

    • Dragos Tiselice says:

      Thank you for thoughts.

      I wholeheartedly agree that typography is important when it comes to brand retention, but here, even good typography can have a harder time. Only typography that is particularly remarkable will actually make a difference.

  • Alex says:

    Thanks a lot for this article!
    As a person that has almost no interest in the artistic fields, you really caught my attention with this article.
    I’ve never denied the importance of typography, but when my friends start talking about it I lose interest very rapidly. You managed to show me the basics and their importance really quickly without boring me.

    Since some of the other comments are about the real importance of typography, I would say that you can’t argue about opinion. Since I am a developer I feel compelled to say that the fonts can’t fix a broken website, but in the end both contribute to the final appearance of the website. So let’s stop fighting about what is more important, but start collaborating πŸ™‚

  • Danilo says:

    Hey! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up losing several weeks
    of hard work due to no backup. Do you have any solutions to protect against
    hackers?

Leave a Reply

Your email address will not be published. Required fields are marked *

card

Get updates from Presslabs

Feature announcements, how-to's and news feed

Sign up for newsletter


powered by MailChimp!

We do blazing-fast WordPress hosting with geographical serving and integrated caching.