search

dobtco / dvl-core

Base styles for the DOBT View Layer.
https://design.dobt.co/
1 stars 1 forks source link

Attempting to style FOUT to match webfonts #143

Closed jrubenoff closed 9 years ago

jrubenoff commented 9 years ago

Looking for feedback here. Very simple question, but hard to explain.

Our webfonts are 150KB. If we load them asynchronously, it's a huge performance gain. (For our static sites, we'd cut load times in half.)

The problem is that the discrepancy between our webfonts and fallbacks is very jarring, so the initial experience would suck. Toggling between two tabs here:

before

So, a lesson: setting font-size: 1rem; does not actually specify the height of a typeface's letterforms. ems refer to the height of the block in which the type designer can draw each character. The actual height of the character can vary wildly.

We can make our fallback fonts match our webfonts by resizing them. It works really well. Here are the results:

after

In practice, though, when you actually try to use the site, it's not great.

fontjump

Here's what's happening: Typekit fonts have already been cached, but the JS is still adding the .wf-loading and .wf-active classes. So the user sees the font sizes intended for the fallbacks, right before the real font size.

How might we mitigate this?

Brainstorming: maybe we could fade the text in after webfonts are loaded, but only when webfonts are cached, since we know the delay will be short.

ajb commented 9 years ago

This seems like unnecessarily complexity and over-optimization. I don't really get it.

jkgoldst commented 9 years ago

I don't get it

On Fri, Aug 7, 2015 at 8:20 AM, Adam Becker notifications@github.com wrote:

This seems like unnecessarily complexity and over-optimization. I don't really get it.

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/pull/143#issuecomment-128686365.

Josh Goldstein CEO, Department of Better Technology (dobt.co) +1-301-221-2789

jrubenoff commented 9 years ago

I think I'm doing a poor job of explaining. Will re-open in a bit.

ajb commented 9 years ago

hm, ok. i understand completely what you wrote, i just think its a total dead end.

On Friday, August 7, 2015, Josh Rubenoff notifications@github.com wrote:

Closed #143 https://github.com/dobtco/dvl-core/pull/143.

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/pull/143#event-376618353.

Adam Becker (951) 9-BECKER @AdamJacobBecker