About “Caring about OpenType features”

  1. OpenType features need to be present to work. (Surprise!) Figuring out which features are in which fonts is a hassle. Thanks to Gregor Kaplan for lots of work earlier this year to expose feature tags in the Typekit kit editor and make OpenType features available in any subset.
  2. Using OpenType features in CSS, and getting the syntax right, is complicated at the moment. I had to understand that and write about it somewhere so I could leave those technical details out of this lesson. Thanks to Liz Galle, Jake, Sally, and Bram for working with me on that help documentation.
  3. Not all browsers support all OpenType features. Even if a browser “supports” the CSS font-feature-settings property, it may not support all values. Thanks to Bram for making The State of Web Type. That information needed to exist for this lesson to happen.
  4. We designed the UI for toggling these features on and off. That was fun. Consider this a first iteration. I hope this contributes to our industry’s discussion about designing better OpenType feature user interfaces. Thanks to Jake for designing this with me (and for the SVG magic — look at that little rotating gear!). Thanks to Ivan Bettger, Christopher Slye, and Paul Hunt for their critical eyes.
  5. Developing this myself, in spaghetti JavaScript, would have been a nightmare. Thanks to Brent Getlin and Matthew Rechs for bringing in Wenting. Thanks to Wen and Matt for implementing a nice, clean code framework for Practice lesson examples. Thanks to Bram for continually working to optimize the site.
  6. Knowing that OpenType features are actually working in a reader’s browser is really important when you’re trying to explain what features are and why they matter. Thanks to Bram and Miguel Sousa for working on a new JavaScript library called “TryOpenType” (we’re hoping to open source this). It gauges browser support, like The State of Web Type, to help us respond in cases where OpenType features don’t work. View the lesson in Safari to see what I mean.
  7. This Practice lesson introduces a new “Send to CodePen” button. However you decide to manipulate the examples, you can pick up where you leave off over at CodePen. Thanks to Bram for making this work, and thanks to the CodePen team for this great feature.

--

--

Designer, author, speaker, and maker of tools. • tbrown.org

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tim Brown

Tim Brown

Designer, author, speaker, and maker of tools. • tbrown.org