|
Somehow it has become August. Not entirely sure how, but here we are! In the past few weeks there have been some exciting developments in upcoming workshops and talks (all online), in the project I’m working on with the State of Rhode Island, and for me personally (Ellen’s and my 15th wedding anniversary and a new bike). Unfortunately that’s meant writing the newsletter has slowed again a bit. But we’re getting close to wrapping up what I want to cover, so the next few are really exciting to me. I hope you’ll agree when you get them :)
On the subject of events—I’ve got a talk next week on editorial typographic design and variable fonts as part of Design 4 Drupal, a half-day workshop on using variable fonts on the web with FITC, and talks announced this fall as part of the SHIFT Remote series (based in Croatia, but given online—check the E09 event on 24 September) and for the Singapore-based GIDS WEB event (that one with a talk and a workshop). The GIDS WEB event will be given in their local timezone, so I hope some of you in Asia and Australia/New Zealand might find that one easier for participation!
And if you're curious about the bike, you can read about my first week with it over on the ATA Cycle website!
|
|
Cheers,
Jason
Replies go straight to my inbox—let me know what you want to learn!
|
|
Accessibility settings and user preferences
|
|
|
In the last issue we added a new feature to the project: supporting light modes—both via operating system preference and explicit user setting. This time we’re expanding upon the concept of user reading preferences to include a few more: font size, line height, and word spacing. Each of these are intended to allow the reader to adjust the typography to better suit their own preferences while helping maintain the overall integrity of the design. Font size impacts line length and content width—so you can see that impact the layout container. Line height and word spacing leave the overall width alone.
|
|
|
|
New settings menu options
|
|
|
Font size may be of interest primarily to folks like me with older eyes, but the other two might be of more interest to those with some form of dyslexia or who struggle with keeping focus while reading. Increasing the line height can help some readers visually isolate the line of text they’re following; word spacing can sometimes help more too. Some research indicates that for some dyslexic readers more susceptible to crowding can increase reading comprehension by as much as 50% simply by opening up spacing for lines and words. I found some additional research in the journal Cortex, though I first heard about it via Kevin Larson in a talk at ATypI Montreal.
Rather than force these settings to a specific value, I decided to introduce a range from the original values on up, rather than both up and down. Reducing from the standard spacing seemed like it would be a mess, and this keep the controls a lot simpler to start.
You’ll notice that I also introduced some additional styles to the navigation design. Hopefully this is a bit friendlier to use as well.
|
|
Setting the styles
In a similar way that we set the light mode preference, we want to combine a setting the user can easily change with a browser cookie to save that setting from one visit to the next. This way as the reader moves from one page of the book to the next, their preferences will be preserved—on this visit an any others until the cookie expires in a year. To get this working well we need a combination of techniques.
Enable the setting
First we create a new CSS custom property for each setting (we’ll use font-size for our example). Since this will act as a multiplier on font-size, we’ll start with a default value of 1. Then we’ll add a range slider to our settings menu that goes from the default value (1) up to 3 (meaning 3 times the normally calclulated font-size).
|
|
:root {
--fontSizeModifier: 1;
}
|
|
|
|
And the HTML for the slider:
|
|
<label for="size">Font size: </label>
<div class="settings-slider">
<input type="range" min="1" max="3" value="1" step="0.01"
name="size" id="font_size_modifier" />
<div class="settings__fontsize--value low">Original</div>
<div class="settings__fontsize--value high">Larger</div>
</div>
</div>
|
|
|
|
Next we have to connect the custom property and range slider using a bit of JavaScript. We use that to read the calculated value of the custom property to set the initial value of the slider which we trigger on window load. Then we let an event listener take over for monitoring if we change the slider ourselves. When we do that, every time the slider value changes, we read that value and assign it back to the custom property and save the value to a cookie as well.
|
|
// Get the slider object
const fontSizeSlider = document.getElementById('font_size_modifier');
// Get the value of the CSS custom property
var currentFontSizeModifier = getComputedStyle(document.documentElement).getPropertyValue('--fontSizeModifier');
// Add the event listener for the slider
fontSizeSlider.addEventListener('change', handleFontSizeSliderUpdate);
// Handle updates when the slider value changes
function handleFontSizeSliderUpdate(e) {
// Update the CSS custom property
document.documentElement.style.setProperty(`--fontSizeModifier`, this.value);
// Set cookie to save the value
document.cookie = "fontSizeModifier="+this.value+"; max-age=31536000; path=/; samesite=strict";
}
// On window load, set the slider to match the CSS custom property
function fontSizeSliderSet() {
// Get the value of the CSS custom property
let fontSizeModifier = getComputedStyle(document.documentElement).
getPropertyValue('--fontSizeModifier');
// Set the slider value to match
document.getElementById('font_size_modifier').
setAttribute('value',fontSizeModifier.trim());
}
|
|
|
|
To complete the circle, we add another bit of JS to the head of the page where we check for any saved value in the browser cookie stash, and if there is one, assign it to the custom property. Now we know we can save the value, modify it, and use it in our CSS.
|
|
// Looping through cookie values
// Check for Font size preference
... if (cookies[i].includes('fontSizeModifier')) {
let fontSizeCookieString = cookies[i];
// Get the value
let fontSizeModifier = fontSizeCookieString.split('=');
let fontSizeModifierValue = fontSizeModifier[1];
// Reset the expiration for the cookie
document.cookie = "fontSizeModifier="+fontSizeModifierValue+";max-age=31536000;path=/;samesite=strict";
// Update the CSS custom property with the cookie value
document.documentElement.style.setProperty(`--fontSizeModifier`, fontSizeModifierValue);
|
|
|
Putting the setting to use
Now that we know we have a continually updated and accurate CSS custom property value, we can incorporate it into our font size formula. In this case, we can add it right in to the ‘clamp()’ formula and all our font sizes will be recalculated including the new font-size multiplier like so:
|
|
* {
/* Insert the modifire into the min/max formulas */
--font-size-min: calc(var(--font-size-min-value) *
var(--fontSizeModifier) * 1rem);
--font-size-max: calc(var(--font-size-max-value) *
var(--fontSizeModifier) * 1rem);
/* And the rest of the font-size formula stays the same */
--font-size-scaler: calc(var(--font-size-scaler-value) * 1vw);
--font-size: clamp(
var(--font-size-min),
calc(0.5rem + var(--font-size-scaler)),
var(--font-size-max)
);
}
|
|
|
|
We also factor this one into our maximum content width using a new ‘min()’ value calculation: we compare the new content width calculation (with the modifier added to the formula) or a value of 94vw (viewport width units) and use whichever value is lower. This way we can adapt the content area layout to the size of the text without allowing it to become wider than the screen.
|
|
|
|
Default text size above, larger preference set below
|
|
Step, repeat
We follow similar steps in order to add the same kind of options for line-height (though without needing to worry about content width. Finally, we add a new attribute to the paragraph styles to allow for the word-spacing setting (since we weren’t setting that at all before).
I’m looking forward to hearing from all of you on this one. Since these aren’t issues I grapple with personally, I’ve had to rely upon feedback from readers and conference-goers when I’ve presented this before. Last year in Toronto I had a remarkable conversation with a woman who—very unexpectedly—found one of my slides much easier to read when I demonstrated spacing like this. That was a very powerful example of theory and practice coming together in a truly positive way. I hope you’ll let me know if you find this useful.
|
|
Does your organization need a boost?
If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!
|
|
|
|
