Month: January 2023

At the start of this year I wanted to process what had been a very fraught and traumatic 2022 for me. At the recommendation of many others, I used YearCompass as the prompts to pull apart last year and figure out what I needed directionally for 2023.

The year 2022, especially the final six months, was traumatizing for me. I’ve wrote a lot of “people died” and “new job” in the YearCompass form boxes — the best I could manage was four words total out of entire experience.

What happened? Some things I’m not ready to talk about. Some things I can hint at — I changed jobs and triggered a series of bad events at my former employer. And some things most of you know — a Sunday morning phone call to inform me they’d found my mother dead in her house. I’ve dubbed my condition as “three traumas in a trenchcoat.”

The more I picked at last year and thought about what I wanted this year, the more three words from soccer came to mind: pace, stamina, and endurance.

Pace is the speed you play the game at. Playing at a fast pace is beneficial for a soccer team that relies on pressing and attacking play styles.

Stamina is your ability to go all-out for a sustained period. The more stamina you have, the more field you can cover, faster, and with fewer mental mistakes.

Endurance is how long you can sustain the pace given stamina. It is critical to have the endurance to play a full 90 minutes at the speed of the game. Stamina and pace drain your energy, making you tired, slow, and sometimes unable to continue. (Thus why teams with high endurance are playing on a different level in the 90th minute than the other, worn down team can.)

It dawned on me: I have stamina and endurance, but not as much endurance as I once had. Thus, I’ve felt tired all the time.

I need to find a new pace.

I’ve been pushing myself hard the last few months as I’ve tried to navigate through these “three traumas in a trenchcoat.” I can’t stop to rest because then the traumas will catch up.

But I can’t keep this pace, not with this emotional load from the traumas. I’m constantly fighting burnout.

Without finding pace, I’m not going to find peace.

I need to come to terms with slowing down. (You know what’s hard for someone with ADHD? Slowing down. It’s asking an always-on brain, demanding constant input and stimulation, to shut off.)

I have no idea how to find a new pace or how to slow down. But I need to. I need to find a sustainable level where I can do what I do best without doing everything.

That means saying no. That means accepting idleness as a good thing in moderation.

It means coming to new terms with my rampant ADHD — reassessing the masks I use to hide how disordered I really am, asking whether I still need them. I have gotten here with all my hard-fought coping mechanisms; will what’s gotten me here be enough to take me the rest of the way?

It means learning to delegate correctly. Too often I’ve equated “servant leadership” with “martyr leadership” — that is, I overwork myself and burn out when I should have asked for help.

And it means setting and enforcing boundaries. Without boundaries, my life blurs into one big mess of duty and emotion smeared together like an infant spreading spaghetti sauce on the high chair tray. I need to remind myself I set boundaries to protect myself; martyrs are only supposed to die once, after all.

Here I am, in middle age, trying to remake who I am yet again amid trying to process a mammoth amount of emotional trauma. And given my family’s luck with cardiovascular events, I’d rather not let my body make the choice for me.

I honestly have no idea where to begin, but I have to try. I would rather work through this and make decisions about it without my body making those choices for me.

Anyway, that’s my thing this year — finding the right pace for me.

Here’s hoping.

I was recently contacted by a friend who asked, “What are the accessibility requirements for typography?” It’s a good question.

Typography is where the art of usability meets the science of readability, which is a poetic way of saying there are no direct Web Content Accessibility Guidelines (WCAG) requirements about what typeface or weight that you use, whether people would consider it legible, etc, etc.

Accessibility guidelines are specifically about ensuring the design allows people with disabilities (minor to severe), and as such they’re not designed to catch every problem that a web designer or developer can create.  In other words, if you pick a font that people are having trouble reading, that’s a usability issue, not an accessibility issue.

If people are having trouble reading something you’ve written, assuming you’re not putting black text on a black background, it probably comes down to either the legibility of the typeface or the readability of the layout.

Typographic Readability and Legibility provides a detailed definition of each of these terms and what changes improve or degrade the readability and legibility of a block of text.

Legibility refers to how the shapes of the letters and how they go together to form words affects reading. For example, this site uses the font Merriweather to display its body copy. It’s a serif font available through Google Fonts. I don’t remember the exact reasons we chose this font, but it’s shaped well, letters are both easy to identify and easy to differentiate, and it does well in big blocks of text. Here’s a screenshot of this paragraph set in Merriweather 16 for posterity’s sake:

Let’s compare that to, say, Inspiration, another font on Google Fonts. Inspiration was definitely not designed to be readable at small scales or in large blocks of text. The letter forms flow all over the place including under each other. It’s like trying to read a bowl of spaghetti. Here’s a screenshot of the same Merriweather paragraph above, only rendered in Inspiration this time:

So that’s legibility in a nutshell.

Readability on the other hand, is determined by how you design the text blocks that contain the font you’ve chosen. They include adjusting the spacing and line height, the size of the text, the width of the text block, the letter spacing, contrast between the font color and the background color, and the hierarchy of the various text blocks on the page in relationship to each other.

Changing the factors that affect readability can’t make an illegible font readable. If your font looks like my aunt’s handwriting — she’s an MD — no adjustment to the sizing, contrast, etc. is going to make it legible to anyone but her. On the other hand, changing the factors that affect readability can make a legible font unreadable.

As web designers, we’re likely to choose a typeface only once every few years — if we get any options to change it at all. If you do have the opportunity to choose a typeface and you have no idea  where to start, I strongly recommend reading the book or taking the online course entitled Better Web Typography for a Better Web by Matej Latin, as it did wonders for my understanding of typography. If you don’t have time for a whole book, the APA Style Manual has guidelines for picking a typeface that I mostly agree with here: https://apastyle.apa.org/style-grammar-guidelines/paper-format/accessibility/typography.

Outside of those rare instances of font-face-decision-making, legibility is going to be generally out of our control. There’s no CSS attribute that allows us to change the x-height of a typeface on the fly, at least not in 2023.

It comes as no surprise, then, that the WCAG provides guidelines to improve readability:

1.4.4 Resize Text requires that whatever typography you’re using should be able to be resized up to 200%, which means you want to use a “relative measurement” way of encoding the font size. In other words, use rems, ems, or percentages instead of pixels. Assuming your typeface is legible, this allows the user to zoom in and read if they deem it to be too small.

1.4.5 Images of Text (and 1.4.9 Images of Text No Exception) says don’t put text in images. When text is in an image, screen readers can’t access the text, voice control applications can’t access the text, the user can’t adjust the text to be easier for them to read, and essentially it just makes the text inaccessible to most people many disabilities.

1.4.8 Visual Presentation is a Level AAA guideline that requires you to make it so the user can change the foreground and background colors of the text block, limit the line length to 80 characters, refrain from justifying text, provide a line height of 1.5 times the font size, and provide the already-mentioned 200% resizing.

Most organizations don’t strive for Level AAA guidelines unless they have specific audiences who need it, so you may be tempted to toss this one aside. Before you do, pull out the line length guideline. 80 characters has been found to be the easiest and speediest line length for the vast majority of people to read. Shorter than 47 characters tends to cause people to jump lines incorrectly because they’re being required to do it so often. Longer than 100 characters can cause people to jump lines incorrectly because they lose track of what line they started on. Even if you don’t attempt to reach 1.4.8, make it a point in your organization to limit your line lengths. Your users will thank you.

1.4.10 Reflow says that your text block has got to fit on a 320×256 CSS pixel space without scrolling both horizontally and vertically, unless it’s a two-dimensional layout (i.e. a table or chart), in which case it can scroll both directions. Nobody wants to scroll their (English, LTR) text horizontally in the first place, but if for some reason they need to, they really don’t want to have to scroll up-down as well. This is as much a guideline to prevent you from pissing off your entire user base as it is one to help people with motor control issues.

Some rough math that someone did a while ago figured out that 320×256 is actually about the same as 400% zoom so if you’re building responsively, zooming to 400% is an easy quick-check on the responsive layout.

1.4.12 Text Spacing specifies a line height of 1.5 times the font size, paragraph breaks of 2 times the font size, tracking of at least 0.12 times the font size, and word spacing of at least 0.16 times the font size. The tracking and word spacing are generally set to those values by the browsers by default, but you need to set (or at least check) the line height and paragraph spacing.

The WCAG are not designed to help you make voice and tone decisions, and essentially, that’s what the choice of a typeface primarily impacts. They are, however, designed to help you take that choice of typeface and make it readable for the largest number of people possible. The guidelines will also increase reading speed by removing obstacles, and decrease the number of reading errors that people with cognitive disabilities can make.

Choose your typeface wisely, and apply the guidelines effectively, and you’ll provide your users a better reading experience.