Customization
Typography
KitFront includes responsive typography variables for body text, headings, and line heights. These values are defined inside assets/css/core.css.
Body Font Sizes
Body text automatically scales across different screen sizes to maintain readability on desktop, tablet, and mobile devices.
--kf-font-body-large-desktop18px--kf-font-body-desktop18px--kf-font-body-tablet16px--kf-font-body-mobile16pxHeading Sizes
All headings are responsive by default. KitFront uses larger headings on wide screens and automatically reduces their size on smaller devices.
| Heading | Large Desktop | Desktop | Tablet | Mobile |
|---|---|---|---|---|
| H1 | 68px | 62px | 52px | 42px |
| H2 | 54px | 48px | 40px | 34px |
| H3 | 42px | 36px | 32px | 28px |
| H4 | 34px | 30px | 28px | 26px |
| H5 | 28px | 26px | 24px | 22px |
| H6 | 22px | 22px | 20px | 20px |
Line Heights
Line height controls the spacing between lines of text. Body text uses relaxed spacing for readability, while headings use tighter spacing for visual impact.
--kf-line-height-body1.6--kf-line-height-h11.1--kf-line-height-h21.1--kf-line-height-h31.2--kf-line-height-h41.2--kf-line-height-h51.3--kf-line-height-h61.3Using Your Own Typography
You can update any typography variable inside assets/css/core.cssto match your project's visual style. Once updated, all KitFront sections will automatically use the new typography scale.