Every now and again I get some very specific requirements in my design work. Last year I received a particularly interesting brief.
My client wanted a fully editable document, building on previous projects we’d worked on together and keeping the existing design – but this time it needed to be editable in Microsoft Word. Another key requirement was that the document had to be fully accessible to screen readers.
Not a problem, right?
One of the design elements used throughout the document was a number inside a circle. This is easy to create in a graphics package, and with a bit of fiddling it’s possible in Word too. The downside was that Word wouldn’t anchor these elements properly with the surrounding text. As content was added or edited, the circled numbers would shift around the page. This version of Word also didn’t allow grouped elements to be pasted into a text box, which made things even trickier.
The simple answer might have been to create each number as a graphic and add alt text for screen readers. But that came with several limitations:
- Adding alt text would be fiddly and would need to be taught to anyone updating the document
- The numbers appeared in three different colours, meaning lots of graphics would need creating for future use – many of which might never be needed
- Some versions of Word might not allow the images to be placed in text boxes
- The final document would be distributed as a PDF, and Word’s image compression meant the quality wasn’t great
It was an option – but not an ideal one.
You might be thinking: “But Matt, there are loads of circled number fonts out there already.”
The issue was accessibility.
To create numbers above 9, many of these fonts assign letters to represent values – for example A for 10, B for 11, and so on. While this looks fine visually in Word, screen readers read out the letter rather than the intended number. Not great from an accessibility point of view.
So I started thinking.
Drawing on my background in web design and development, I wondered if there was something similar to how style sheets work on websites that could unlock this problem.
On the web, you can use simple tags like bold or italics not just for emphasis, but also to apply additional styling – different colours, fonts, or visual treatments – while keeping the underlying text intact and readable by assistive technologies.
Using Affinity Designer and BirdFont, I set about creating a custom font.
Here’s how it worked:
- Numbers 0–9 were created as standard circled numbers
- Numbers 10–99 were built using combinations of bold and italics
Using bold for the first digit created the left half of the circle (the tens), and bold + italic for the second digit created the right half of the circle (the units). Together they formed a complete circled number – all while remaining real text.
First I built a proof of concept.
It worked.
=
The result:
- Screen readers read the numbers correctly
- No blurry image rendering
- No need to generate hundreds of graphics in different colours
- Fully editable within Word
Even better, Word allows custom fonts to be embedded directly into documents. This meant my client didn’t need to install anything on their machines – making the files completely portable and keeping their IT team happy too.