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?
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
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.
This looks worth checking out:
“an awesome HTML5 and CSS3 framework for making responsive, cross-browser websites with beautiful typography”
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.
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
“FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.”
Best Practices for Serving Webfonts to IE9
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 */
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.
src: url(‘myfont-webfont.eot#’) format(’embedded-opentype’),