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