Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Designing For The Reading Experience

With the rise of web fonts as well as affordable hosted web font services and ready-made kits, typography is reclaiming its title as design queen, ruler of all graphic and web design.

At the same time, for far too many designers, the primary concern about typography today seems to be aesthetic in nature. The problem is, we tend to use typography and lettering as two interchangeable terms, which they are not1. A quick look at the “typography” tag on Dribbble2 reveals this trend.

Further Reading on SmashingMag: Link

The allure of well-executed lettering — and, boy, I could spend hours just looking at lettering portfolios! — can affect the way we view typefaces, because both typography and lettering share common visual concepts. If we seek only the next most Beautiful Typeface™ all the time, this habit alone can drive us away from the functional role of typefaces and their advantages as versatile, reusable and flexible design systems.

Moreover, we are often eager to try the latest OpenType feature, prettify our copy with discretionary ligatures7, slap on partially executed CSS hyphenation, and then stare at our masterpiece in awe, unaware that anyone other than a typography geek couldn’t care less. Of course, reality hits right at the moment that the text has to be read and understood by normal people on a variety of devices, from the latest Retina laptops to 72-DPI cathode-ray-tube monitors with Windows XP to a range of sci-fi smartphones that can measure your blood pressure.

“Good typography does not look nice to please type nerds. Primarily, well set type reads well.”

– Oliver Reichenstein

Most articles on the web are optimized for instant ingestion — does “reverse pyramid” sound familiar? Fast exchange of information is in the Internet’s nature and fits a reader’s short attention span. People visit websites and applications because they primarily seek information; rarely do they find typographic pleasure. Don’t get me wrong: I love typographically creative headlines and decks that grab my attention — but at the same time, we can’t neglect the need for overall balance and legibility in body copy.

Let’s start!

First Things First: Project Research Link

Seamlessly digesting written matter is possible only when the typography is well thought out and legibility is facilitated by a considered reading experience. As in other fields of design, before doing anything else we should conduct some research. In developing the habit of research, we will not only discover valuable data, but also develop our ability to quickly jump into the reader’s shoes, shifting focus from our worst enemy — our own ego (which I play tug-of-war with all the time).

As you are most likely aware, the main components of a digital experience are content, context and the user8. You probably address all three in almost every design project. But if we focus exclusively on typography within each of these components, then we’d find a handful of assessment methods and some considerations that would be useful to take into account and that would ultimately improve the overall reading experience.

Content Link

The best way to start a typographic design project is by reading the content. Seriously, every designer is intelligent enough to evaluate who this content is for and what it should be communicating. But apart from rating the quality of the content and listing its structural elements, we can also gauge comprehensibility, reading time, purpose and, finally, lifespan.

Cover All Typographic Elements
Upon reading the content, think about the structures or elements you have encountered and list them. Use the list as a starting point for a simple style guide. Apart from the normal paragraphs, headings and editorial accessories, you’ll find other — often overseen — elements, such as areas of emphasis, quotations, emphases within quotations and, crucial these days, data tables and figure captions. Your perfect font should have enough family members to cover all of these elements.

In plain hypertextese, make sure to cover all HTML elements. At this point, you could even create sample HTML and CSS files containing all of the required elements and rules and save it as Project-Typography.html. As you can probably guess, this file will be the foundation of the project’s typographic system and will come in handy when you start designing responsive breakpoints.

Gauge Reading Time
Reading rates9 range anywhere from under 100 words per minute to a few thousand; most adults read between 200 and 250 words per minute. We can calculate the reading time for any given text quite easily by dividing the number of words by 250. If sample content for your project is available, simply throw it into a local installation of your favorite CMS and run it through a simple script to estimate reading time10.

Depending on the situation, estimating reading time can help us determine the spacing within paragraphs and establish just the right rhythm and reading pace. If the reading time is long, we could break the text into smaller parts or simply introduce a pull quote at a strategic point, where it would double as a milestone.

Assess Readability and Reading Ease
Many readability tests provide an estimate of the school grade needed by the reader to understand the text, and knowing such parameters is useful. For example, if the matter is complex, you could probably introduce some editorial devices to keep the reader on track, or accommodate a greater number of footnotes with their own set of accessories.

Furthermore, when you are collaborating with a copywriter to tweak content and typography, these tools will make it easier to track differences between versions.

One such test is the Automated Readability Index11 (ARI). ARI focuses on the number of characters, words and sentences, thereby making it useful for real-time monitoring. The Flesch–Kincaid Grade Level12 test, on the other hand, focuses on syllables rather than characters, thus making it somewhat more processor-intensive for real-time assessments.

Another valuable test is Flesch Reading Ease13. It is calculated according to words, sentences and syllables; the resulting score helps you determine the level of complexity of content. Most major languages have their own version14. Although this tool is new to some of us in web design, textbook publishers and government agencies have been using it for years to gauge the complexity of learning materials for different grade levels.

Calculating the reading ease score manually for each piece of content would be an obvious sign of masochism, so I suggest checking out the handy Article Readability Stats15, a PHP script that we at Creative Nights16 developed for our own projects.

Content Strategy, Information Architecture and Microcopy
If we step out of typography for a moment into the field of content strategy17 (the discipline of planning and governing content and of defining editorial processes) and information architecture18 (the discipline of organizing and describing content), we can anticipate some potential issues.

Thinking about the content’s lifecycle protects us from the urge to typeset according to the latest trend. The next time an article is republished, we can prevent the editor’s rage from seeing leftover styles that weren’t removed in preparation for a redesign.

Category labels — typically defined by an information architect — can make the web designer’s life miserable, because the space in a navigation bar or column is limited. I’d bet that at some point in their career, every web designer has tried to rename or shorten category names in order to fit the available space. Of course, we could always reduce the font size or choose a condensed type, but if all else fails, we talk to the information architect to find a solution on their end.

Apart from articles, we must also typeset form labels, instructional copy, small print, interactive elements (such as buttons and links) and other text that clarifies tasks. All of this tiny copy is referred to as microcopy19, and it is a fundamental ingredient in effective interaction design.

Context Link

With recent developments in web standards, designers are now building websites that are getting closer and closer to the ideal of “One Web20,” accessible to everyone and everywhere. Even though achieving such universality with all types of projects is difficult, we know that mobile doesn’t just mean browsing the web on a smartphone while on the go.

We also know that tablets are used to give presentations, to check Twitter during breakfast or to read articles while sitting on the toilet (anyone who neglects this fact doesn’t understand the needs of users). The screen real estate of the coming generation of laptops puts a 96-DPI 30-inch desktop monitor to shame. We admire the web’s universality, but at the same time we should be aware of the diversity of users and devices.

Software Concerns
Users on Windows systems with the ClearType rendering engine benefit from well-hinted fonts. The trouble is that hinting is a time-consuming process, and not all typefaces for the web are fully polished yet. Therefore, additional testing in Windows browsers should form part of your routine.

 screenshots of Verdana, Proxima Nova, Arial, and more.21
These screenshots of Verdana, Proxima Nova, Arial, Adelle Sans and Georgia at 16 pixels (except for Proxima, set at 18 pixels) were taken on Firefox 18 on Windows 7. Proxima and Adelle are rendered as web fonts, and the others are the usual suspects that come preinstalled on most OS’. The top five lines were taken with ClearType turned off.

Also, keep in mind that each web font service might deliver slightly different fonts. A font might yield good results when delivered through one service but look barely adequate when delivered through another. I’ll speculate that the reason for such differences, if any, is primarily a lack of time invested — that is, a lack of the time needed to properly hint a font, as well as a scarcity of font-hinting experts.

Luckily for us, web font service vendors are continually improving the quality of fonts, and eventually everyone’s fonts will be spruced up. Because a lot of work goes into maintaining proper fonts, I encourage you to buy fonts and to subscribe to paid web hosting plans, which (among other things) will speed up the hinting efforts of font foundries. The greater the demand, the faster the process.

If supporting Windows users is mission critical for your project, then consider manually hinted typefaces, such as TheSans Office22 from LucasFonts (these guys are known for their obsession with hinting) or the numerous other typefaces designed for Microsoft Office applications (their names will usually contain “Com,” “Offc” or “Office”). If selecting a specialized typeface for an audience with older Windows systems is not worth the trouble, then just stick with the tried and tested Arial, Georgia or Verdana.

For more in-depth information about font rendering, read “A Closer Look at Font Rendering23” by Tim Ahrens.

Hardware Concerns
A problem we are facing across the industry is the diversity of pixel densities; as a result, typography is not spared either. One interesting solution is to embed graded fonts for different densities, just as print designers use graded fonts24 to more precisely control the effects of ink on paper. Read more about this approach in Oliver Reichenstein’s article “New Site With Responsive Typography25.”

Adelle set at 16 pixels.26
Glyphs are rendered differently even on devices from the same manufacturer. Shown here is Adelle set at 16 pixels as rendered on an iPhone 3G, iPad 3 and iPhone 4S, enlarged in Photoshop, from a web page screenshot.

Another example is typesetting for screen billboards and TV screens, which often require thicker weights and more weight contrast. In such cases, you would skip two weights on a scale and combine the regular style with the extra bold. Previewing such designs on your desktop or Retina laptop is not enough. As with designing for mobile, we have to test on real hardware.

The Interface Type
Hardware and software aspects aside, context also refers to the type of interface. For instance, on content-driven news portals, magazines, novels and textbooks in a digital setting, strings of sentences should have a clear structure, directly connected to each other and that form a linear reading path.

Topics on content-driven websites are usually diverse (even on niche websites), and a story needs to be introduced clearly in order for the reader to understand it. (Remember the editorial devices from above?)

On the other hand, information in web applications is straightforward, usually bare-bones and factual, with easily comparable items or data, most often constrained to a certain timeframe. Unlike sentences in linear text, bits can be read and comprehended in isolation and are, therefore, open to the reader’s interpretation. We can safely assume that the user will jump randomly, in a non-linear fashion, from one bit of information to another.

With web applications, the context of content is mostly predictable. Some typical use cases are checking sales figures; analyzing website statistics in tables, diagrams and charts; editing date- and time-related notes; and, in the event of web mail, checking whether you are the lucky winner in the Nigerian Royal Lottery.

The User Link

On the Internet, everyone is our target customer, especially if we are building a multilingual system. If a button has just enough room for “Return” in English, then “Retour” in French, “Zurück” in German, “Povratak” in Croatian and “Visszatérés” in Hungarian might not fit.

Accessibility Concerns
Dyslexia is an impairment to a person’s ability to read. For instance, a dyslexic brain sees characters as images and rotates and mirrors letters. As a result, a lowercase two-story “a” with a weak tail might appear the same to a dyslexic person as an italic “e.”

Most characters in geometric typefaces are hard for people with dyslexia to read because of similarities in form and shape. The mirrored “p” might look the same as a “q,” and a rotated “n” might look the same as a “u.” This doesn’t mean we should immediately switch to specialized typefaces, but being aware of such conditions is a part of the web designer’s literacy.

To complicate matters, dyslexia occurs with another learning disability, attention deficit disorder, in about every fourth case.

Futura and Open Dyslexic.27
Added gravity keeps the letters in place. Shown here are Futura and Open Dyslexic.

Font smoothing on the screen is possible thanks to red, green and blue subpixels. Unfortunately, for a small percentage of the male population, some typefaces appear sharper or blurrier, lighter or fatter than for the rest of us, simply because the red subpixel isn’t distinctive enough. With free tools such as Color Oracle28, seeing how your typeface of choice performs for the color-vision impaired is easy.

Perceivement of anti-aliased letters.29
Those with color-vision impairments perceive anti-aliased letters differently.

Selecting A Typeface For Function Over Form Link

Contrary to popular belief, having an eye for the perfect typeface is not an innate gift. Sure, talent will give you an initial advantage, but that will take you only so far. Train yourself to learn about the project at hand, and insight into suitable typefaces will come, thus helping you narrow the pool to a few appropriate candidates.

A little digression. Many tutorials and how-tos have been written about choosing the appropriate typeface based on atmosphere and on look and feel. Designing atmosphere, evoking emotions and visually distinguishing a brand from its competitors is the responsibility of the graphic and UI designers. A typographic designer, or typesetter, takes a different angle, starting with the utilitarian needs and goals of the project, and developing from there. Both aspects are often required for a successful, well-rounded project.

Because these goals are so different, we have to be leery of suggesting font combinations and using less-than-specific adjectives such as “beautiful” and even the less-dramatic “nice” without providing context. A typeface can only be judged in the context of a particular situation. If a typeface is observed in isolation, then we must evaluate it at a strictly technical level.

When I see Comic Sans used on an invitation to a kindergarten party, the first thing I’ll do (of course) is roll my eyes. But at some point, I have to be honest and admit that it’s appropriate to the audience — my kids and their friends — as long as I don’t encourage them to use it everywhere. But if I saw Comic Sans on a company memo, I’d probably go postal30.

Serif vs. Sans: Who Started It? Link

Many beginners have a hard time choosing between serif and sans-serif typefaces. As always, it depends on the situation, but it should never be a matter of the typographer or client’s personal taste. There is no difference in legibility between the two31, especially in this era of high-density screens.

Sometimes a project allows us to cut corners, and if we do our homework and learn about the content, we can make informed decisions. For example, if we are presenting vertically oriented data (for example, a table of exchange rates or a list of product prices), then it would probably be better to use a typeface without serifs, which usually adds a horizontal emphasis. On the other hand, because serifs encourage horizontal flow along the line of text, they are more suitable for a set of linear thoughts or where vertical space is scarce.

We all know it, but we often forget to step back and see the bigger picture in a project. For instance, I like the reasoning of Vitaly Friedman and Elliot Jay Stocks in their decision to go with a sans serif for Smashing Magazine’s body text. Upon taking a bird’s-eye view and observing the page’s layout and interface as a whole, they concluded:

“Because there’s a lot going on visually on Smashing Magazine — screenshots, buttons and noisy ads — a sans-serif felt like a more sensible, uncluttered route for body copy.”

– Vitaly Friedman and Elliot Jay Stocks

Letter Legibility Link

Another important test of legibility is how different each glyph is from the other glyphs in a single typeface. Designers use pangrams32, or short test strings, to evaluate and compare typefaces; for examples, the famous “The quick brown fox jumps over the lazy dog,” “Handgloves” and “Hamburgefonstiv.”

The text “aegh! iIl1 0O,” devised by designer Jon Tan, goes a little further. It is a good way both to get a sense of a typeface and to check the distinctness of the “i,” “I,” “l” and “1” and of the “0” and “O.”

We can extend such strings even further and include italics, small caps and numerals. For example, we could extend the string with an italic “e,” just to make sure it’s not too similar to a rotated lowercase “a,” especially at smaller sizes where character detail can get lost.

League Gothic, Gill Sans, Myriad Pro, Neue Helvetica.33
Try to avoid ambiguous letterforms. Top to bottom: League Gothic, Gill Sans, Myriad Pro, Neue Helvetica.

Foreign Affairs Link

Support for international visitors is a must. If you are about to set the whole website in a language that you are not familiar with (say, Arabic or Vietnamese), then you’ll probably need a one-on-one lesson with a local typographer. But most web designers will build user profiles for their international audience, and we have to make sure that all characters are supported and that the typeface works in languages less common than English and Spanish. Each language has a particular critical combination or two.

It’s not uncommon to see a character sequence of “gy” in Hungarian or “ij” in Ijekavian dialects in some South Slavic languages, not to mention digraphs34 (“ch,” “dž,” “ij,” “lj” and “ty”) and trigraphs35 (“dzs” and “sch”), which are usually represented with two and three separate glyphs, respectively.

As a curiosity, in the Italian alphabet36, the letters “k,” “j,” “w,” “x” and “y” are used only for words adopted from other languages, and some of them are used strictly colloquially — for instance, “k” as an emphasized “c” — or so I heard when I cut a guy off in traffic the last time I was in Italy. But I digress. The slightly reduced alphabet results in frequent letter combinations such as “cc,” “ll,” “tt” and “zz” next to — or surrounded by — “o” or “i.” You can already guess that these combinations can make for some awkward spacing.

In southeast Europe, family names often end with “č” or “ć,” and no one likes when a letter in their first or last name is stripped of a diacritic or, even worse, rendered in a fallback typeface. Danish and Norwegian, for example, use “ø,” and German uses “ß” — and those are still only within the Latin alphabet.

Know the characters and combinations in your target language.37
Know the characters and combinations in your target language.

To cover the extended Latin alphabet, we obviously have to choose a typeface that covers all Central European characters (i.e. use paid fonts). But in cases of the aforementioned letter combinations in less common languages, it wouldn’t hurt to consider typeface candidates that support those particular languages, because at the time of writing, kerning is still not possible with CSS (no pun intended).

We Read Familiar Typefaces Best, But We Learn Better With Unfamiliar Ones. Link

People are believed to read best in familiar typefaces38 (PDF, 11.5 MB). Even experts — namely, Zuzana Licko and Erik Spiekermann — say that we read best in what we read most. Learn about the history of the typeface you’re considering and compare it to the usual suspects for the target audience.

Skolar39, a typeface by David Brezina, was designed for scholarly and multilingual publications, where people are used to seeing Times New Roman. Skolar is fresh and modern, yet similar enough in features and appearance to Times New Roman to be easily adopted by this user group. It’s a safe bet and a good option to begin with, but by all means do experiment and try alternatives that might appeal to your target audience.

Differences between Times and Times New Roman.40
Skolar as a replacement for Times and Times New Roman? Can you spot the difference between the two Times’?

A recent study by Connor Diemand-Yauman, Daniel M. Oppenheimer and Erikka B. Vaughan on the “Effects of Disfluency on Educational Outcomes41” (PDF, 1.3 MB) found that information rendered in hard-to-read fonts was more easily remembered than information rendered in fonts deemed easier to read. The study showed that deeper processing stimulated by disfluency led to improved memory performance. This doesn’t mean we should automatically select the strangest typeface on the planet, but considering an alternative to a popular typeface does make sense.

Display Typefaces in the Responsive Era Link

Condensed gothics and grotesques as well as specialized decorative typefaces are being rediscovered on the web. They add style and weight, functioning especially well as attention-grabbers in mastheads and as anchors in lengthy text. Stylistic suggestions are beyond the scope of this article, because headlines on the web are often written to conform to SEO best practices to attract more visitors, which is a somewhat different function from headlines in print material. However, let’s look at a potential pitfall in setting headlines in a condensed typeface on the web, where the context is never static.

If changes in screen orientation and aspect ratio are neglected, then a multi-word headline set in a “skyline” typeface (i.e. a tall condensed sans serif) might work with landscape-oriented and desktop-sized breakpoints; at the same time, it might occupy too much vertical space on a smartphone in portrait orientation, especially if the original single-line headline is pushed onto a second line. Merely reducing the font size to fit the element could help, but the result might not be as legible as the text on a desktop screen.

The opposite also applies. If we are designing mobile first, then a big bold headline that works perfectly on a tiny screen might be too loud if literally transposed to desktop sizes.

An extended companion to a condensed typeface set at a smaller font size could provide a better match where vertical space comes at a premium. When the extended typeface is too tiny, the condensed partner could step in.

headline set in the League Gothic on a single line.42
This headline, set in the League Gothic on a single line, is barely legible on mobile. Set on multiple lines, the headline occupies too much vertical space.

Nimbus Sans Condensed and Nimbus Sans Extended in action.43
Nimbus Sans Condensed and Nimbus Sans Extended in action.

Combining Typefaces Link

Typefaces are combined to create tension and to generate interest in a design. In most cases, however, once the reader is pulled in, favoring order and structure of composition over the beauty of letterforms will improve the flow of reading, especially on low-resolution screens, where subtleties and details of typographic accessories are not immediately evident. Consider this piece of advice as a last attempt to talk you out of combining very different fonts, unless necessary.

As a rule of thumb and in order to avoid a complete typographic disaster, combine typefaces with matching x-heights. Comparing x-heights at the same font size is a litmus test to see whether words set in different types can coexist. Always keep in mind that typesetting for the web should be bulletproof and future-proof. That being said, maintaining typographic harmony is not the easiest task if elements sitting on the same baseline need different letter sizes as compensation for mismatching x-heights.

Aller combined with Minion Pro, Georgia and Adelle.44
Aller combined with Minion Pro, Georgia and Adelle. Notice how Minion Pro and Georgia call for additional adjustments to line height.

A Safe Bet Approach Link

The easiest solution to combining typefaces is to follow type relationships and your own common sense.

A typeface that is a member of a bigger system can be combined with other family members along any of the axes (such as weight, width and cut), so being able to use typefaces from the same type family will come as a relief. Look for extended families or super-families that have more than a few basic styles (including regular, italic, bold and bold italic). Extended families include everything from thin to black weights and sometimes multiple widths, while super-families, also referred to as type systems, additionally contain sans-serif and serif companions, text and display cuts and sometimes graded fonts.

Don’t worry too much about exact classifications, because categories are not always consistent from foundry to foundry. Plus, the boundary between extended families and super-families is not always clear. For example, some collections include sans-serif and serif in multiple weights but not multiple widths. Remember, though, that most type families have only a limited number of basic styles, while only a few dozen are versatile enough to cover all typographic needs. (A few dozen out of the hundreds of thousands of typefaces in existence today is a tiny fraction.) If you have trouble combining typefaces, versatile collections are always a good option to begin with.

JAF Bernino Sans has multiple weights and widths.45
JAF Bernino Sans has multiple weights and widths. The grayed-out letters are fake italics, also referred to as slanted romans. Some browsers are capable of distorting fonts into a slanted shape on the fly with CSS, but pseudo-italics are considered a typographical crime.

Typefaces designed by the same designer are often a smart combination, because proportions, shapes, strokes and angles will share the same DNA. Note the typefaces designed by Jos Buivenga, Veronika Burian, Matthew Carter, Nikola Đurek, Adrian Frutiger, Jose Scaglione, Mark Simonson and Erik Spiekermann, to name just a few of my heroes, and try to spot each designer’s signature.

As a last resort, combine typefaces from the same foundry, because a foundry will normally offer typefaces that can be combined. A smart designer subscribes to typography-related newsletters and, consequently, gets exposed to a significant number of proven and reusable combinations, as suggested by the experienced designers and typographers who work at foundries. As a bonus, your newsletter folder will become a nice reference archive over time.

If you still want to experiment on your own, create enough contrast between typefaces to achieve a comfortable balance. Avoid typefaces with competing characters, which would create too much noise and distract the reader. If two typefaces are too similar, though, the reader might get irritated just because they can’t clearly see the differences. Combining two neighboring weights (such as regular and semibold or bold and extra bold) shouldn’t become a habit unless you know what you’re doing.

As with cooking, start by preparing simple edible meals. Then, after you’ve gotten some experience in not poisoning people, you can safely put the cookbook on the shelf and start experimenting with exotic spices and your routines. If you are dying for some practical examples, here are a few handy articles:

Editorial Accessories Link

Display and decorative typefaces are appropriate for short text snippets, such as headlines and pull quotes, because they set the tone and atmosphere and break up long copy (remember the reading-time assessment from above?). Text typefaces are utilitarian and suitable for long reading. Reading can get boring after a while, particularly on an attention-hostile technology such as an Internet-connected computer.

“Designers like even grayness, which is the worst thing for a reader.”

– Erik Spiekermann

Insert an occasional break with a heading or pull quote, to nudge the reader along. Pull quotes that highlight important facts from the text would benefit from a display typeface. Because headings are a part of the main text, they are best set with a variation of the primary typeface (small caps, for instance). As stated, this is more of a safe bet than a rule set in stone.

We Have A Responsibility Link

Two important factors should influence your decisions. First, if they don’t like your typographic choice, a reader can change it via the customization options built into the application or device. And if they do that, they will usually change it to something more generic, thus ruining your typesetting altogether. Back in the day, when we combined absolute units for line heights with relative units for letters in Internet Explorer (or so I’ve heard), even a slight increase in letter size would bring chaos to the page.

Secondly, the absence of a fold or any physical boundaries of the page is both a curse and a blessing. On the positive side, space for content on the screen is virtually infinite. On the negative side, designing a balanced layout becomes more difficult because, in most cases, it won’t be seen all at once from top to bottom. This is why editorial accessories are valuable features that can help us design a better reading experience. Once the user scrolls further down the page, we can’t expect them to run a marathon all the way to the end.

When designing for everyone, we shouldn’t assume anything. We ought to accept that our typographic designs will be seen on various hardware devices, in a range of pixel densities. We have to make sure our text is as legible as possible when seen in the virtually limitless combination of variables such as space, time, cognition, social conditions and physical conditions. The days of hard and fast rules are gone, and our responsibility is to learn everything we possibly can about a project to make informed decisions and establish a solid design concept.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48

↑ Back to top Tweet itShare on Facebook

Marko Dugonjić is a designer from Velika Gorica, Croatia. As the user experience director at Creative Nights, he improves customers’ digital experience for local and international clients, speaks at international web design conferences and runs in-house and public UX workshops. He founded Typetester, a popular web typography design tool.

  1. 1

    Yea, but sometimes it’s really hard to compare a good typo, because a lot of font-designers forgot make a special chars.
    eg. for German, Polish, Czech fonts, like (ó ż ź ć ę ł).

  2. 2

    It’s nice to see the design community slowly catching on. By that I mean practitioners. The next step will be to educate clients to spend money on making things easier to read before making them look pretty. Sadly, the bulk of (design) consumers still want to be the most popular kid in school, and the majority of practicing designers want to be rock-stars. The last thing they want to do is embrace the philosophy of “humility of mind” (Warde, B. 1930). A true typographer should accept the fact they are a humble and invisible participant in the communication process between authour and audience, their best work going unnoticed. Not the sort of ideology hipster-designers who forage ffffound are likely readily embrace (then again, local produce wasn’t always hip).

    And through out this transition of consciousness for both client and designer will need to be a significant effort on behalf of academics to make their knowledge more accessible. The unfortunate (but rapidly shifting) reality today is that most academics would sooner die then embrace a plain-language approach to their writing in an effort to reach a broader audience. Largely due to pretentious self-ritiousness, and a desire to impress three other people in the world. Thankfully, the dialogue of open-source versus peer-reviewed is gaining a lot of long overdue attention, and with this will come issues of making language more accessible to the lay-typographer.

    Following this, practicing typographers will be able to scrutinize this field of research, which to date, is still very small. Much of what has been published contradicts other research, or leaves much to be desired. Skilled typographers with a strong background in experimental psychology, and vice-versa, are very rare. Not even “experts” like Licko and Spiekermann fall under that umbrella. This is a very young field of research, fertile for new farmers.

    Next steps?
    1. Practicing typographers need to educate themselves so they are in a position to evaluate (and possibly practice) scientific research.
    2. Practicing typographers need to *want* to place human performance before client preference. Even if it means loosing a job. Consuming someones resources for a pair of tits is socially, politically, culturally, economically, and environmentally irresponsible. How would you feel explaining to your grand-children that you made a living selling social pressure to teenage girls which resulted in them slathering toxic petroleum products onto their faces every day?
    3. The real kicker: Clients need to *want* to stop spending their money on colourful landfill. If they don’t want bullshit, then we don’t need to pander to them.

    In short, a social and cultural revolution on a global scale, of which typography is just a fraction. But is it possible that something as seemingly insignificant as a font actually be a catalyst?

    Even the mightiest waterfall begins with just a single drop of water…

  3. 3

    Some people can read right past a phrase such as “First Thing’s First: Project Research” without thinking about fonts.

    But when it’s a headline/header it’s hard to ignore the gratuitous apostrophe which argues for an upgraded process that includes a proofreader/editor, since there are language nerds among those who read typography articles.

    This is highly likely to undermine their reading experience. Some may find it so disappointing and distracting that they break off reading to fire off a comment.

    Just sayin’

    • 4

      Darton Williams

      February 18, 2013 4:28 pm

      “This is highly likely to undermine their reading experience. Some may find it so disappointing and distracting that they break off reading to fire off a comment.”

      Laughing to myself because I did just that.

    • 5

      Thanks, Tom. Fixed it! :-)

    • 6

      So true. Some of us are in fact both language nerds AND type nerds. That is in fact why I am here. I am currently working on research to establish that basic typography is a relevant foundation to literature. Such mistakes make this source (which is full of great info!) completely inappropriate for research within the humanities division. P.S. “how-to’s” should just be “how-tos”.

  4. 7

    Thank you for this well informed article. I enjoyed the educational factor as much as the amusing remarks here and there. As a student of web design this has covered most of my questions and even brought to attention the little things that matter.

  5. 8

    This is an article worth killing a small tree for (maybe a bush) ,printing it out then keep it handy to read and reread!

    Feel free to do as I did and change the font to Comic Sans before printing :)


  6. 10

    He didn’t mention anything about not using comic sans

  7. 11

    Article readability stats script is pretty awesome and handy. I wish most blogs would implement that.

  8. 12

    Brandon Durham

    February 19, 2013 6:59 pm

    This is a subject that has been on my mind for years, but never so much as now. I’ve been working on for weeks to ensure a good reading experience. It’s absolutely been more difficult than I ever imagined to get the minor details (font, line spacing, font size, line width, font color, background color, etc.) “right” and comfortable. I’m still not sure it’s just right, but I’m making tweaks ever day to try to make it better.

    Also working on more portable formats for each chapter, which is a completely different animal. iBooks, PDFs, epubs. It could be a full-time job, really, and we just release one chapter every two weeks.

  9. 13

    Great article with TONS of great information Marko! I’m still a noob student of typeface selection, so I will have to reread this article again because there’s just so much information to take in. Big thanks! :)

  10. 14

    Sebastian Green

    February 21, 2013 6:35 pm

    Great article. The reading time script is great – I will be putting that to use.

    Technology is getting there slowly. Media queries allow us to detect screen size & resolution so that we can change the font selection and size based on the screen the users has. Its not clear cut though. We all know the whole breakpoints issue with keeping the design fluid between them. Testing on every screen size is not possible & its only going ot get worse.

    Just as a side note, the information on dyslexia :

    “Dyslexia is an impairment to a person’s ability to read. For instance, a dyslexic brain sees characters as images and rotates and mirrors letters….”

    This information is incorrect as it only affects a small percentage of dyslexia sufferers. In reality most dyslexia sufferers are actually fantastic readers. From early ages they actually have reading ages off the charts from a very young age, often outperforming class mates of the same age & older (reading test carried out in schools). This is actually used as one of the identifying traits of dyslexia.

  11. 15

    Great article. I never figured out how to make reading on the website so easy, you have great font even on this website, I love what you have done. Thank you for the feedback!!

  12. 16

    i think this is a better basic guide for serif vs sans serif :

  13. 17

    Cheryl Desmond

    February 25, 2013 2:20 am

    Hi, Excellent article, I gave it a quick read & plan to reread a couple more times. But about half-way through I became very distracted, trying to figure out the typeface the article is set in. (Of course, I’m pretty sure it’s not Comic Sans – grinning.) Please clue me in, thanks!

  14. 19

    It’s nice to envision the planning community slowly catching on. By that I mean practitioners. succeeding step are going to be to coach purchasers to pay cash on creating things easier to scan before creating them look pretty. Sadly, the majority of (design) shoppers still wish to be the foremost common child at school, and therefore the majority of active designers wish to be rock-stars. The very last thing they need to try and do is embrace the philosophy of “humility of mind” (Warde, B. 1930). a real printer ought to settle for the very fact they’re a humble and invisible participant within the communication method between authour and audience, their best work going neglected. Not the kind of ideology hipster-designers WHO forage ffffound square measure doubtless pronto embrace (then once more, native turn out wasn’t perpetually hip). I use this site for daily update.

  15. 20

    Mark F. Simchock

    June 25, 2014 12:48 pm

    Good stuff. Thanks Marko.

    Two things:

    1) “A typeface can only be judged in the context of a particular situation.”
    Yes. Brilliant point. #SpotOn. In fact, I believe, that can be said for all design. That is, design has context. If / when you separate the two then design’s quality property (if you will) becomes null.

    2) There is one key perspective that I think you might have overlooked. Mind you, I feel as if you hinted at it here and there but a direct hit is not something I think I read. So as minor as might point might be, I do believe such a consideration belongs within your framework.

    In short, thinking about the reading experience (as detailed above) must be wrapped in the context of “conversions & completion”. That is, getting the person to want to read the content; getting them to actually start; and then guiding (?) them through the process (i.e., reading retention) until they actually finish. For example, in theory, you can have something that is easy to read (once you start) but no one elects to read it, and if they do, they don’t remember it.

    Mind you, you’re right, to some extent I’m splitting hairs. But in any case, I think it’s worth considering “conversions & completion” in the context of defining a “consumption experience.” Making something easy to read does not necessarily mean anyone is going to read it and/or care.

  16. 21

    Lack of color contrast between the font and the background color is a big issue for me. There are way too many websites out there that use a soft gray for text with a white background. Mashable is one example. They either need to increase the font size or use a darker color.


↑ Back to top