<p>Uniwidth typefaces have great potential for use in interactive interfaces. This is a short, handy compilation of some available options.Lisa Staudinger2 days ago·8 min readAs 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.In a monospaced font like IBM Plex Mono every letter has the same width.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.Usually, the letters of proportional typefaces have different widths in different weights, but in a uniwidth typeface, different weights occupy the same space.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.Using a uniwidth typeface one can easily animate the weight of interactive text elements without affecting the surrounding layout.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 Typewww.recursive.designRecursive 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.Source: Arrow TypePT Root UI by Paratypewww.paratype.com/fonts/pt/pt-root-uiPT 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.Source: ParatypeGolos UI by Paratypewww.paratype.com/fonts/pt/golos-uiAlso 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.Source: ParatypeGrandstander by Etcetera Type Companywww.etceteratype.co/grandstanderGrandstander 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.Source: ETCAngus by Black Foundryblack-foundry.com/fonts/angusAngus 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.Source: Black FoundryHalvar and Halvar Stencil Complete by TypeMateswww.typemates.com/fonts/halvar-and-stencil-completeHalvar 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.Source: TypeMatesService Gothic by HEXhex.xyz/Service_GothicService 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.Source: Future FontsAside from the generally very sober body-text fonts, there are also a few decorative uniwidth fonts available:Minérale by 205TFwww.205.tf/look/mineraleMiné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.Source: 205TFClimate Crisis Font by Helsinki Sanomatkampanjat.hs.fi/climatefont/index.htmlThe 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 extended 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.Climate Crisis Font’s characters are consistently wide, but seem to “melt” when a thinner cut is chosen. Source: Helsingin SanomatHandjet by Rosetta Typewww.rosettatype.com/HandjetHandjet 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 2×2 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.Source: Rosetta TypeTakeawayThe 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 readingIn 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 Sudweekshttps://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefacesThe UX Collective donates US$1 for each article published on our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.Note: Changes to the Full-Text RSS free service</p>