Friday Frontend: The Future of Fonts Edition
This week’s Friday Frontend comes with an extra serving of typography goodness. Much of the innovation happening here is still in the early stages, but from the
font-display property to variable fonts, the future of typography on the web is SUPER EXCITING.
There’s also some great CSS tutorials, React and Vue goodness, a back-to-basics JS and CSS article, and much more. Enjoy!
KBall from ZenDev
CSS & SCSS
Dive into a super cool new CSS property to allow control over how typography displays while font files are still loading. Sure it’s not available on many browsers yet, but imagine what this will do for our ability to use custom fonts reliably. I’m excited!
Excellent article by Rachel Andrew (in my head I think of her as “the goddess of grid”, she probably knows more about CSS Grid than anyone in the world), this goes through many of the conceptual jumps and differences in thinking in CSS Grid as compared to all other web layout techniques previously.
Chris Coyier (of CSS Tricks & Codepen) recorded a screencast of his talk about 4 awesome CSS properties. I was lucky enough to see this talk live at Web Unleashed, it’s well worth the time it takes to watch it, it will both expand your sense of possibilities of CSS, and bring you back to the good old days with some great They Might Be Giants references. :D
A nice, whimsical walkthrough of how to translate an illustrator design of a face into pure HTML and CSS.
An excellent quick read of all the new goodies in the latest version of React. As an HTML structure nerd I’m particularly excited by the ability to render arrays of elements without a wrapper!
An excellent guide to many of the key decisions to get your team on the same page for a React application. And if you’re new to React, this is also a great walkthrough of topics to learn about to get a good grasp on React.
The concept of slots is key to elegantly creating reusable, customizable components for content in Vue. Scoped slots let you take those components to the next level, passing data back up from the child to the parent for use in templates, letting you create components at a higher level of abstraction.
Great hands-on walkthrough to get you started using WebVR quickly, with minimal prior knowledge required.
I fell in love with the idea of variable fonts after attending a talk about them at Web Unleashed - these things have the potential to radically shake up our ability to use fonts on the web, letting us realize incredible variation without the performance cost of including a dozen fonts. Definitely check them out!
An excellent visual walkthrough of typography that will help you wrap your head around to make, as the article says, “a beautiful group of letters, not a group of beautiful letters”.
A great, thorough walkthrough of the various techniques at your disposal to create responsive images for your site or application.
In our lead off article we talked about how the
font-display property will enable us to control font loading in the future - here’s a great in-depth walkthrough of how eBay handles this today to ship custom fonts without a FOUT (flash of unstyled text) or FOIT (flash of invisible text).