Twista Sans: A Uniwidth Typeface
The work on Twista Sans started very straightforward, with the aim of producing a sans-serif partner for the display typeface Twista. The main concept for Twista Sans was drawn relatively quickly for a Thin, Regular, and Black master. The Black weight was already close to the Twista Background layer style. After drawing the shapes, the next step would have been to refine the letter spacing and sidebearings, define the individual weights, and set the space width for each master. Instead, I realized that keeping each letter’s width the same across all weights would work too, and might add its own twist to this simple, clean type family.
As a result, Twista Sans is a variable uniwidth typeface in which every letter has the same width in all weights. Whether in Thin, Regular, or Black, the letter ‘o’ always occupies the same amount of space. Here are some short insights from the design process. (Btw. for defining the widths of the letters, I made heavy use of FontDrop!’s “Advanced Width Report” subpage.)
The uniwidth concept
Historically, the idea of uniwidth type originated in the hot metal type era. Duplex matrices allowed different styles — such as Regular and Italic, or Regular and Bold — to share the same slug. This is also where terms like equal-width, duplexed, or multiplexed typeface come from. (See: https://en.wikipedia.org/wiki/Uniwidth_typeface)
To this day, the concept of uniwidth fonts remains very popular, even if it is not as widely known as that of monospaced fonts — with which it should not be confused. Today, its primary use and greatest potential lie in digital applications. Uniwidth fonts offer particular creative scope for UI elements, hover effects, and text animations.
For Twista Sans we created three simple examples using the Twista Sans Variable font:
Sentence highlighting, where each sentence in a paragraph is highlighted when the mouse hovers over it.
Automatic sequential animation, an animation through all words of a paragraph.
Proximity effect: the text is highlighted in a circular shape around the mouse pointer.
Get Viktor Nübel’s stories in your inbox
Join Medium for free to get updates from this writer.
The corresponding code can be found here: https://viktornuebel.com/retail-fonts/twista-sans/
Design notes
There is a quote by type designer Lucas de Groot: “I am opposed to the uniwidth concept, because letter shapes suffer by definition.” And it is true: the concept strongly influences letter design, especially when the weight range runs from very Thin to strong Black. For a typeface intended solely for setting body text, this can become problematic; for anything beyond that, however, it becomes an interesting feature with a distinctive design character.
The design of the “t” and “f” would certainly have turned out somewhat differently in a conventional proportional typeface. The same applies to the letter “r,” which — especially in the lighter weights — requires a very wide rightward curve to avoid losing the connection to the following letters.
Kerning follows a loose, generally open style. Very tight spacing could not be maintained across the weight spectrum because kerning values must be identical across all masters. Furthermore, combinations involving accented characters require close attention, and certain compromises must be made in those instances (hello, “Tǐ”).
The uniwidth concept — dating back to the days when typefaces were cast in metal and carried significant literal weight — remains just as exciting and versatile in our digital age. A quick search reveals a wide range of modern uniwidth typefaces across all typographic genres. The possibilities offered by uniwidth fonts invite creative experimentation and can quickly spark new ideas for using them. Twista Sans is one such typeface — have fun designing!
Some further reading:
https://wiki.wordsoftype.com/en/entry/uniwidth — Definition of the term.
https://www.myfonts.com/pages/fontshop-fontlists-uniwidth-typefaces-david-sudweeks/ — Good curated list of uniwidth typeface.
https://medium.com/@alexfjelldal/uniwidth-fonts-b2fc7b6ced95 — List of uniwidth typefaces for UI projects.
https://fontstand.com/collections/69697/ab1ddd85e26deaf6647be009be6a1337 — List of uniwidth typeface available at Fontstand.
