What if: A web font for data
Alphanumeric data works well for programmatic query, but less so for direct human consumption. What if a font was designed specifically with life sciences data in mind?
As EMBL-EBI’s web design architect, I help foster community standards for how services enable user tasks with consistently and predictably.
Within the standards is a mix: things found on most websites — menus, accordions, layout, messaging, branding — plus application interactivity and data visualisation standards. It’s a hugely broad undertaking with complex technical implications.
But, one of the biggest challenges is also the simplest: text readability.
EMBL-EBI helps enable free access to massive amounts of data from life science experiments. This allows users to access lots and lots of tables with data identifiers that look like:
ENSMUST00000032717 ENSMUSG00000030507, and
A_51_P156144, 4532657, 10563797, 129205_at, 4947113, 4910838, 1457012_at, 4962225, 5549684, 5020471, 4460390
Making these strings more understandable is partly a classic design problem of when, where and how these strings are presented.
But it’s also a question of what is displayed.
Here’s a starting list (ideas? comment? 🐦 @khawkins98):
- Multiple sequential numbers: it’s not uncommon to have 7 zeros
20000001in a row. Oh wait, that was only 6 zeros.
- Dropping descenders in letters like these:
- Small openings (counters) in numbers at small sizes
- Wide widths of monospacing: monospaced fonts are often not used as they can take up more room (particularly with spaces between words) and folks want to pack as much data as they can into one screen.
- Monospaced = false
- Monospaced = true
Take computer code: monospaced fonts are an immense help. Uniform character alignment makes it easier to navigate and compare parallel rows of commands.
It’s much akin to how spreadsheets are good for lining up grids of numbers.
Monospace fonts typically have sharp, angular edges. This helps prevents mixups of a lowercase
l and a pipe
| or a number one
1. Likewise for an uppercase
O and numeric zero
You might call some of these monospace fonts “code” fonts.
Aside: There are also “duospace” fonts that combine the discernibility of mono fonts, but with flexibility for letters like w and m
Further illustrating the potential of modern font usage across the desktop and web, the concept of ligatures has emerged for monospaced code fonts.
Take the font Fria Code, it improves the readability of common code expressions and strings:
- != -> !=
- www -> www
- *** -> ***
- ?= -> ?=
These ligatures help with visual smoothness, readability and discernments of repetitive characters (i.e.
There is some controversy about how adding ligatures can dilute truth when syntax is gospel but, in general, the trend of code ligatures shows potential. It’s still fairly new, first appearing in earnest in 2015 and you can now easily graft programming ligatures onto many monospaced fonts.
Aside There are also math fonts, but those are designed to facilitate characters that aren’t easy to represent in ASCII, which is a different problem than the one we’re looking to address here (as most of the data we’re dealing with has ASCII representations)
I’ve been talking about possible solutions to programming issues. It doesn’t fully map to the issues in data design, much less Life Science data but we can still draw inspiration from the solutions being worked on in the programming space.
A non-exclusive list, but some good places to look along with a few illustrative examples. I'm not saying all of these are good ideas, but they're possibilities that address some issue and this is my my way of airing everything. Oh, these are not technical demonstrations, only illustrations.
Just using monospace could be a big win. With the extra readability of the letter forms we could save space by reducing the font size ever so slightly.
Here I've used iA Writer Duospace to illustrate how we can bend the rules of monospaced fonts for better readability.
Particularly for grouping repeating numbers ever so slightly in the manner of www vs www. This one currently makes me nauseous.
Second line is Retina MicroPlus and shown as SVG for licensing reasons.
We could avoid descenders for
j and similar. This is a similar readability case as lining vs old style figures.
We could highlight every Nth character in a sequence.
Is you font too tightly kerned for numbers? That letter "g" not working?
See the Pen A data font: Stylistic alternates, tabular numbers by Ken Hawkins (@khawkins98) on CodePen.
Obvious but important:
In addition to No. 10, we shouldn't forget just how much we can achieve through good design of tables.