{"id":21388,"date":"2019-08-16T08:49:39","date_gmt":"2019-08-16T08:49:39","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=21388"},"modified":"2019-08-16T08:49:39","modified_gmt":"2019-08-16T08:49:39","slug":"better-web-typography-a-guide-to-variable-fonts","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/","title":{"rendered":"Better web typography: A guide to variable fonts"},"content":{"rendered":"<p>It\u2019s now been 10 years since Typekit launched, finally bringing the ability to use real fonts on the web. Since then many other services have come along, and the availability and quality of web fonts has continued to grow. But no matter how important typography is to brand voice, general readability of text, and overall user experience \u2014 there has been a constant tension between the quest for better typography and the pressures of performance, limiting the number of font files we can use on a given site for fear of slowing down the page loading process. This is a legitimate concern, since after all there <em>is<\/em> no user experience if the content doesn\u2019t show up! But we\u2019ve been forced to trade our typographic \u2018vocal range\u2019 for page speed, and that has limited design across the entire web.<\/p>\n<h2>From many to one<\/h2>\n<blockquote><p><em>A variable font is a single font that acts as many.<\/em><\/p>\n<p><em>\u2014 John Hudson<\/em><\/p><\/blockquote>\n<p>The advent of variable fonts changes the entire equation. <a href=\"https:\/\/medium.com\/variable-fonts\/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369\">As described by John Hudson<\/a>, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file. Even more, the format itself is completely extensible: the type designer has complete control over what variation axes are used, their ranges, and even the definition of entirely new axes.<\/p>\n<p>There are currently five \u201cregistered\u201d axes (width, weight, slant, italics, and optical sizing), but the designer can vary any axis they choose. Some examples include the height of ascenders and descenders (shown in the following figure), text grade, and even serif shape. The possibilities are nearly limitless. By removing the performance barrier, we open the door for more interesting and dynamic design and far greater ability to express the true voice of the brand. All this while maintaining fidelity to the typeface itself: Only axes exposed by the type designer can be varied. No artificial distortion is allowed.<\/p>\n<div id=\"attachment_21392\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-21392\" class=\"wp-image-21392 size-full\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/rhododendron-font.jpg\" alt=\"Headline examples showing how variable ascenders and descenders can help accentuate the text or avoid collisions between lines of text by making them taller or shorter\" width=\"700\" height=\"134\" \/><p id=\"caption-attachment-21392\" class=\"wp-caption-text\">Rhododendron, from David Jonathan Ross\u2019 FontOfTheMonth.club, showcasing axes for ascenders and descenders<\/p><\/div>\n<p>What\u2019s really great about how they have been implemented for the web is that they tie into existing CSS attributes seamlessly, and can be tucked inside a CSS Feature Detection block, so they only get pulled in by browsers that can understand them. As of today, every major shipping browser can indeed display them. The notable exception on desktop is IE 11, but the <code>@supports<\/code> technique works just fine, so there\u2019s no harm in putting them in production today.<\/p>\n<p>The most frequent axes will likely be weight and width, which use the existing attributes of <code>font-weight: [1-1000];<\/code> and <code>font-stretch: [number]%;<\/code> \u2014 and usually either slant or italic. Both of those use <code>font-style<\/code> but the syntax differs between them slightly: either <code>font-style: italic;<\/code> or <code>font-style: oblique [number]deg;<\/code> (indicating the number of degrees of slant). Each of the number ranges is up to the type designer, though the goal is to have a general standard of 400 for <code>normal<\/code> weight, 100% for <code>normal<\/code> width, and a value for slant that is generally between 1 and 20.<\/p>\n<p>Here\u2019s an example showing the weight axis in <a href=\"https:\/\/github.com\/IBM\/plex\/tree\/master\/IBM-Plex-Sans-Variable\">Plex Sans Variable<\/a>, from IBM and Bold Monday:<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"css,result\" data-user=\"jpamental\" data-slug-hash=\"JqPqgL\" data-pen-title=\"Variable Font Demo: Weight\">See the Pen <a href=\"https:\/\/codepen.io\/jpamental\/pen\/JqPqgL\/\"><br \/>\nVariable Font Demo: Weight<\/a> by Jason Pamental (<a href=\"https:\/\/codepen.io\/jpamental\">@jpamental<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Move the slider left and right to see the range from thin to heavy. You can also explore other CodePen examples highlighting <a href=\"https:\/\/codepen.io\/jpamental\/pen\/vwBwaz\">width<\/a>, <a href=\"https:\/\/codepen.io\/jpamental\/pen\/eaOwYR\">slant<\/a>, and <a href=\"https:\/\/codepen.io\/jpamental\/pen\/Rmbzpz\">italic<\/a> axes. Or play around with fonts showcasing <a href=\"https:\/\/codepen.io\/jpamental\/pen\/BeKOpM\">separate italic and slant axes<\/a>, and <a href=\"https:\/\/codepen.io\/jpamental\/pen\/mYPKvP\">ascender\/descender heights<\/a>.<\/p>\n<h2>Web design, reinvented<\/h2>\n<p>While the technology is still maturing and type designers are working to become more fluent in this new way of working, the promise for design on the web is nothing short of revolutionary. The typical scenario has been to constrain any given web design to three- to five different fonts to represent every aspect of a site\u2019s design language and voice \u2014 including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to use different weights for every level of heading, thus greatly increasing their clarity and readability. This is how graphic designers have worked with type for decades, and it can make a huge difference in legibility at different font sizes.<\/p>\n<p>One could also use slightly narrower character widths for headings or on data-dense displays of information. In fact, the entire typographic system could be designed to be proportional: Weight and width could become multipliers on the standard body copy settings. Doing so would allow these aspects to scale easily along with the body copy, should its settings change based on screen size or user preference. All of the above comes with an accompanying increase in performance due to fewer HTTP requests (fewer font files) and overall savings of data to download (though this will vary by font and compression used).<\/p>\n<div id=\"attachment_21395\" style=\"width: 660px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-21395\" class=\"wp-image-21395\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/weights-and-italics-single-file.png\" alt=\"Image showing example text in a range of weights and italics, all contained in a single file for FF Meta\" width=\"650\" height=\"964\" \/><p id=\"caption-attachment-21395\" class=\"wp-caption-text\">Example text showing the range of weights and italics all contained in a single file for FF Meta<\/p><\/div>\n<p>In a project I worked on for Monotype to showcase their first variable font release (FF Meta), the difference was truly striking. Nine different weights of both Roman and Italic versions of the typeface resulted in 18 files \u2014 a total of more than 288k of font data \u2014 all of which was replaced by a single file of only 84k (as illustrated above, with several different weights and italics). While this is not necessarily representative of every situation, it\u2019s not uncommon either. <a href=\"https:\/\/rwt.io\/\">My own site<\/a>, for instance, uses a variety of weights, optical sizes, and widths of Roslindale, from David Jonathan Ross\u2019 \u201c<a href=\"https:\/\/fontofthemonth.club\/\">Font of the Month Club<\/a>\u201d, and does so with a single 62k file.<\/p>\n<p>Still, while these freedoms allow us to be more expressive, some of the truly interesting capabilities will help transform the reading experience itself.<\/p>\n<div id=\"attachment_21398\" style=\"width: 660px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-21398\" class=\"wp-image-21398\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/roslindale-weights-and-sizes.png\" alt=\"Screenshot from my site showing a range of weights and optical sizes of Roslindale\" width=\"650\" height=\"329\" \/><p id=\"caption-attachment-21398\" class=\"wp-caption-text\">Example showing a range of different weights and optical sizes of Roslindale. Note how, as the text becomes larger, it gets narrower, and the contrast between thick and thin parts of the letters becomes more prominent<\/p><\/div>\n<h2>Reinvented reading on screen<\/h2>\n<p>Some of the biggest challenges in creating a good reading experience are tied to the lack of finesse in proportion and fine details. The combination of modern CSS and OpenType features and variations presents a powerful combination. Being able to set features like ligatures and hyphenation based on language, turning hyphenation on and off based on screen size, and even tailoring the character width on the smallest screens in order to fit more characters per line without reducing font size, can all make dramatic improvements in the smoothness and comfort of the reading experience.<\/p>\n<p>The possibilities don\u2019t end here either. Putting more control in the hands of the reader is not only possible, but also entails more functions than one might expect. Giving easy access to adjusting font size, text grade (think \u201chigher contrast between foreground text and background colour\u201d without reflowing the copy), and even potentially serif or terminal shape, could all open up a world of improvements for accessibility in general, particularly for\u00a0 users with low vision or some forms of dyslexia.<\/p>\n<h2>Ready for a close-up<\/h2>\n<div id=\"attachment_21400\" style=\"width: 660px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-21400\" class=\"wp-image-21400\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/garamond-stroke-weight-18thc.png\" alt=\"Image showing the difference in physical stroke weight between 6pt and 72pt Garamond from the early 18th century\" width=\"650\" height=\"315\" \/><p id=\"caption-attachment-21400\" class=\"wp-caption-text\">An 18th century cut of Garamond in optical sizes. The first image is at 6pt size, the second is at 72. Note the difference in stroke contrast \u2014 it\u2019s much more refined in the larger size<\/p><\/div>\n<p>Optical sizing is another feature that was common in metal type, but was largely lost in the transition to photo-typesetting and digital techniques. More specifically, despite the fact that some designers still create separate optical sizes for different ranges, it\u2019s rare and somewhat limited. While not commonly found on sans-serif designs, in past decades (or, more accurately, centuries) it was quite common for the physically smaller sizes of a typeface to be cut with slightly heavier strokes, more open bowls and counters, and \u2014 in some cases \u2014 even wider apertures, in order to preserve readability. Newspapers in particular found this critical to ensure lines did not get lost or letters did not suffer too greatly from ink gain.<\/p>\n<p>Optical sizing has made a return in variable fonts, and can be either automatically applied where available, or set explicitly by the web designer or developer. As mentioned, while it\u2019s not as frequent a feature in sans-serif typefaces, it can be used to quite dramatic effect in higher stroke-contrast serif designs. It can make an enormous difference in readability at physically smaller text sizes, to say nothing of how much more refined the type can look at larger ones.<\/p>\n<p>Here\u2019s an example of <a href=\"https:\/\/github.com\/TypeNetwork\/Amstelvar\">Amstelvar<\/a> showcasing the use of optical sizing:<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"css,result\" data-user=\"jpamental\" data-slug-hash=\"WqpxgJ\" data-pen-title=\"Variable Fonts Optical Size Demo with Amstelvar (only opsz)\">See the Pen <a href=\"https:\/\/codepen.io\/jpamental\/pen\/WqpxgJ\/\"><br \/>\nVariable Fonts Optical Size Demo with Amstelvar (only opsz)<\/a> by Jason Pamental (<a href=\"https:\/\/codepen.io\/jpamental\">@jpamental<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>The example on the left shows the lack thereof, while on the right it\u2019s adjusted to match the type size. Notice the differences in stroke thickness, particularly in the headings.<\/p>\n<h2>Polish and poise<\/h2>\n<p>With the benefits already discussed, the case for variable fonts is pretty compelling. Still, good typography is not all there is to great design. The range of axes like width and weight give us tremendous freedom to embrace a more editorial design on the web without having to load an exorbitant number of file assets. With the above-discussed variable fonts in place, we have the opportunity to expose them for use by content publishers. Imagine a role for designers inside the Content Management System (CMS) where the website is housed. Through the use of simple controls built into the CMS, the designer would be able to typeset specific headlines or pull-quotes, thus enabling a whole new level of design inspired by what we have been able to do in print, without having to write custom code every time.<\/p>\n<h2>A whole new type of web<\/h2>\n<p>As mentioned earlier, since September 2018 all the major web browsers support variable fonts. Both dominant mobile platforms support them as well (you can check support on <a href=\"https:\/\/caniuse.com\/#search=variable%20fonts\">caniuse.com<\/a>). Given that you can use CSS feature detection with them already, nothing is standing in the way of putting them into production today. There are lots more resources available to help, too.<\/p>\n<p>Check out the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Fonts\/Variable_Fonts_Guide\">Variable Fonts Guide<\/a> I wrote for MDN, the web typography tips from <a href=\"https:\/\/rwt.io\/newsletter\">my weekly email newsletter<\/a>, and <a href=\"https:\/\/variablefonts.dev\/\">a new site from Australian developer and speaker Mandy Michael<\/a>. You can also find loads of variable fonts themselves on <a href=\"https:\/\/v-fonts.com\/\">v-fonts.com<\/a> and have a play with them in the browser at <a href=\"https:\/\/www.axis-praxis.org\/\">axis-praxis.org<\/a> and <a href=\"http:\/\/play.typedetail.com\/\">play.typedetail.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Looking to ensure the best possible website performance while using a range of fonts, weights and sizes? Variable fonts are the answer.<\/p>\n","protected":false},"author":2,"featured_media":21407,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-21388","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Better web typography: A guide to variable fonts - Heart Internet<\/title>\n<meta name=\"description\" content=\"Better web typography: A guide to variable fonts - Written by the team at Heart Internet.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Better web typography: A guide to variable fonts - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Better web typography: A guide to variable fonts - Written by the team at Heart Internet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-16T08:49:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"Better web typography: A guide to variable fonts\",\"datePublished\":\"2019-08-16T08:49:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\"},\"wordCount\":1767,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\",\"name\":\"Better web typography: A guide to variable fonts - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg\",\"datePublished\":\"2019-08-16T08:49:39+00:00\",\"description\":\"Better web typography: A guide to variable fonts - Written by the team at Heart Internet.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg\",\"width\":1100,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Better web typography: A guide to variable fonts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Better web typography: A guide to variable fonts - Heart Internet","description":"Better web typography: A guide to variable fonts - Written by the team at Heart Internet.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/","og_locale":"en_GB","og_type":"article","og_title":"Better web typography: A guide to variable fonts - Heart Internet","og_description":"Better web typography: A guide to variable fonts - Written by the team at Heart Internet.","og_url":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2019-08-16T08:49:39+00:00","og_image":[{"width":1100,"height":730,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"Better web typography: A guide to variable fonts","datePublished":"2019-08-16T08:49:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/"},"wordCount":1767,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/","url":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/","name":"Better web typography: A guide to variable fonts - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg","datePublished":"2019-08-16T08:49:39+00:00","description":"Better web typography: A guide to variable fonts - Written by the team at Heart Internet.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/typeset.jpg","width":1100,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Better web typography: A guide to variable fonts"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=21388"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/21407"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=21388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=21388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=21388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}