Web Typography: HTML Defaults

Just a quick tip on web typography, since I’m not a practicing HTML man, and I don’t pretend to be.

Screen Shot 2014-05-23 at 3.42.07 PM

Turn kerning and standard ligatures on by default

HTML-Defaults-IMG_2957

When Elliot Jay Stocks came to TYPO San Francisco to talk about the current state of advanced web typography, he ran through a number of changes between two years ago and now in terms of CSS. My main takeaway can be summed up by the above presentation slide, and the following implementation to cover as wide a range of browsers as possible. The current best way to enable kerning and ligatures is to affix these attributes to the page’s body:

text-rendering: optimizeLegibility;
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
-ms-font-feature-settings: "kern";
-o-font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
font-feature-settings: "kern";
-webkit-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga" 1;
-moz-font-feature-settings: "liga" 1;
-moz-font-feature-settings: "liga=1";
-ms-font-feature-settings: "liga" 1;
font-feature-settings: "liga" 1;

The rest of the things that could be considered defaults, such as a paragraph’s line length, or hyphenation, etc., I recommend baking into your design after you’ve considered the conditions under which it may be viewed. While reviewing defaults, it may be a good time to also check to make sure any webfonts used have their styles properly set up.

A note on the value of global resets

I see these becoming less and less relevant. It feels like an over-controlling attitude to take with such a fluid medium, specifying every single element, and then resetting the browser defaults for each to zero, none, etc.. I’m more of the attitude of targeting a specific range of browsers, and then addressing problems as they arise. I’m sure there are reasons why I’m wrong. Please let me have them. Plus, there must be a lot of obvious stuff I’m missing here.

That’s it; and this concludes my series on defaults. Next week, I’ll try to get a better view of typography from inside the typographer’s brain. Using Type continues here Thursday. Thanks to Nick Shinn’s Brown Gothic for setting today’s title.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 61,757 other followers