Our Guide To

OpenType Variable Fonts

Variable Fonts open up new possibilities for typography on the web, from granular control over styling to optimizations that make for super speedy and selective loading. This guide provides an overview of the concept along with relevant CSS properties and best practices that will help you wrangle custom fonts like a boss.

A New Responsive Font Format for the Web

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: …the glyph shapes in modern fonts are restricted […]

One File, Many Options: Using Variable Fonts on the Web

In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it’s unsurprising that all browsers are on-board and racing ahead with implementation. Related Posts …powered by Jetpack! The Jetpack WordPress […]

Three Techniques for Performant Custom Font Usage

There’s a lot of good news in the world of web fonts! The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so. Preload and font-display are landing in Safari and Firefox. Variable fonts are shipping everywhere. Using custom fonts in a performant way is becoming far easier. Let’s […]

font-feature-settings

This property gives us control over advanced typographic settings such as small caps, ligatures, and swashes. To activate them you must declare which value you need in quotes and then followed by either 1 or on to enable. Alternatively, you can disable them with either 0 or off: .element { /* these two values do […]

font-variant

The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3. p:first-line { font-variant: small-caps; /* default is `normal` */ } Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps. A value of small-caps will render […]

font-variant-numeric

The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. Related Posts …powered by Jetpack! The Jetpack WordPress plugin runs on this site, powering not just the related posts below, but security and backups, […]

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag