Foundations
Typography
KitFront starter kits include responsive body text, heading sizes, and line heights. Choose the tab that matches your starter.
Body font sizes
Bootstrap typography tokens are defined in assets/css/core.css.
| Screen | Token | Default |
|---|---|---|
| Large Desktop | --kf-font-body-large-desktop | 18px |
| Desktop | --kf-font-body-desktop | 18px |
| Tablet | --kf-font-body-tablet | 17px |
| Mobile | --kf-font-body-mobile | 16px |
Heading sizes
Headings use responsive CSS variables for each breakpoint.
| Heading | Mobile | Tablet | Desktop | Large Desktop |
|---|---|---|---|---|
| H1 | 40px | 45px | 50px | 50px |
| H2 | 32px | 36px | 40px | 40px |
| H3 | 24px | 28px | 32px | 32px |
| H4 | 22px | 24px | 28px | 28px |
| H5 | 20px | 22px | 24px | 24px |
| H6 | 18px | 20px | 20px | 20px |
Heading tokens
Use this token pattern when you need to adjust one heading level for one breakpoint.
| Heading | Mobile Token | Tablet Token | Desktop Token | Large Desktop Token |
|---|---|---|---|---|
| H1 | --kf-font-h1-mobile | --kf-font-h1-tablet | --kf-font-h1-desktop | --kf-font-h1-large-desktop |
| H2 | --kf-font-h2-mobile | --kf-font-h2-tablet | --kf-font-h2-desktop | --kf-font-h2-large-desktop |
| H3 | --kf-font-h3-mobile | --kf-font-h3-tablet | --kf-font-h3-desktop | --kf-font-h3-large-desktop |
| H4 | --kf-font-h4-mobile | --kf-font-h4-tablet | --kf-font-h4-desktop | --kf-font-h4-large-desktop |
| H5 | --kf-font-h5-mobile | --kf-font-h5-tablet | --kf-font-h5-desktop | --kf-font-h5-large-desktop |
| H6 | --kf-font-h6-mobile | --kf-font-h6-tablet | --kf-font-h6-desktop | --kf-font-h6-large-desktop |
Line heights
| Text | Token | Default |
|---|---|---|
| Body | --kf-line-height-body | 1.6 |
| H1 | --kf-line-height-h1 | 1.2 |
| H2 | --kf-line-height-h2 | 1.2 |
| H3 | --kf-line-height-h3 | 1.3 |
| H4 | --kf-line-height-h4 | 1.3 |
| H5 | --kf-line-height-h5 | 1.4 |
| H6 | --kf-line-height-h6 | 1.4 |
Customize typography
Update typography tokens in assets/css/core.css. All sections using global heading and body styles will follow the new scale.
Body font sizes
Tailwind typography is defined in src/assets/css/input.css with utility classes inside @layer base.
| Screen | Class | Default |
|---|---|---|
| Mobile | text-base | 16px |
| Tablet | md:text-[17px] | 17px |
| Desktop | lg:text-lg | 18px |
| Large Desktop | 2xl:text-lg | 18px |
Heading sizes
Headings use responsive Tailwind utilities.
| Heading | Mobile | Tablet | Desktop | Large Desktop |
|---|---|---|---|---|
| H1 | 40px | 45px | 50px | 50px |
| H2 | 32px | 36px | 40px | 40px |
| H3 | 24px | 28px | 32px | 32px |
| H4 | 22px | 24px | 28px | 28px |
| H5 | 20px | 22px | 24px | 24px |
| H6 | 18px | 20px | 20px | 20px |
Heading classes
These are the exact responsive classes used by the Tailwind starter.
| Heading | Mobile | Tablet | Desktop | Large Desktop |
|---|---|---|---|---|
| H1 | text-[40px] | md:text-[45px] | lg:text-[50px] | 2xl:text-[50px] |
| H2 | text-[32px] | md:text-4xl | lg:text-[40px] | 2xl:text-[40px] |
| H3 | text-2xl | md:text-[28px] | lg:text-[32px] | 2xl:text-[32px] |
| H4 | text-[22px] | md:text-2xl | lg:text-[28px] | 2xl:text-[28px] |
| H5 | text-xl | md:text-[22px] | lg:text-2xl | 2xl:text-2xl |
| H6 | text-lg | md:text-xl | lg:text-xl | 2xl:text-xl |
Line heights
| Text | Class | Default |
|---|---|---|
| Body | leading-[1.6] | 1.6 |
| H1 | leading-[1.2] | 1.2 |
| H2 | leading-[1.2] | 1.2 |
| H3 | leading-[1.3] | 1.3 |
| H4 | leading-[1.3] | 1.3 |
| H5 | leading-[1.4] | 1.4 |
| H6 | leading-[1.4] | 1.4 |
Customize typography
Update the heading and body utilities in src/assets/css/input.css, then run npm run watch to regenerate output.css.