In my latest web project, I opted to use material tailwind component library to aid me in development. In the package, I encountered uppercase words in buttons and it left me a bit confused about this design choice. To know more about how I should feel seeing this UPPERCASED Design, I delved deep into my research on letter casing.
According to my research, I found there to be 3 standard letter casings,
- Sentence casing
- Title Casing
- ALL CAPS
Design is so simple, that's why it is so complicated. - Paul Rand
Sentence casing
Sentence casing is taught to us by our teachers in schools and colleges. We capitalize the first letter of the sentence. The sentence case looks casual, cleaner, and improves readability.
When to use:
a. Sentence casing is more legible, we use it for long texts such as paragraphs, long text contents, etc. It is easier to scan and read.
b. Can be used freely, it is causal and clean.Title Casing
Title casing is capitalizing every word in a sentence. This casing was popularized by Apple. In the title case, each word is given emphasis and words stand out, but it makes reading/scanning of text slower and more difficult.
When to use:
a. As the title suggests, we can use it in titles and subtitles.
b. Can be used in navigation elements like links.
c. Not to be used in labels, buttons, and long texts.ALL CAPS
ALL CAPS is capitalizing each letter of the word. This makes the word stand out in the UI but it makes readability hard.
I found it interesting to know that there are different theories on why it is difficult to read. One theory states that SINCE LETTERS ARE CAPITAL, it is difficult for us to distinguish the letters as all the letters have the same height, we lose the height advantage. Another source counters the claim saying it is difficult to read not because of shape but because of lack of practice.
ALL CAPS means important, it should not be overused and it should not be where reading long text is required.
When to use:
a. When we want to emphasize and direct the user's attention to a specific element or piece of information.
b. We can use it in UI buttons, tabs, headings, titles, and labels where text length is shorter than one line.
Based on my findings, it turns out that having ALL CAPS in buttons isn't as frowned upon. Due to this unsettlement, I got to learn about the cases and share my understanding. If you have anything you want to share, feel free to express it in the COMMENTS. Do REACT and FOLLOW ME to hear more from me.
Follow me if you want to know, why I decided not to use Tailwind Material and created my own custom components.
REFERENCES:
Top comments (0)