# data[].attributes.attachment_link.title
Personalized Reading Formats Make Better Readers

# data[].attributes.body
team@thereadabilityconsortium.org

# data[].attributes.body
How can we avoid homogenous experiences when people use readable, personal solutions? Hard to get brands on board if their efforts to differentiate get completely wiped out by someone's preferences ... what does it look like to meet in the middle?

# data[].attributes.body
https://twitter.com/ianhamilton_

Accessibility specialist, helping studios avoid excluding disabled gamers.

# data[].attributes.headline
How to Support The Readability Consortium

# data[].attributes.subject
How to Support The Readability Consortium

# data[].attributes.body
1) Bring the message of readability to your group and company. 2) Seek partners and reach out to have a conversation about readability. 3) Find individuals interested in jump-starting pieces of the ecosystem and investing.

# data[].attributes.headline
Tianyuan Cai Adobe Research Update Subscription 

# data[].attributes.subject
Tianyuan Cai Adobe Research Update Subscription 

# data[].attributes.body
https://docs.google.com/forms/d/e/1FAIpQLSfJ0zxj9rmY8XZVZZ2Oncexqo7V8VkSWXU9u_DSf_9mMNgj-Q/viewform

# data[].attributes.body
Readability Consortium Forms at UCF to Push Reading Research Boundaries | University of Central Florida News

# data[].attributes.attachment_link.provider_name
University of Central Florida News | UCF Today

# data[].attributes.attachment_link.readable_text
The one-size-fits-all approach may work in some situations, but not with reading, according to research out of the University of Central Florida. Beyond the familiar problem of text that is too small for older eyes, researchers have shown that everyone sees the written word differently and that individual text formatting changes can make big differences in reading for work and school.

That's why UCF, Adobe, Readability Matters and Google are collaborating on a new effort to personalize digital reading with the goal of improving people's digital reading proficiency and comprehension.

The collaboration, known as The Readability Consortium, was officially announced today.

Using its members' expertise in machine intelligence, psychology, and vision science, the consortium aims to develop individual reading "prescriptions" for people, which would be contained in profiles that can be distributed across any and all digital reading surfaces.

"We can build you a format to boost your speed and understanding while reading," says Readability Consortium Director Ben D. Sawyer '14MS '15PhD, an assistant professor in UCF's Department of Industrial Engineering and Management Systems.

"We want to link it to your digital reading surfaces as a digital token," he says. "It's like digital eyeglasses for your information, letting you 'see' better because the information is tailored to you."

The work has wide-ranging implications, from improving scholastic abilities in children to assisting doctors poring through medical records, as well as helping to engage the citizenry.

The U.S. Department of Education reports that more than half of U.S. adults perform at the lower levels of literacy, and only one-third of fourth grade students in the U.S. are reading proficiently, making no improvements by eighth grade, according to the National Assessment of Educational Progress Report Card.

Additionally, the United Nations reports that the COVID-19 pandemic has set back educational gains further, with an additional 101 million, or 9%, of children in grades 1 to 8 falling below minimum reading proficiency levels in 2020, with the problem likely not getting better in 2021 and 2022.

The consortium hopes to help reverse these trends, and already the results have been promising, Sawyer says.

"Early studies have shown that individuation of text formatting can accelerate some adults' reading by more than 25%," he says.

And in one study, changing the font cut reading times in half, meaning a massive tome such as Tolstoy's War and Peace could be read in 18 hours rather than about 36, Sawyer says.

Key to these successes is adjusting typography to a person's optimal format.

"This idea of individuating text, matching to the individual the way that we do clothing or eyeglasses, is very new," Sawyer says. "And the gains from it are significant."

To help find a person's reading prescription, researchers are using the Virtual Readability Lab, an online reading test, but they hope to one day make the process automatic, using eye tracking technology and artificial intelligence.

"Ideally, your machine would watch you as you read," Sawyer says. "And it would adjust the text in real time."

Facilitating this process is the ability to change previously fixed digital text, an option available on software such as Adobe Acrobat Reader mobile app through its AI-driven Liquid Mode. The process puts control of the reading format in the readers' hands, allowing them to adjust aspects like font size and character spacing, thereby undoing fixed formatting constraints chosen by a designer.

"Adobe is proud to be a founding member of The Readability Consortium," says Rick Treitman, entrepreneur-in-residence at Adobe. "We're focused on how our technology can transform the world and contribute to society."

Treitman says the purpose of the consortium is to find answers, develop new research techniques, build a data set for reading researchers and inform the creation of new controls for digital reading.

Zoya Bylinskii, a research scientist at Adobe Research and the driving force behind Adobe's readability research, says the effort is about designing diverse reading experiences.

"What better way to do it than to bring a diverse set of experts to the table?" she says.

Itai Vonshak, head of Google Design Platform, says he is proud that Google is a member of The Readability Consortium because of the urgent need to make reading easier, more accessible and personalized.

"Millions of adults and young people lack basic literacy skills," Vonshak says. "And this is personal for me as I experience a form of dyslexia and my first language is not based on the Latin alphabet. The Readability Consortium is championing new approaches to research and bringing the 'reading science' community together in understanding how to increase reading proficiency and digital inclusion around the world."

The impetus for the project came from consortium member, Readability Matters, a nonprofit formed to promote the use of technology to change reading formats and improve reading outcomes.

"We've been involved with this work since the early 2000s," says Readability Matters co-founder Kathy Crowley. "After hearing struggling children read with greater fluency and expressiveness using small changes to text format, I realized that this could be a game-changer for education. It turns out that personalized reading formats can improve reading effectiveness for both children and adults. Technology can really make a big difference in implementation."

Readability Matters has received support for their work from Adobe, who has partnered with Sawyer's lab to help provide rigorous testing and advancement of the readability research and technology.

Current studies the consortium is undertaking include:

Looking at ways to improve reading proficiency in school children

Ways to help physicians improve their reading under time pressure

Understanding how to improve reading in extreme environments, such as Antarctica and space

Stephanie Day, a research scientist with the consortium, is leading the work with school children, which will start this spring.

"We're going to be looking at how personalized reading formats work for them, how recommendations may change over time and look at how this might impact kids who are struggling readers versus kids who have stronger reading skills," Day says.

Sawyer says he hopes the work will help level the playing field for all types of readers.

"Information overload is a huge part of our daily lives, and our ability to engage with all of that information is increasingly tied to our opportunity in life," he says. "It's important for children who are developing their reading skills and for adults accessing information. There's an advantage to being able to read and assess more information effectively."

The consortium is housed at UCF and administered by the UCF Research Foundation. Members currently include Adobe, Readability Matters, and Google, and they hope to grow their ranks with additional members interested in advancing the research, development, and application of the technology.

Elizabeth Klonoff, vice president for the Office of Research at UCF, says this consortium highlights the caliber of UCF's faculty and the power of collaboration.

"At UCF we look for innovative ways to solve problems and improve lives," she says. "We have the potential to make a big impact on reading comprehension, which is the vehicle for knowledge acquisition. I can't wait to see what the collective effort will deliver."

Sawyer received his doctorate in human factors psychology and master's in industrial engineering from UCF and completed his postdoctoral studies at the Massachusetts Institute of Technology. He joined UCF's Department of Industrial Engineering and Management Systems, part of UCF's College of Engineering and Computer Science, in 2018. He is also director of VRL, a readability focused research laboratory, LabX, an applied neuroscience group addressing human performance, and a joint faculty member of UCF's School of Modeling Simulation and Training.

# data[].attributes.attachment_link.title
Readability Consortium Forms at UCF to Push Reading Research Boundaries | University of Central Florida News

# data[].attributes.attachment_link.description
The one-size-fits-all approach may work in some situations, but not with reading, according to research out of the University of Central Florida. Beyond the familiar problem of text that is too small for older eyes, researchers have shown that everyone sees the written word differently and that individual text formatting changes can make big differences in reading for work and school.

# data[].attributes.headline
UserTesting Profiles The Readability Consortium

# data[].attributes.subject
UserTesting Profiles The Readability Consortium

# data[].attributes.attachment_link.title
The Readability Consortium + UserTesting

# data[].attributes.attachment_link.description
How Adobe, Google, Readability Matters, and the University of Central Florida are creating breakthrough technology that improves reading for everyone

# data[].attributes.attachment_caption
Building Better Reading - Published Papers

# data[].attributes.attachment_caption
Building Better Reading - Published Papers

# data[].attributes.attachment_link.description
Sign up to receive updates on our work on font recommendation and document readability.

# data[].attributes.body
fonts.google.com/knowledge/topics/variable_fonts

design.google/library/variable-fonts-are-here-to-stay

web.dev/variable-fonts

material.io/design/typography/understanding-typography.html#readability

YouTube → “DETI Keynote Dave Crossland: The Use of Variable Fonts in Google's Branding Typography” youtu.be/yJE8wkNif5I

# data[].attributes.body
Download it for free.

# data[].attributes.body
https://readabilitylab.xyz

# data[].attributes.attachment_link.title
Building Better Reading - Agenda - Skoll World Forum 2022

# data[].attributes.attachment_link.title
Building Better Reading - Agenda - Track 3

# data[].attributes.headline
Introduction to variable fonts on the web

# data[].attributes.subject
Introduction to variable fonts on the web

# data[].attributes.attachment_link.readable_text
A new font specification that can significantly reduce font file sizes

In this article, we will look at what variable fonts are, the benefits they offer, and how we can use them in our work. First, let's review how typography works on the web, and what innovations variable fonts bring.

Browser compatibility #

As of May 2020 variable fonts are supported in most browsers. See Can I use variable fonts? and Fallbacks.

Introduction #

The terms font and typeface are often used interchangeably by developers. However there is a difference: A typeface is the underlying visual design that can exist in many different typesetting technologies, and a font is one of these implementations, in a digital file format. In other words, a typeface is what you see, and the font is what you use.

Another concept that is often overlooked is the distinction between a style, and a family. A style is a single and specific typeface, such as Bold Italic, and a family is the complete set of styles.

Before variable fonts, each style was implemented as a separate font file. With variable fonts, all styles can be contained in a single file.

Left: a specimen of the Roboto typeface family. Right: named styles within the family.

Challenges for the designer and developer #

When a designer creates a print project they face some constraints, such as the physical size of the page layout, the number of colors they can use (which is determined by the kind of printing press that will be used), and so on. But they can use as many typeface styles as they like. This means that the typography of print media is often rich and sophisticated, so that the reading experience is truly delightful. Think of the last time you enjoyed browsing an excellent magazine.

Web designers and developers have different constraints than print designers, and an important one is the associated bandwidth costs of our designs. This has been a sticking point for richer typographic experiences, as they come at a cost. With traditional web fonts, each style used in our designs requires users to download a separate font file, which increases latency and page rendering time. Only including the Regular and Bold styles, plus their italic counterparts, can amount to 500 KB or more of font data. This is even before we have dealt with how the fonts are rendered, the fallback patterns we need to use, or undesirable side-effects such as FOIT and FOUT.

Many font families offer a much wider range of styles, from Thin to Black weights, narrow and wide widths, a variety of stylistic details, and even size-specific designs (optimized for large or small text sizes.) Since you'd have to load a new font file for every style (or combinations of styles), many web developers choose not to use these capabilities, reducing the reading experience of their users.

Anatomy of a variable font #

Variable fonts address these challenges, by packing styles into a single file.

This works by starting with a central or 'default' style, usually the 'Regular'-an upright roman design with the most typical weight and width that is most suitable for plain text. This is then connected to other styles in a continuous range, called an 'axis.' The most common axis is Weight, which can connect the default style through to a Bold style. Any individual style can be located along an axis, and is called an 'instance' of the variable font. Some instances are named by the font developer, for example Weight axis location 600 is called SemiBold.

The variable font Roboto Flex has three styles for its Weight axis. The Regular style is at the center, and there are two styles at the opposite ends of the axis, one lighter and the other heavier. Between these, you can choose from 900 instances:

Above: Illustrated anatomy of the Weight axis for the typeface Roboto.

The font developer can offer a set of different axes. You can combine them because they all share the same default styles. Roboto has three styles in a Width axis: the Regular is at the center of the axis, and two styles, narrower and wider, are at each end. These provide all the widths of the Regular style, and combine with the Weight axis to provide all the widths for every weight.
Roboto Flex in random combinations of Width and Weight

This means there are thousands of styles! This may seem like massive overkill, but the quality of the reading experience can be remarkably enhanced by this diversity of type styles. And, if it is without performance penalty, web developers can use a few or as many styles as they wish-it's up to their design.

The way that Italics are handled in variable fonts is interesting, as there are two difference approaches. Typefaces like Helvetica or Roboto have interpolation compatible contours, so their Roman and Italic styles can be interpolated between and the Slant axis can be used to get from Roman to Italic.

Other typefaces (such as Garamond, Baskerville, or Bodoni) have Roman and Italic glyph contours that are not interpolation compatible. For example, the contours that typically define a Roman lowercase "n" do not match the contours used to define an Italic lowercase "n". Instead of interpolating one contour to the other, the Italic axis toggles from Roman to Italic contours.

Amstelvar's "n" contours in Italic (12 point, regular weight, normal width), and in Roman. Image supplied by David Berlow, type designer and typographer at Font Bureau.

After the switch to Italic, the axes available to the user should be the same as those for the Roman, just as the character set should be the same.

A glyph substitution capability can also be seen for individual glyphs, and used anywhere in the design space of a variable font. For example, a dollar sign design with two vertical bars works best at larger point sizes, but at smaller point sizes a design with only one bar is better. When we have fewer pixels for rendering the glyph, a two bar design can become illegible. To combat this, much like the Italic axis, a glyph substitution of one glyph for another can occur along the Optical Size axis at a point decided by the type designer.

In summary, where the contours allow for it, type designers can create fonts that interpolate between various styles in a multi-dimensional design space. This gives you granular control over your typography, and a great deal of power.

Axes definitions #

There are five registered axes, which control known, predictable features of the font: weight, width, optical size, slant and italics. Besides those, a font can contain custom axes. These can control any design aspect of the font the type designer wishes: the size of serifs, the length of swashes, the height of ascenders or the size of the dot on the i.

Even though axes can control the same feature, they might use different values. For example, in the Oswald and Hepta Slab variable fonts there is only one axis available, Weight, but the ranges are different-Oswald has the same range as before it was upgraded to be variable, 200 to 700, but Hepta Slab has an extreme hairline weight at 1 that goes all the up to 900.

The five registered axes have 4-character lowercase tags that are used to set their values in CSS:

Since the font developer defines which axes are available in a variable font, and which values they can have, it is essential to find out what each font offers. The font's documentation should provide this, or you can inspect the font using a tool like Wakamai Fondue.

Use cases and benefits #

Setting the axes values comes down to personal taste and applying typographic best practices. The danger with any new technology is possible misuse, and settings that are overly artistic or exploratory could also decrease legibility of the actual text. For titles, exploring different axes to create great artistic designs are exciting, but for body copy this risks making the text illegible.

Exciting expression #

One great example of artistic expression is shown above, an exploration of the typeface Decovar by Mandy Michael.

You can view the working example and source code for the above sample here.

Typeface Zycon, designed for animation by David Berlow, type designer and typographer at Font Bureau.

There is also a possibility to explore animating characters with variable fonts. Above is an example of different axes being used with the typeface Zycon. See the live animation example on Axis Praxis.

Anicons is the world's first animated color icon font, based on Material Design Icons. Anicons is an experiment that combines two cutting edge font technologies: variable fonts and color fonts.
A few examples of hover animations from Anicon's color icon font

Amstelvar using little bits of XTRA in opposite directions so the words' widths are evened out

Roboto Flex and Amstelvar offer a set of "Parametric Axes." In these axes, the letters are deconstructed into 4 fundamental aspects of form: black or positive shapes, white or negative shapes, and the x and y dimensions. In the same way that primary colors can be blended with any other color to adjust it, these 4 aspects can be used to fine tune any other axis.

The XTRA axis in Amstelvar allows you to adjust the "white" per mille value, as shown above. Using little bits of XTRA in opposite directions, the words' widths are evened out.

Variable fonts in CSS #

Variable fonts are loaded though the same @font-face mechanism as traditional static web fonts, but with two new enhancements:

1. Source Formats: We don't want the browser to download the font if it doesn't support variable fonts, so we add a format description: once in the future format ( woff2 supports variations), once in the current but soon to be deprecated format ( woff2-variations). If the browser supports variable fonts and supports the upcoming syntax, it will use the first declaration. If it supports variable fonts and the current syntax, it will use the second declaration. They both point to the same font file.

2. Style Ranges: You'll notice we're supplying two values for font-weight and font-stretch. Instead of telling the browser which specific weight this font provides (for example font-weight: 500;), we now give it the range of weights supported by the font. For Roboto Flex, the Weight axis ranges from 100 to 1000, and CSS directly maps the axis range to the font-weight style property. By specifying the range in @font-face, any value outside this range will be "capped" to the nearest valid value. The Width axis range is mapped in the same way to the font-stretch property.

If you're using the Google Fonts API, this will all be taken care of. Not only will the CSS contain the proper source formats and ranges, Google Fonts will also send static fallback fonts in case variable fonts aren't supported.

Using weights and widths #

Currently, the axes you can reliably set from CSS are the wght axis through font-weight, and the wdth axis through font-stretch.

Traditionally, you would set font-weight as a keyword ( light, bold) or as a numerical value between 100 and 900, in steps of 100. With variable fonts, you can set any value within the font's Width range:

Roboto Flex' Weight axis being changed from its minimum to its maximum.

Likewise, we can set font-stretch with keywords ( condensed, ultra-expanded) or with percentage values:

Roboto Flex' Width axis being changed from its minimum to its maximum.

Using italics and obliques #

The ital axis is intended for fonts that contain both a regular style, and an italic style. The axis is meant to be an on/off switch: value 0 is off and will show the regular style, value 1 will show the italics. Unlike other axes, there's no transition. A value of 0.5 won't give you "half italics".

The slnt axis is different from italics in that it's not a new style, but just slants the regular style. By default its value is 0, which means the default upright letter shapes. Roboto Flex has a maximum slant of -10 degrees, meaning the letters will lean to the right when going from 0 to -10.

It would be intuitive to set these axis through the font-style property, but as of April 2020, how to exactly do this is still being worked out. So for now, you should treat these as custom axes, and set them through font-variation-settings:

Roboto Flex' Slant axis being changed from its minimum to its maximum.

Using optical sizes #

A typeface can be rendered very small (a 12px footnote) or very large (a 80px headline). Fonts can respond to these size changes by changing its letter shapes to better suit its size. A small size might be better off without fine details, while a large size might benefit from more details and thinner strokes.

The letter 'a' in Roboto Flex at different pixel sizes, then scaled to be the same size, shows the differences in design. Try it yourself on Codepen

A new CSS property has been introduced for this axis: font-optical-sizing. By default it's set to auto, which makes the browser set the axis value based on the font-size. This means the browser will pick the best optical size automatically, but if you wish to turn this off you can set font-optical-sizing to none.

You can also set a custom value for the opsz axis, if you deliberately want an optical size that doesn't match the font size. The following CSS would cause text to be displayed at a large size, but at an optical size as if it were printed in 8pt:

Using custom axes #

Unlike registered axes, custom axes will not be mapped to an existing CSS property, so you will always have to set them through font-variation-settings. Tags for custom axes are always in uppercase, to distinguish them from registered axes.

Roboto Flex offers a few custom axes, and the most important is Grade ( GRAD). A Grade axis is interesting as it changes the weight of the font without changing the widths, so line breaks do not change. By playing with a Grade axis, you can avoid being forced to fiddle with changes to Weight axis that affects the overall width, and then changes to the Width axis that affect the overall weight.
Roboto Flex' Grade axis being changed from its minimum to its maximum.

As GRAD is a custom axis, with a range of -1 to 1, we need to address it with font-variation-settings:

Variable fonts on Google Fonts #

Google Fonts has expanded their catalog with variable fonts, and adding new ones regularly. The interface is currently aimed at picking single instances from the font: you select the variation you want, click "Select this style", and it will be added to the &LTlink> element that fetches the CSS and fonts from Google Fonts.

To use all the available axes, or ranges of values, you will have to manually compose the URL to the Google Fonts API. The variable fonts overview lists all axes and values.

The Google Variable Fonts Links tool can also give you the latest URLs for the full variable fonts.

Font-variation-settings inheritance #

While all registered axes will soon be supported through existing CSS properties, for the time being you might need to rely on font-variation-settings as a fallback. And if your font has custom axes, you'll need font-variation-settings too.

However, here's a little gotcha with font-variation-settings. Every property you don't explicitly set will automatically be reset to its default. Previously set values aren't inherited! This means the following will not work as expected:

First the browser will apply font-variation-settings: 'slnt' 10 from the .slanted class. Then it will apply font-variation-settings: 'GRAD' -1 from the .grade-light class. But this will reset the slnt back to its default of 0! The result will be text in a light grade, but not slanted.

Luckily, we can work around this by using CSS variables:

CSS variables will cascade, so if an element (or one of its parents) will have set the slnt to 10, it will keep that value, even if you set GRAD to something else. See Fixing variable font inheritance for an in-depth explanation of this technique.

Note that animating CSS variables doesn't work (by design), so something like this doesn't work:

These animations will have to happen directly on font-variation-settings.

Performance gains #

OpenType variable fonts allow us to store multiple variations of a type family into a single font file. Monotype ran an experiment by combining 12 input fonts to generate eight weights, across three widths, across both the Italic and Roman styles. Storing 48 individual fonts in a single variable font file meant a 88% reduction in file size.

However, if you are using a single font such as Roboto Regular and nothing else, you might not see a net gain in font size if you were to switch to a variable font with many axes. As always, it depends on your use-case.

On the flip side, animating the font between settings may cause performance issues. Although this will improve once variable font support in browsers gets more mature, the problem can be reduced somewhat by only animating fonts that are currently on screen. This handy snippet by Dinamo pauses animations in elements with the class vf-animation, when they're not on screen:

If your font responds to user interaction, it's a good idea to throttle or debounce input events. This will prevent the browser from rendering instances of the variable font that changed so little from the previous instance the human eye wouldn't see the difference.

If you're using Google Fonts, it's a good idea to preconnect to https://fonts.gstatic.com, the domain where Google's fonts are hosted. This will make sure the browser knows early on where to get the fonts when it comes across them in the CSS:

This tip works for other CDNs as well: the sooner you let the browser set up a network connection, the sooner it can download your fonts.

Find more performance tips for loading Google Fonts in The Fastest Google Fonts.

Fallbacks and browser support #

All modern browsers support variable fonts. In case you need to support older browsers, you can choose to build your site with static fonts, and use variable fonts as progressive enhancement:

For older browsers, text with the class .super-bold will get rendered in the normal bold, as that's the only bold font we have available. When variable fonts are supported, we can actually use the heaviest weight of 1000.

The @supports rule is not supported by Internet Explorer, so this browser would not show any styling. If this is a problem, you could always use one of the oldschool hacks to target relevant older browsers.

If you are using the Google Fonts API, it will take care of loading the proper fonts for your visitor's browsers. Say you request the font Oswald in weight range 200 to 700, like so:

Modern browsers that can handle variable fonts will get the variable font, and will have every weight between 200 and 700 available. Older browsers will get served individual static fonts for every weight. In this case, this means they'll download 6 font files: one for weight 200, one for weight 300, and so on.

This article would have only been made possible with the help of the following people:

Hero image by Bruno Martins on Unsplash.

Last updated: - Improve article

# data[].attributes.attachment_link.title
Introduction to variable fonts on the web

# data[].attributes.attachment_link.description
A new font specification that can significantly reduce font file sizes In this article, we will look at what variable fonts are, the benefits they offer, and how we can use them in our work. First, let's review how typography works on the web, and what innovations variable fonts bring.

# data[].attributes.headline
The Use of Variable Fonts in Google's Branding Typography

# data[].attributes.subject
The Use of Variable Fonts in Google's Branding Typography

# data[].attributes.attachment_link.authors[].name
Hoffmitz Milken Center for Typography [HMCT]

# data[].attributes.attachment_link.title
DETI Keynote—Dave Crossland: “The Use of Variable Fonts in Google's Branding Typography”

# data[].attributes.attachment_link.readable_text
These days, developers use modern CSS to create websites that work consistently well on all browsers. Responsive layouts adapt fluidly and intelligently to tiny mobile screens as well as giant desktop displays, and ever since web fonts arrived in 2010, font choice for browsers is about the same as it is for desktop apps. All good, right?

Well, not quite. Web developers measure every asset, including fonts, for their impact on latency. If the information hierarchy in a layout calls for multiple font weights and styles, developers might make decisions-like using smaller fonts, and fewer fonts-that compromise typography for the sake of page-loading time. Subsetting and the WOFF2 format can help by removing unused glyphs and applying font-specific compression, but limiting the number of web font styles is still a common issue for designers.

Furthermore, if CSS layouts can adjust themselves so fluidly and precisely, why not the fonts too? A tiny bit bolder here, a touch wider there? Many type families today offer 30 or more font styles to help structure information, so it seems reasonable to use them-or even have browsers select the ideal fonts in response to device characteristics or user preferences.

Hello, variable fonts

In late 2016, Microsoft, Apple, Adobe, and Google presented a remarkable solution: OpenType variable fonts.

One variable font file can contain every font in a traditional static font family. This is an immediate win in terms of raw file size, as it compactly packages the entire font family. The more static fonts that are replaced, the more dramatic the savings become-even up to 70% compression for very large font families.

Even better, designers and developers can also access fonts located "in between" those static styles. For example, a variable font that stores regular, bold, and condensed styles can also offer countless options between them. Want to take regular 70% towards bold and 30% towards condensed? No problem!

A full spectrum of stylistic variation

# data[].attributes.attachment_link.title
Variable Fonts Are Here to Stay - Library - Google Design

# data[].attributes.attachment_link.description
These days, developers use modern CSS to create websites that work consistently well on all browsers. Responsive layouts adapt fluidly and intelligently to tiny mobile screens as well as giant desktop displays, and ever since web fonts arrived in 2010, font choice for browsers is about the same as it is for desktop apps.

# data[].attributes.body
fonts.google.com/knowledge/topics/variable_fonts

# data[].attributes.attachment_link.description
Making the web more beautiful, fast, and open through great typography

# data[].attributes.attachment_link.readable_text
"Readability Research: An Interdisciplinary Approach" is now available on arXiv!

"Readability Research: An Interdisciplinary Approach" is now available on arXiv, an archival preprint service. Twenty-eight different authors - from around the world and across many disciplines - collaborated to author a 60+ page intro to Readability research toward the goal of accelerating best practices and methodologies.

The authors welcome your suggestions on this preprint while the paper is in review.

A special thanks to Dr. Zoya Bylinskii for her vision and leadership in producing this collaborative work and to the editorial team, Zoya along with Dr. Ben Sawyer and Dr. Benjamin Wolfe.

The full paper is available here: https://arxiv.org/abs/2107.09615

Readability Research: An Interdisciplinary Approach

Sofie Beier, Sam Berlow, Esat Boucaud, Zoya Bylinskii, Tianyuan Cai, Jenae Cohn, Kathy Crowley, Stephanie L. Day, Tilman Dingler, Jonathan Dobres, Jennifer Healey, Rajiv Jain, Marjorie Jordan, Bernard Kerr, Qisheng Li, Dave B. Miller, Susanne Nobles, Alexandra Papoutsaki, Jing Qian, Tina Rezvanian, Shelley Rodrigo, Ben D. Sawyer, Shannon M. Sheppard, Bram Stein, Rick Treitman, Jen Vanek, Shaun Wallace, Benjamin Wolfe

Readability is on the cusp of a revolution. Fixed text is becoming fluid as a proliferation of digital reading devices rewrite what a document can do. As past constraints make way for more flexible opportunities, there is great need to understand how reading formats can be tuned to the situation and the individual. We aim to provide a firm foundation for readability research, a comprehensive framework for modern, multi-disciplinary readability research. Readability refers to aspects of visual information design which impact information flow from the page to the reader. Readability can be enhanced by changes to the set of typographical characteristics of a text. These aspects can be modified on-demand, instantly improving the ease with which a reader can process and derive meaning from text. We call on a multi-disciplinary research community to take up these challenges to elevate reading outcomes and provide the tools to do so effectively.

Keywords: reading, text, document, information processing, typography

1. Introduction

Readability (Fig. 1) is a growing focus because reading has fundamentally changed (Fig. 2). The amount of reading content available today is more than has ever existed, and it grows at an ever-increasing rate. The pressure to ingest vast quantities of information quickly has never been greater. Additionally, reading content is distributed across highly variable publishing platforms, which has changed what and how we read. The wider commercialization of smartphones, e-books, and lightweight laptops over the last 15 years have diversified where and when we read. Now more than ever, improving the modern reading experience has enormous practical and societal significance.

Modern reading is digital, and this has introduced a fundamental paradigm shift. To date, authors, publishers, and designers have been in control of the reading experience. This is no longer the case as evidenced by the multitude of device types, screen qualities, and software settings available to the reader. Depending on the technologies we use, we - the readers - can gain control over font size, screen polarity, spacing, font choice, and other formatting choices. Amazon's Kindle, Apple's iBooks, Microsoft's Immersive Reader, Adobe's Liquid Mode, and modern web browsers all provide some of these controls. Because our devices are always with us, we now grab bits of reading here and there (Wolf, 2018): some of us check social media, others their news feeds, and still others their ebooks, news apps, or PDFs for class or the next meeting. Increasingly, we read in interludes, and with frequent interruptions, a considerably different form of reading than sitting down at length with a novel or newspaper. Existing research on reading has concentrated on fixed-format pages - either books or electronic facsimiles of books like PDFs. Recent studies indicate that we may be on the cusp of dramatically changing the way people read - making it much easier for struggling readers to read and for good readers to read even more efficiently by changing and, more significantly, personalizing the readability of the text. Indeed, the authors have seen children, both good and struggling readers, become more fluent with customized text formats (Crowley & Jordan, 2019a; Crowley & Jordan, 2019b) and adult readers add as much as 10 pages an hour when optimizing digital text for personalized reading (Wallace et al., 2020a; Wallace et al., 2020b).

Readability encapsulates those properties of a document that determine the ease and success with which individual readers decipher, process, and make meaning of the text read. While this may involve aspects of the document's content, structure, or layout more generally, our focus in this paper is on the typographical features of the text, which includes font choice, size, spacing, and related attributes. Many of the methods discussed here may nevertheless apply to studies of document readability more generally. By moving away from printed, and therefore fixed, text, readability is being fundamentally changed by digital text and the customization options that come with it. Readers - young and old, proficient and struggling - all stand to benefit immensely from having control over the format of the text that they read. Rather than a one-size-fits all, there is an opportunity to individuate for the reader and the reading context.

This new direction is a green field and needs new methodologies, tools, and approaches. The authors have been building these tools and methods over the last few years and will use this paper to share them with the greater interdisciplinary research community. In this pivotal moment, the future of readability is in the hands of a small group of present-day stakeholders.

This paper is intended as a practical foundational resource for growing the readability stakeholder community. The subject matter requires an integrated interdisciplinary approach, and correspondingly, the authors of this paper include vision scientists, technology experts, educators, designers, typographers, and data scientists; together, we represent voices from academia, tech industry, and non-profit institutions.

This paper is written for anyone interested in pushing the state of readability research: scientists, practitioners, educators, tech companies, type designers, policymakers, and engineers. Our goal is to share our methods and tools with the greater community in hopes that together we can advance the state of the research and make readability better for all.

... See the full paper on arXiv here: https://arxiv.org/abs/2107.09615

About arXiv: arXiv® is a curated research-sharing platform open to anyone. As a pioneer in digital open access, arXiv.org now hosts nearly two million scholarly articles in eight subject areas, curated by our strong community of volunteer moderators. arXiv offers researchers a broad range of services: article submission, compilation, production, retrieval, search and discovery, web distribution for human readers, and API access for machines, together with content curation and preservation. Our emphasis on openness, collaboration, and scholarship provide the strong foundation on which arXiv thrives.

Operations are maintained by the arXiv Leadership Team and arXiv staff at Cornell University.

# data[].attributes.attachment_link.description
"Readability Research: An Interdisciplinary Approach" is now available on arXiv, an archival preprint service. Twenty-eight different authors - from around the world and across many disciplines - collaborated to author a 60+ page intro to Readability research toward the goal of accelerating best practices and methodologies.

# data[].attributes.headline
Adobe MAX: Creating Value with Personalized Readability Formats

# data[].attributes.subject
Adobe MAX: Creating Value with Personalized Readability Formats

# data[].attributes.body
https://readabilitymatters.org/articles/adobe-max-creating-value-with-personalized-readability-formats

# data[].attributes.body
https://www.adobe.com/corporate-responsibility/readability.html

# data[].attributes.headline
Track 3 | Implementation in Tech Tools and for Business Use

# data[].attributes.subject
Track 3 | Implementation in Tech Tools and for Business Use

# data[].attributes.body
Link back to main page: https://padlet.com/ReadabilityMatters/4i80o0yn9vxn5gy2

# data[].attributes.headline
Track 2 | Implementation for Education Use

# data[].attributes.subject
Track 2 | Implementation for Education Use

# data[].attributes.headline
Connect with the Ecosystem - submit your ideas or sign up for more information here:

# data[].attributes.subject
Connect with the Ecosystem - submit your ideas or sign up for more information here:

# data[].attributes.body
https://readabilitymatters.org/skoll-world-forum-2022-ecosystem-event-connect

# data[].attributes.attachment_link.readable_text
To achieve this, The Readability Consortium will research and re-engineer Readability, making designers and readers alike ready for our information-intensive digital future.

Our membership steers collaborative research, the creation of open-source tools for the growing readability community, and the development of big data around digital reading.

# data[].attributes.attachment_link.description
To achieve this, The Readability Consortium will research and re-engineer Readability, making designers and readers alike ready for our information-intensive digital future. Our membership steers collaborative research, the creation of open-source tools for the growing readability community, and the development of big data around digital reading.

# data[].attributes.attachment_link.description
We build better reading. Our mission is to engage an ecosystem of partners to deliver personalized reading environments, empowering everyone to achieve more

# data[].attributes.attachment_link.title
Readability Ecosystem Experts in Session - Skoll World Forum 2022

# data[].attributes.attachment_link.title
Building Better Reading - Resources - Skoll World Forum 2022