{"action":"created","issue":{"url":"https://api.github.com/repos/dobtco/dvl-core/issues/143","labels_url":"https://api.github.com/repos/dobtco/dvl-core/issues/143/labels{/name}","comments_url":"https://api.github.com/repos/dobtco/dvl-core/issues/143/comments","events_url":"https://api.github.com/repos/dobtco/dvl-core/issues/143/events","html_url":"https://github.com/dobtco/dvl-core/pull/143","id":99555105,"number":143,"title":"Attempting to style FOUT to match webfonts","user":{"login":"jrubenoff","id":1328849,"avatar_url":"https://avatars.githubusercontent.com/u/1328849?v=3","gravatar_id":"","url":"https://api.github.com/users/jrubenoff","html_url":"https://github.com/jrubenoff","followers_url":"https://api.github.com/users/jrubenoff/followers","following_url":"https://api.github.com/users/jrubenoff/following{/other_user}","gists_url":"https://api.github.com/users/jrubenoff/gists{/gist_id}","starred_url":"https://api.github.com/users/jrubenoff/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jrubenoff/subscriptions","organizations_url":"https://api.github.com/users/jrubenoff/orgs","repos_url":"https://api.github.com/users/jrubenoff/repos","events_url":"https://api.github.com/users/jrubenoff/events{/privacy}","received_events_url":"https://api.github.com/users/jrubenoff/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-07T01:03:53Z","updated_at":"2015-08-07T12:20:25Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/dobtco/dvl-core/pulls/143","html_url":"https://github.com/dobtco/dvl-core/pull/143","diff_url":"https://github.com/dobtco/dvl-core/pull/143.diff","patch_url":"https://github.com/dobtco/dvl-core/pull/143.patch"},"body":"Looking for feedback here. Very simple question, but hard to explain.\r\n\r\nOur 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.)\r\n\r\nThe problem is that the discrepancy between our webfonts and fallbacks is very jarring, so the initial experience would suck. Toggling between two tabs here:\r\n\r\n![before](https://cloud.githubusercontent.com/assets/1328849/9126590/fcf6513e-3c63-11e5-9259-7d1dcca4d9e0.gif)\r\n\r\n-----\r\n\r\nSo, 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](http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/06/letterpress.jpg) in which the type designer can draw each character. The actual height of the character can vary wildly.\r\n\r\nWe can make our fallback fonts match our webfonts by resizing them. It works really well. Here are the results:\r\n\r\n![after](https://cloud.githubusercontent.com/assets/1328849/9126744/55148366-3c66-11e5-8551-e43a948caec5.gif)\r\n\r\n\r\n----\r\n\r\nIn practice, though, when you actually try to use the site, it's not great.\r\n\r\n![fontjump](https://cloud.githubusercontent.com/assets/1328849/9126633/93314884-3c64-11e5-936f-96373ef9320b.gif)\r\n\r\n----\r\n\r\nHere'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.\r\n\r\nHow might we mitigate this?\r\n\r\nBrainstorming: 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."},"comment":{"url":"https://api.github.com/repos/dobtco/dvl-core/issues/comments/128686365","html_url":"https://github.com/dobtco/dvl-core/pull/143#issuecomment-128686365","issue_url":"https://api.github.com/repos/dobtco/dvl-core/issues/143","id":128686365,"user":{"login":"ajb","id":1270317,"avatar_url":"https://avatars.githubusercontent.com/u/1270317?v=3","gravatar_id":"","url":"https://api.github.com/users/ajb","html_url":"https://github.com/ajb","followers_url":"https://api.github.com/users/ajb/followers","following_url":"https://api.github.com/users/ajb/following{/other_user}","gists_url":"https://api.github.com/users/ajb/gists{/gist_id}","starred_url":"https://api.github.com/users/ajb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ajb/subscriptions","organizations_url":"https://api.github.com/users/ajb/orgs","repos_url":"https://api.github.com/users/ajb/repos","events_url":"https://api.github.com/users/ajb/events{/privacy}","received_events_url":"https://api.github.com/users/ajb/received_events","type":"User","site_admin":false},"created_at":"2015-08-07T12:20:25Z","updated_at":"2015-08-07T12:20:25Z","body":"This seems like unnecessarily complexity and over-optimization. I don't really get it."}}