Smoother Loading Typekit Fonts: A nice approach by Joni Korpi

For lovers of Typekit webfonts: If you want to guarantee that your pages load for all users without glitches, you’ll want to use Typekit’s asynchronous loading script. Advantage: pages will load fine for all users even in the event of a font network outage. Disadvantage: you’ll notice a flash of unstyled text (FOUT).

Joni Korpi, designer of the Golden Grid System and the Frameless grid system, has proposed a nice solution, which involves creative use of:

  • loading classes provided by Typekit
  • CSS3 transitions for fade-in
  • a base64 animated image to indicate that fonts are loading

As you’ll notice while perusing his blog, it provides a nice effect. I’m contemplating this method.

Read Joni’s post about this method

How does it strike you?

Related Links

iA Writer’s Typography and Color Scheme

For those who love iA’s Writer app, Justin Blanton has examined details of its visual and typographic design:

  • Background: f5f6f6 (rgb(245,246,246)) with a touch of noise
  • Font Color: #424242 (rgb(66,66,66))
  • Font: Nitti Light
  • Line Height / Leading: 1.5

Read more here: How to make any app look like iA’s Writer — Justin Blanton — Hypertext.net

Using CSS Transitions to Smooth Media Queries

From Elliott Jay Stocks:

The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize?

via CSS transitions & media queries » Blog » Elliot Jay Stocks.

Gridless: a CSS boilerplate for responsive websites

This looks worth checking out:

Gridless

“an awesome HTML5 and CSS3 framework for making responsive, cross-browser websites with beautiful typography”

Most responsive and adaptive HTML/CSS frameworks or boilerplates start with desktop styles and use media queries to serve mobile browsers the right layout. The problem is that most mobiles won’t respond to these media queries because they don’t support it. Also, using a polyfill like Respond.js will not give you any result because they are very limited devices and don’t even support JavaScript.

But Gridless uses a different approach: it uses media queries to serve a progressively-enhanced responsive layout, starting from mobile and building up to desktop sizes.

via Gridless – An awesome boilerplate for responsive, cross-browser websites.

More Meaningful Typography :: A List Apart

Designing with modular scales is one way to make more conscious, meaningful choices about measurement on the web. Modular scales work with—not against—responsive design and grids, provide a sensible alternative to basing our compositions on viewport limitations du jour, and help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers. Tim Brown shows us how.

Link to the original post

Fontspring’s New Bulletproof @Font-Face Syntax

UPDATE

Best Practices for Serving Webfonts to IE9

New code:
[css]@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}[/css]

PREVIOUS

An improvement on Paul Irish’s original Bulletproof syntax and the follow-up Mo’ Bulletproofer syntax

Today from Ethan Dunham at the Fontspring blog, a fix for troubles loading web fonts across browsers, including Android, IE 9, etc.

[css]@font-face {
font-family: ‘MyFontFamily’;
src: url(‘myfont-webfont.eot#’) format(’embedded-opentype’),
url(‘myfont-webfont.woff’) format(‘woff’),
url(‘myfont-webfont.ttf’) format(‘truetype’),
url(‘myfont-webfont.svg#webfontFqDaNIX6’) format(‘svg’);
}[/css]