It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
I hope you read that title out loud in your best Seinfeld impression.
A recent question in our forums made me aware that there are more properties that can be added to @font-face than the usual font-family and src suspects. What are the point of those? Why would you want to declare other font declarations there?… Read article
From www.zachleat.com
Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:
...instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.
Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will … Read article
From blog.typekit.com
Typekit has updated the WebFont Loader project with support for the new CSS font loading API:
… Read articleBefore the introduction of the native API, we detected font loading by inserting test elements in the page. These elements were regularly polled for width to see if the font had loaded. This process is very expensive because it triggers a page wide style reflow each time the elements are checked. Using the native API, we can bypass this process completely, which results
From practice.typekit.com
Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps, but other tools such as kerning or contextual alternates can often have a big impact on the overall reading experience:
… Read articleMore than fancy swashes and superfluous ligatures, OpenType features are font superpowers. The best, most capable typefaces are full of sophisticated reasoning and delightful surprises
A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in place. This idea is slightly at-odds with the responsive web that we know and love, where text is fluid and wrappable and whatnot. Yet, the design possibilities of lockups are very appealing. I think we can hang onto what makes them awesome while still holding onto what makes the web awesome.… Read article
Nick Sherman gave a fascinating talk at Ampersand earlier this month which was based on an article he wrote called Variable Fonts for Responsive Design. In both the talk and the essay he suggests that we need a new font format to solve complex responsive design problems:
… Read article…the glyph shapes in modern fonts are restricted to a single, static configuration. Any variation in weight, width, stroke contrast, etc.—no matter how subtle—requires separate font files. This concept may not seem
Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have been downloaded. Many designers and developers argued that the default font loading method called the “Flash of Unstyled Text”, or FOUT, was an annoyance to users. This is when the fallback web font, say Georgia, is shown on screen first then replaced by a custom font when it loaded. They argued that it … Read article
From codepen.io
Joe Richardson shared this little trick over on CodePen:
body {
/* operating system font */
font: caption;
}
- If you're on Ubuntu this will be the Ubuntu Font.
- If you're on Yosemite this will be Helvetica.
- If you're on El Capitan this will be San Francisco.
- If you're on Microsoft this will be Segoe UI.
Not entirely sure the support of this, but if it works for your needs it's a lot easier than declaring them directly or … Read article
From viget.com
Chris Manning takes us through the weird journey that is custom fonts on the web. We started with the "Flash of Unstyled Text", which at first we didn't like because it was abrupt and felt janky and could even cause reflow, which didn't help readers focus. Browsers reacted, and started hiding text until the custom font was ready (various implementations did it differently). "Flash of Invisible Text" as it were. Times have changed such that FOUT is now preferable again, … Read article
From furbo.org
A post by Craig Hockenberry that details how to use the San Francisco system font for your website if you're running El Capitan.
I especially like Craig's suggestion for a new syntax when using any operating system's font, so for example in iOS that would probably be San Francisco or Helvetica Neue whilst in Android it would be Roboto. He suggests that we declare a system keyword in the font-family rule (although this won't work in any browsers today):
body I'm not sure what the exact use case was, but Sam Stephenson recently asked me:
@chriscoyier What's the best way to reference the OS X system font in CSS (to get Lucida Grande or Helvetica, as appropriate)?
— Sam Stephenson (@sstephenson) November 20, 2014
… Read article
Me, for the last year or so: "rem's are so cool! I'm gonna size everything with them, that way I can adjust the font-size on the root element and everything will scale with it!" It was a nice dream. And it wasn't a disaster. … Read article
The issue is 1) custom fonts are awesome and we want to use them 2) custom fonts slow down our pages by being large additional resources. Dealing with this has been in the air recently so I thought I'd round up some of the ideas and add thoughts of my own. … Read article
A reader writes in:
… Read articleWould it be possible to draw an entire typeface in CSS to be sent in emails? Our company needs to send out emails to about 20k people to introduce a new brand that we are launching. The emails will be in HTML/CSS. My CEO is very specific about the type of aesthetic he wants to achieve, and this includes using a typeface that is not native to either Mac or Windows computers. We do not want
From www.fontspring.com
I bet a lot of you are using @font-face in your designs. It's probably worth updating to this new syntax, which deals with IE9 and Android better than previous popular methods.… Read article
I have to admit I don't have my head fully wrapped around this whole font-embedding controversy. At it's root, it comes from us web designers being frustrated by the lack of options font options for our web pages. We want more, the "core 10" are just too limiting. Ideally, we'd like to use any font we want without resorting to alternative methods like sIFR, FLIR, or simply just using images.… Read article