Using custom fonts is getting increasingly easier. We’ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files.
#
By
Geoff Graham
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.
#
By
Robin Rendle
Over on the Typekit Blog, Tim Brown has written about an exciting development in the world of web fonts: an improvement to the OpenType font file specification.
This might not sound all that exciting at first, but “variable fonts” allows designers and developers to embed a single font file into a webpage and then interpolate the various widths and weights we need from a single file. That means smaller files, fewer requests, and more flexibility for designers. However, this format isn’t available to use in browsers yet. Instead, it shows that there’s a dedicated effort from Google, Microsoft, Apple and Adobe moving forward:
Imagine condensing or extending glyph widths ever so slightly, to accommodate narrow and wide viewports. Imagine raising your favorite font’s x-height just a touch at small sizes. Imagine sharpening or rounding your brand typeface in ways its type designer intended, for the purposes of art direction. Imagine shortening descenders imperceptibly so that headings can be set nice and tight without letters crashing into one another. Imagine this all happening live on the web, as a natural part of responsive design.
If you’re interested in learning more, we wrote about the call for a responsive font format which explains why it’s going to be so darn helpful in the future. John Hudson also wrote a long overview of the whole story, and the spec is here.