Typography - headings inconsistencies

[jjagielka]

Describe the bug
Section Typography - Headings defines inconsistent styles.

The most used heading h1 presents 3 different definitions. Which one is the standard one?

<h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
<h1 class="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl">
<h1 class="text-5xl font-extrabold dark:text-white">

h2 shows some deviations as well. Which one should I pick as an official one

<h2 class="text-4xl font-extrabold dark:text-white">
<h2 class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-4xl dark:text-white">
<h2 class="text-4xl font-bold dark:text-white">

Other small headings have some simple definitions like:

<h3 class="text-3xl font-bold dark:text-white">Heading 3</h3>

Shouldn't they have responsive sizing as well?

---

Flowbite - consistently inconsistent.

[zoltanszogyenyi]

Hey @jjagielka,

Thanks for reporting - can you please share the source of these heading tags?

Do consider that these headings are contextually different so whether they are used in hero sections, an article format, or in various other sections it can be larger or smaller.

Based on the given context I can check for consistency issues.

Cheers,
Zoltan

[jjagielka]

I've collected examples from one page only:
https://flowbite.com/docs/typography/headings/

[zoltanszogyenyi]

We're missing the responsive classes, but these should be the standard ones:

• Heading 1
• Heading 2
• etc...

The thing with typography is that it's never really the same other than some standard sizes. Meaning, for hero sections you can use larger than normal font sizes, whereas for actual typography for a new article you would use a smaller one even.

I'll update the responsive classes though, heading 1 should have text-3xl on smaller devices and heading 2 should have text-2xl.

[jjagielka]

Responsive sizing is one thing. The other is tracking and leading. Should we use it or not?

Note as well that h2 is font-extrabold and sometimes font-bold.

Text color very often is set as dark:text-white only. Should we relay on color inheritance or enforce color in light mode?

[zoltanszogyenyi]

@robert1508 let's check this out, we haven't touched this typography page for a long time