Based On Divi 5 Presets
KrafterTypography System
This system uses Fluid Scaling meaning your text will automatically scale between its minimum and maximum values based on the visitor's screen size. You never have to worry about a headline being too big for a phone again.
Display Text (For Maximum Impact)
- k-display large: Your "Hero" headline. Use this for the main value proposition at the very top of the page. Limit this to 5–8 words for maximum punch.
- k-display medium: Best for primary section headers on long-form landing pages. It commands attention without competing with the Hero.
- k-display small: Perfect for headers on secondary pages (About, Services) or high-impact marketing cards.
Heading Text (Structural Logic)
-
k-heading 1: Use once per page as the primary title of the content.
-
k-heading 2: Your "workhorse" for section titles. These break your page into digestible chapters.
-
k-heading 3: Sub-section headers. Use these to group features or FAQ items.
-
k-heading 4 – 6: Low-level hierarchy. Best for small widget titles, sidebar headers, or card labels.
Text (Consumption & Reading)
-
k-text large: Also known as your Lead paragraph. Place this directly under an H1 or H2 to summarize the section in 2–3 sentences.
-
k-body text (base): The default for 90% of your content. Optimized for long-form reading comfort.
-
k-text small: Use for secondary information, metadata (dates, authors), or sidebar descriptions.
-
k-text xsmall: Strictly for fine print, footer links, and legal disclaimers.
Utility Tokens
-
-
k-eyebrow: Sit this above an H2 in all-caps. Use it to categorize the section (e.g., "CASE STUDY").
-
k-subheadline: Position directly below a heading to provide immediate elaboration on a title.
-
k-badge: Status indicators (e.g., "New," "Sale"). These feature an "inline-flex" background that hugs the text perfectly.
-
k-blockquote: Use for social proof and testimonials. It features increased leading and a primary color accent to break the visual pattern of the page.
-
The "Readability" Container
For maximum conversion, never let your text span the full width of a widescreen monitor. Use the built-in KrafterPRO column constraints:
-
Main Body Paragraph: Max-width of
70ch -
Lead Paragraphs: Max-width of
80ch. -
Sidebars/Cards: Max-width of
45ch.