Uniwidth typefaces for interface design
Uniwidth typefaces have great potential for use in interactive interfaces. This is a short, handy compilation of some available options.
As a web/interface/visual designer I work a lot with label states. Selected, unselected, active, inactive, available, out of stock. Considering that you should never use color as the only visual cue (always remember accessibility dear designer), text weight is often my go-to solution. However, if you’ve ever worked with precisely designed interfaces before, you know how frustrating it can be to find your painstakingly placed labels shoot around like flipper balls when you switch them from regular to bold.
The solution to this problem: “uniwidth” typefaces, sometimes also called “equal-width”, “duplexed” or “multiplexed” typefaces. And no, I am not talking about monospaced fonts here.
A short clarification for the non-type nerds: A monospaced font, also called non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space (e.g. an uppercase A is the same width as a lowercase w, or a €-sign ). Monospaced fonts are traditionally used for typewriters, or nowadays for setting computer code.
Uniwidth typefaces, on the other hand, are proportionally-spaced typefaces, but every character occupies the same space across different cuts or weights. What this means in practice is that no matter which weight you set your text in, it will never change its length or cause text to reflow.
While this feature allows for some creative layering in static typesetting, it is decidedly spectacular for interface design, where things tend to quickly go awry with only small changes. As an example, changing the weight of a single menu item on hover usually results in an erratic twitching dance of the whole menu as it tries to adjust for the change. Using a uniwidth font solves this issue easily and without the need for any extra code.
Considering also that we see a rise in variable fonts, which oftentimes allow a smooth interpolation between different weights and cuts, uniwidth typefaces definitely are extremely valuable for interactive design projects.
As this feature is nothing but a nice gimmick in static typesetting, it is not surprising that there aren’t a whole lot of resources about uniwidth typefaces to be found. So far, I have found two resources that compile uniwidth typefaces, Identifont’s list of “Equal-width fonts” and a collection of “Uniwidth typefaces” by David Sudweeks from 2015, both of which still contain a considerable amount of options.
Considering the specific needs of interface and web design, and the proliferation of variable fonts in recent years, I am however expecting (and hoping) to see many more uniwidth fonts in the near future.
And because one can never have enough type options, here are a few more uniwidth fonts that I have come across recently. (Note: I am not including monospaced typefaces in this selection, as those are generally uniwidth, and much easier to find.)
Recursive by Arrow Type
Recursive is a variable font built to “maximize versatility, control, and performance”. Recursive comes in a proportional and mono version, both of which can be further controlled along four axes: Weight, Casual, Slant, and Cursive. The Casual cut echoes the soft & curvy brush strokes of casual signpainting and adds a fun twist to the otherwise serious typeface. Recursive supports a wide range of Latin-based languages, including Vietnamese. It also comes with an extended set of currencies, symbols, fractions, and arrows.
Recursive is free for download from Google Fonts or Github and open-source, licensed under the SIL Open Font License 1.1.
PT Root UI by Paratype
www.paratype.com/fonts/pt/pt-root-ui
PT Root UI is a modern, no-nonsense sans serif that comes in four weights (Light, Regular, Medium, Bold). PT Root UI is designed specifically for screen reading, interfaces, and websites. It has a broad language support, including the Latin Extended and Cyrillic (including Cyrillic Asian), and comes with tabular figures, currency signs, fractions, and indices, as well as a number of arrows and alternative forms.
PT Root UI is free for download under the SIL Open Font License (OFL) on Paratype’s website.
Golos UI by Paratype
www.paratype.com/fonts/pt/golos-ui
Also by Paratype, Golos Ui comes in three weights (Regular, Medium, Bold), and is also available as a variable type. Golos UI is overall similar to PT Root Ui, but has slightly narrowed proportions. It has a broad language support, including the Latin Extended and Cyrillic (including Cyrillic Asian), and comes with tabular figures, currency signs, fractions and indices, as well as a number of arrows and alternative forms.
Golos UI is free for download under the SIL Open Font License (OFL) on Paratype’s website.
Grandstander by Etcetera Type Company
www.etceteratype.co/grandstander
Grandstander is a playful sans-serif variable font inspired by children’s books, that will “will appeal to folks young and old”. The letters are bend and slightly inflated, giving it a comic-like aesthetic. Grandstander comes in a static version with nine weights (Thin to Black) with matching italics. The variable version has two axes: Weight & Slant. It supports “a wide range of languages in the latin script scope” and includes tabular figures, as well as fractions, alternates and ligatures.
Grandstander is free for download under a OFL (Open Font License) on Google Fonts and Github.
Angus by Black Foundry
Angus is a modern sans-serif with rounded terminals that has a distinctly monospaced aesthetic. Angus comes in five weights (Light to Extrabold) with matching slanted italics. Angus support the Latin script set and includes old-style & tabular figures, fractions and indices, ligatures, and arrows.
Angus can be bought from Black Foundry’s website.
Halvar and Halvar Stencil Complete by TypeMates
www.typemates.com/fonts/halvar-and-stencil-complete
Halvar is a massive type system, with a total of 162 styles. Halvar plus Halvar Stencil in three widths (Wide, Normal & Condensed), as well as nine weights (Hairline to Black) with two italic versions (Slanted & SuperSlanted). With bulky proportions and constructed forms, Halvar is a pragmatic grotesk with the raw charm of an engineer. Halvar supports extended Latin, Greek and Cyrillic and is shipped with tabular figures, circled highlights, superscripts, fractions as well as alternate characters.
Halvar can be purchased from TypeMate’s website. A pre-release variable font is also available.
Service Gothic by HEX
Service Gothic is a work-in-progress variable font, currently only available in uppercase letters. Service Gothic includes 6 static weights from Thin to Bold.
The initial release version of Service Gothic can be bought from Future Fonts.
Urby & Urby Soft by TypeMates
The Urby Collection aims to “combine striking character with technical functionality”. Urby, and its rounded counterpart Urby Soft come in five weights (Thin to Black). The two can be used interchangeably, as they are uniwidth across all weights in both families. The Urby Collection comes with extended Latin language support, and includes lining & tabular figures, super- and subscripts, fractions, ordinals, and a wide variety of helpful dingbats and geometric shapes.
The Urby Collection is available for purchase on the TypeMates website.
Geóso by Finaltype
finaltype.de/de/projekte/geoso
Geóso is a humanist sans serif with a geometric feel. This typeface comes in nine weights (Thin to Heavy) with matching italics, and is uniwidth across every style. Geóso supports the extended Latin script set and features an extensive and sophisticated figure, super- and subscript and fraction system. As a bonus, Geóso includes the elusive german capital ß, and a fun set of custom emoticons.
Geóso can be purchased from the FrontSpring website.
FF Kaytek family by FontFont
www.fontshop.com/superfamilies/ff-kaytek
FF Kaytek is “a fresh take on the correspondence typefaces of the 90s”. It is an extensive superfamily, comprising four styles: Slab, Sans, Headline & Rounded. FF Kaytek Slab and Sans each come in six weights (Thin to Black) plus matching italics, while FF Kaytek Headline and Rounded both have seven weights (Thin to ExtraBlack/Black). The Headline and Rounded style are complementary and have a more compact appearance than Slab and Sans. FF Kaytek is uniwidth across weight and italic within each style.
The FF Kaytek superfamily supports the extended Latin script set and ships with old-style figures, fractions, as well as super- and subscript.
FF Kaytek is available on FontShop and MyFonts.
Bahnschrift by Saja Typeworks
docs.microsoft.com/en-us/typography/font-list/bahnschrift
Bahnschrift is a digitization of the DIN typeface known from German road signs and other technical implementations. Bahnschrift was Microsoft’s first variable font, and has two axes: Weight and Width. A static version exists, which includes five weights and three widths. Bahnschrift supports the Latin Extended (incl. Vietnamese), as well as Cyrillic & Greek.
Bahnschrift is available as part of the Windows 10 operating system.
FF Scala family by FontFont
The FF Scala family is a classic for typesetting in print. Designed in 1991 by Martin Majoor, the old-style serif FF Scala was later expanded with a sans-version, FF Scala Sans, based on a common skeleton. Both families come in two weights (Regular and Bold) plus matching italics, and two condensed styles. The FF Scala family supports extended Latin and includes old style & tabular figures, super- and subscript, fractions, ordinals and a signature set of decorational hands.
The FF Scala family is available for purchase from the FontShop website.
Aside from the generally very sober body-text fonts, there are also a few decorative uniwidth fonts available:
Minérale by 205TF
Minérale is a variable typeface designed with unusual stems, whose sides intersect. Minérale is “fairly sober in its thinnest versions [but] becomes more exuberant in its heavier weights”. The static version of the typeface comes in five weights (Extralight to Black) plus matching italics, all of which are uniwidth (including the italic versions). Minérale supports the extended Latin script set and includes Proportional Lining Figures, Proportional Old Style Figures, Tabular Lining Figures, Tabular Old Style Figures, Superiors/Inferiors, Ordinals, Stylistic Alternates and Arrows.
Minérale can be purchased from 205TF’s website.
Climate Crisis Font by Helsinki Sanomat
kampanjat.hs.fi/climatefont/index.html
The Climate Crisis Font is an amazing variable font that tries to shed light on the urgency of climate change. The font’s weight axis is based on data from the National Snow and Ice Data Center and predictions provided by the IPCC. The heaviest font weight represents the minimum extent of the Arctic sea ice in the year 1979, while the lightest cut represent the predicted 2050 forecast.
Climate Crisis Font supports the basic Latin script set and features a limited selection of superscript and fractions.
The Climate Crisis Font is free for download under the SIL Open Font License (OFL) from Helsigin Sanomat.
Handjet by Rosetta Type
Handjet is an experimental, grid-based typeface with three axes. The Handjet type system contains 23 elemental shapes (such as squares, clovers, hearts and pins) whose size can be changed, producing different font weights. Plus, one can choose to use groups of 2x2 smaller elements instead of a single element. As is to be expected from Rosetta Type, Handjet supports a wide range of languages: Arabic, Armenian, Cyrillic, Greek, Hebrew and extended Latin. It also includes fractions and enough fun little ornaments to make a quick brown fox jump over a lazy dog.
Handjet can be bought for 0€ from the Rosetta Type website.
Takeaway
The ability to change the weight and style of texts without impacting the space they occupy is a feature that has considerate implications for interfaces. Not only can it save a few headaches for designers and developers, it also opens up new possibilities for accessible design. With more and more variable fonts being released, I, for one, am excited to add more uniwidth typefaces to my interface design toolkit. How about you?
Further reading
In case you missed the reference above, there are a lot more uniwidth fonts I haven’t mentioned in this article, but which are collected in these great resources:
Identifont’s list of “Equal-width fonts”
http://www.identifont.com/equal-width.html
“Uniwidth typefaces” by David Sudweeks
https://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefaces
In response to this article, Indra Kupferschmid has put together a collection of uniwidth/multiplexed typefaces on Fontstand. Thanks!
https://fontstand.com/collections/69697/ab1ddd85e26deaf6647be009be6a1337
