Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips Tools And Resources For A More Meaningful Web Typography

It’s the small details that make a project shine. Solid typography, well-crafted with attention and care is one of them. A harmonious visual rhythm, typographic subtleties like soft caps, margin outdents or the correct use of hyphens and dashes — there are a lot of things that add up to it.

Further reading on Smashing: Link

In practice, however, publishing on the web is supposed to be fast, and the little details are often overlooked, which is a pity, because they are not only pleasing to the eye but also improve the reading experience.

The tools and resources compiled in this article will help you bring some of that meaning that typography has always benefited from in print to your web projects. They simplify the process of establishing a solid foundation and modular scale to build upon, take care of the little details, so they don’t get lost along the way, and offer solutions to common pitfalls. Are you ready to do some catching up on that type game?

Establishing Visual Rhythm Link

Setting the Baseline Grid Link

Web typography often lacks that sense of craftsmanship that typography in print has benefited from since Johannes Gutenberg invented the printing press more than 500 years ago. To bring back a more meaningful typography, the Gutenberg Web Typography Starter Kit7 sets the baseline grid to establish a proper vertical rhythm which makes sure all elements fit into it harmoniously. The kit is based on Sass and comes with two predefined themes based on the Google Fonts Merriweather and Open Sans, but custom options allow you to load custom typefaces as well. The backbone of your typography.

Calculating a Modular Scale Link

A modular scale sets the visual harmony of your design. You use it like a ruler to set type sizes or to measure and set the size of any element or negative space in your composition. Body text size is a good base to establish your scale, also fixed-width images, for example. The modular scale calculator8 by Scott Kellum and Tim Brown provides valuable tips to choose a base and ratio for your design and uses these values to calculate your scale. Once set, you can get your scale as a Sass or JavaScript plugin, or you can reference your calculated results right on the site. A great tool to achieve responsive typography.

Modular scale9
The Modular Scale calculator10 multiplies your scale’s base (for example the size of your body text) with a ratio to produce a scale of numbers that are proportionally related. (View large version11)

A Framework to Build Upon Link

To start your typography endeavour off right, you might also want to take a look at the Typeplate starter kit12. It offers solid, modular and flexible base styles, proper markup that you can extend to your liking. The library is not concerned with aesthetic design choices but gives you the building blocks to establish your own typographic framework. The CSS file weighs in at only 10KB, Sass at 18KB, and a Bower package is also available.

Taking Care Of The Details Link

Small Caps, Ligatures and Other Finesses Made Easy Link

Caring for fine typographic details often comes with a downside: there’s usually no getting around a convoluted CSS. Kenneth Ormandy’s Utility Open Type13 puts an end to this. Its 1.75KB small CSS file provides CSS utility classes for advanced typographic features such as ligatures, small caps, number variants and other finesses, making them as easy to apply to your elements and <span>s as using bold and italics. To spare you a lot of maintenance work, Utility Open Type cascades predictably. It supports Chrome, Firefox and IE 10+ and falls back gracefully elsewhere.

An HTML Preprocessor for Better Readability Link

Real hanging punctuation, optical margin outdents, punctuation and space substitution, soft hyphens — it’s the small details that improve a reading experience significantly. But, unfortunately, we often don’t pay as much attention to them as they’d deserve it. That’s where the HTML preprocessor Typeset.js1614 comes in. It takes care of all these typographic subtleties, so they don’t get lost along the way.

Text with Typeset.js enabled.15
Text with Typeset.js1614 enabled. Notice how details such as hanging punctuation, small-caps conversion and space substitution improve readability compared to the image below that doesn’t have Typeset.js enabled. (View large version17)
Text without Typeset.js enabled.18
The same text without Typeset.js. It feels more cramped and provides the reader with less visual anchors to guide them through the text. (View large version19)

Dealing With Long Words in CSS Link

It might not be too much of a problem for English-speaking websites, but some languages, German, for example, have words that are very, very long. So how to deal with them in responsive web design without breaking layouts and causing cropped words? Michael Scharnagl has found a solution20: combine overflow-wrap with word-wrap and hyphens that will show in browsers supporting it and will break lines in other browsers. Good to know.

Making Footnotes More User-Friendly Link

Long reads often call for footnotes and sidenotes. The common solution to provide them on the web, however, is quite distracting to the reading flow: you click a tiny number and jump to the bottom of the page. Chris Sauvé found a less interruptive way to enrich a text with additional information. His jQuery plugin Bigfoot.js2321 detects the footnote link and content, turns the link into an unobtrusive button and opens a pop-over when the reader clicks on the button.

Footnotes as pop-overs22
Bigfoot.js2321 provides footnotes that integrate well into the natural reading flow. (View large version24)

Guides And Cheatsheets Link

A Practical Typography Guide Link

If you’re looking for one comprehensive guide that covers all the essentials of professional typography, check out Donny Truong’s free eBook25. It leads you step by step through the craft of making informed typographic choices, shaping your attention for detail and providing you with the technical background you need to gain full control of your typography. The eBook is free, but if you find it useful, be fair and consider paying for it. The price is up to you.

Typography Cheatsheet Link

Smart quotes, dumb quotes, dashes, hyphens — do you have a hard time telling them apart? Then Typewolf’s Typography cheatsheet26 is one for your bookmarks. It answers all your questions about their proper usage and recalls their Mac and Windows shortcuts and HTML entities as well as those for some other useful characters such as mathematical and non-English ones. Handy.

Choosing The Right Font Link

Try A Typeface Before You Purchase It Link

Usually, the only impression you get of a typeface before purchasing it is the specimen on the type foundry’s website. It needs a lot of imagination to asses from that little piece of default text what the typeface will look like in your own design. So if previewing is not enough for you, Font Stand27 has a licensing model which might be more to your liking. It gives you the chance to try any font for free in any of your applications for one hour — perfect for some quick prototyping. You can also rent a font on a monthly basis and after 12 months it automatically becomes yours. There are currently 635 families from 32 foundries to choose from. One little downside: the service is only available for Mac users.

Inspiring Font Combinations Link

Combining two fonts can be a challenge. What works, what doesn’t? Do-Hee Kim’s 100 Days Of Fonts28 project is a great source for some fresh inspiration. She designed and coded another combination of two Google fonts every day for 100 days. Impressive.

A combination of Abril Fatface and Sans Narrow29
Abril Fatface and Sans Narrow combined. One of Doo-Hee Kim’s inspiring Google Fonts combinations30.

How Widespread Is Your Font? Link

Arial, Helvetica Neue, Verdana — these are still the three most-used typefaces on the web (at least if you take into account the top million websites). If you want to know how widespread a font is before you use it in your project, well, Font Reach31 will tell you. The site scans the font stacks of the top million websites to rank them by popularity. You can also search for a specific font to see which websites use it. A nice tool no matter if you want to make a unique choice or plan to go with the current trend.

Web Font Loading And Performance Link

Web font loading has gone through a lot of iterations in the past: from data URIs to using scoped classes. The next iteration: Critical FOFT. The method builds on the Flash of Faux Text (FOFT) using a two stages loading process. Instead of loading the full Roman web font in the first stage, it loads a small subset of it (only upper and lower case characters, for example), and, thus, shrinks the first stage significantly. Zach Leatherman has done a comprehensive write-up describing the technique in detail32 and comparing its performance with other font loading techniques.

You have something to add to this collection? Feel free to share your favorite typography helpers in the comments section below.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
  2. 2 https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/
  3. 3 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
  4. 4 https://www.smashingmagazine.com/2015/10/space-yourself/#all-together-now
  5. 5 https://www.smashingmagazine.com/2014/12/the-good-the-bad-and-the-great-examples-of-web-typography/
  6. 6 https://www.smashingmagazine.com/2013/12/freebie-exo-2-0-geometric-sans-serif-font/
  7. 7 http://matejlatin.github.io/Gutenberg/
  8. 8 http://www.modularscale.com/
  9. 9 http://www.modularscale.com/
  10. 10 http://www.modularscale.com/
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/03/modular-scale-opt.png
  12. 12 http://typeplate.com/
  13. 13 http://utility-opentype.kennethormandy.com/
  14. 14 https://blot.im/typeset/
  15. 15 https://blot.im/typeset/
  16. 16 https://blot.im/typeset/
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/03/with-typesetjs-opt.png
  18. 18 https://blot.im/typeset/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/03/without-typesetjs-opt.png
  20. 20 https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
  21. 21 http://www.bigfootjs.com/
  22. 22 http://www.bigfootjs.com/
  23. 23 http://www.bigfootjs.com/
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/03/bigfootjs-opt.png
  25. 25 https://prowebtype.com/
  26. 26 https://www.typewolf.com/cheatsheet#useful-typographic-characters
  27. 27 https://fontstand.com/
  28. 28 http://100daysoffonts.com/
  29. 29 http://100daysoffonts.com/
  30. 30 http://100daysoffonts.com/
  31. 31 http://www.fontreach.com/#
  32. 32 http://www.zachleat.com/web/critical-webfonts/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Cosima is editor at Smashing since 2013. When not writing articles for the Smashing Newsletter or the ‘Quick Tips’ series, she’s probably working on a new Smashing eBook.

  1. 1

    Thanks for the post.

    I always thought libraries like typeplate are way too bloated.
    The most important thing for typography is a consistent vertical rythm. YOu don’t need yet another complicated tool. A small sass mixin is good enough.

    I wrote a small mixin which does exactly that based on rems (including a pixel fallback)

    https://github.com/saviomuc/SCSS-Vertical-Rythm-Generator

    9
  2. 2

    typo!
    it might be difficulty to “asses”

    0

↑ Back to top