Gotcha: Inconsistent Text Size Usage

Problem: Disorganized UI due to Inconsistent Sizes

Example of Poor Hierarchy:

This is an "important" section title.

Followed by a paragraph with much larger text, which feels disproportionate and confusing for visual flow.

Example of Random Sizing:

A very large statement.

And then some tiny supporting details.

Then back to a base size for no clear reason.

*This kind of inconsistency makes the content harder to read and understand.

Solution: Consistent and Hierarchical Text Sizes

Clear Main Heading

This paragraph uses text-base , which is appropriate for body content under a larger heading.

Sub-Heading or Section Title

Supporting details or captions can use text-sm or text-xs for less emphasis, maintaining a clear visual order.

*A predictable use of the text scale improves readability and professionalism.