Addressing: Text Too Small on Mobile

Good Practice: Readable Base Size

This heading uses `text-2xl` as its smallest size, ensuring it's still prominent and readable on mobile, before scaling up with `sm:text-3xl` and `md:text-4xl`.

Readable Heading

Base size: text-2xl (Good for a main heading on mobile)

Gotcha Example: Potentially Too Small

This heading starts with `text-lg`. While not terrible, if this were a *main page title*, it might be less impactful and harder to read on mobile compared to `text-2xl`. The key is context and importance.

Less Prominent Heading

Base size: text-lg (Could be too small for a *main* heading on mobile, impacting emphasis and readability)

Resize your browser. Notice the starting size of the headings on the smallest view. The "Readable Heading" maintains better presence.