{"id":245539,"date":"2016-09-18T12:59:33","date_gmt":"2016-09-18T19:59:33","guid":{"rendered":"http:\/\/css-tricks.com\/?p=245539"},"modified":"2016-09-19T05:16:48","modified_gmt":"2016-09-19T12:16:48","slug":"opentype-variations-fonts","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/opentype-variations-fonts\/","title":{"rendered":"\u201cOpenType Variations Fonts\u201d"},"content":{"rendered":"

Over on the Typekit Blog<\/a>, Tim Brown has written about an exciting development in the world of web fonts: an improvement to the OpenType font file specification.<\/p>\n

This might not sound all that exciting at first, but \u201cvariable fonts\u201d 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\u2019t available to use in browsers yet. Instead, it shows that there\u2019s a dedicated effort from Google, Microsoft, Apple and Adobe moving forward:<\/p>\n

Imagine condensing or extending glyph widths ever so slightly, to accommodate narrow and wide viewports. Imagine raising your favorite font\u2019s 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.<\/p><\/blockquote>\n

If you\u2019re interested in learning more, we wrote about the call for a responsive font format<\/a> which explains why it\u2019s going to be so darn helpful in the future. John Hudson also wrote a long overview<\/a> of the whole story, and the spec is here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 \u201cvariable fonts\u201d allows designers and developers to embed a single font file into a webpage and then interpolate […]<\/p>\n","protected":false},"author":223806,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[855,587],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":248261,"url":"https:\/\/css-tricks.com\/experimenting-color-fonts\/","url_meta":{"origin":245539,"position":0},"title":"Experimenting with Color Fonts","date":"November 29, 2016","format":false,"excerpt":"Over the past couple of weeks there\u2019s been a lot of excitement over color fonts. Adobe describes the technology like this: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":248009,"url":"https:\/\/css-tricks.com\/color-fonts\/","url_meta":{"origin":245539,"position":1},"title":"Color Fonts","date":"November 19, 2016","format":false,"excerpt":"Adobe explaining: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":365677,"url":"https:\/\/css-tricks.com\/colrv1-and-css-font-palette-web-typography\/","url_meta":{"origin":245539,"position":2},"title":"COLRv1 and CSS font-palette: Web Typography Gets Colorful","date":"May 11, 2022","format":false,"excerpt":"According to Toshi Omagari, the author of Arcade Game Typography, the world\u2019s first multi-colored digital font was created in 1982 for a never-released video game called Insector. Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the web, even though the COLR font format has had full cross-browser\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266653,"url":"https:\/\/css-tricks.com\/understanding-web-fonts-getting\/","url_meta":{"origin":245539,"position":3},"title":"Understanding Web Fonts and Getting the Most Out of Them","date":"February 23, 2018","format":false,"excerpt":"Using custom fonts is getting increasingly easier. We\u2019ll 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.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/features-explainer.gif?fit=1200%2C750&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":235714,"url":"https:\/\/css-tricks.com\/caring-about-opentype-features\/","url_meta":{"origin":245539,"position":4},"title":"Caring about OpenType features","date":"December 9, 2015","format":false,"excerpt":"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\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":298821,"url":"https:\/\/css-tricks.com\/variations-on-theme-reinventing-type-on-the-web\/","url_meta":{"origin":245539,"position":5},"title":"Variations on Theme: Reinventing Type on the Web","date":"November 20, 2019","format":false,"excerpt":"If anyone knows anything about me, it\u2019s usually one of two things: that I have two outrageously fluffy dogs, or that I like fonts and typography. Like, really really like them. So while I am super excited about how well Tristan is doing with his hydrotherapy \u2014we\u2019re walking 50% further\u2026","rel":"","context":"In "2019 End-of-Year Thoughts"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245539"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=245539"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245539\/revisions"}],"predecessor-version":[{"id":245695,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245539\/revisions\/245695"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=245539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=245539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=245539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}