Why Do I See ALLCAP TEXT in Almost Every Design Systems
Odd Questions on Design and Typography
Sometimes asking an odd question helps clarify things for me. Here is one: why do I see ALLCAP TEXT in almost every design systems?
While changing font size is the easiest way to create contrast, it is not the most effective method. Sizing difference is only noticeable in comparison. Font weight and style differences are more direct and noticeable. However, none of them can compare to letter casing when it comes to creating contrast. Letter casing is an often overlooked tool to develop distinctive typographic looks.
Looking at how much physical change is made to the shapes of the letters by altering font size, font weight, font style, letter casing respectively. Every method maintains the skeleton of the letters to the same, except for changing letter casing. It fundamentally deconstructs the word and reconstructs with different letters. It creates an entirely different typographic look and very noticeable contrast.
Specifying letter casing for all the text styles in design system is very helpful, and I don’t see enough of in our industry. Look beyond just the traditional UPPER CASE, Sentence case, Title Case, there is also lower case, and even aLtErNaTiNg cAsE. mtv.com has all the news title set in lower case, it creates not only a distinctive typographic look but also a chill, laid-back expression, signaling these are not serious political news, these are about pop culture and entertainment.
Design system should also consider incorporating tone and styles of copywriting, and that goes hand in hand with letter casing as well. For example, the designer may specify Title Case should only be applied to a phrase, not a sentence with a period mark at the end. For section’s call out text, the designer may specify whether it ends with sentence-ending punctuation like period and questions mark or not. There are all missing parts of a lot of design systems.
