Customizing Typography

Typography shapes how your content feels before visitors even read a single word. Leenkies gives you control over two font slots -- one for headings and one for body text -- along with adjustable base font size and line height. These settings let you dial in the exact typographic personality you want, from corporate and authoritative to friendly and approachable.

Heading Fonts

The heading font is used for all headings on your pages, including page titles, section headers, product names, and block titles. Leenkies offers seven carefully selected heading fonts:

1. Space Grotesk -- A geometric sans-serif with a modern, technical feel. Clean and distinctive with slightly squared letterforms. Great for tech, SaaS, and contemporary brands.
2. Sora -- A versatile sans-serif with a balanced, neutral personality. Slightly rounded terminals give it a friendly but professional character. Works well across many brand types.
3. Outfit -- A geometric sans-serif with wide, open letterforms. It feels spacious and modern, making it ideal for clean, minimalist designs.
4. Montserrat -- A classic geometric sans-serif inspired by urban signage. Bold weights are especially impactful for headings. One of the most popular web fonts for good reason.
5. Urbanist -- A low-contrast geometric sans-serif with a sleek, polished feel. Its uniform stroke width creates a refined, contemporary look.
6. Raleway -- An elegant sans-serif with thin-to-bold weight range. Its slightly Art Deco character lends sophistication and style, particularly in thinner weights.
7. Manrope -- A semi-rounded sans-serif with excellent readability. It strikes a balance between geometric precision and humanist warmth.

Body Fonts

The body font is used for paragraph text, descriptions, labels, form fields, and all other non-heading content. Readability is the primary concern here. Leenkies offers seven body fonts optimized for screen reading:

1. Inter -- One of the most popular fonts for digital interfaces. Designed specifically for computer screens with exceptional clarity at small sizes. A safe, universally appealing choice.
2. DM Sans -- A low-contrast geometric sans-serif with slightly rounded forms. It feels modern and approachable while maintaining excellent readability in long passages.
3. Plus Jakarta Sans -- A geometric sans-serif with a contemporary feel and generous letter spacing. Its open counters make it highly legible even at smaller sizes.
4. Work Sans -- A grotesque sans-serif optimized for screen use. It has a straightforward, no-nonsense character that works well for professional and editorial content.
5. IBM Plex Sans -- A corporate-grade sans-serif designed by IBM. It projects reliability and professionalism with its precise, engineered letterforms.
6. Source Sans 3 -- Adobe's first open-source font family. It is clean, neutral, and highly readable, making it a versatile choice for any type of content.
7. Nunito Sans -- A well-balanced sans-serif with rounded terminals. It has a friendly, warm personality that makes body text feel approachable and inviting.

Changing Fonts

To change your heading or body font:

1. Open the Theme tab in your page editor.
2. Scroll to the Typography section.
3. Click the Heading Font dropdown to see all seven heading font options. Each option shows a preview of the font name rendered in that font so you can see how it looks before selecting it.
4. Click the Body Font dropdown to browse the seven body font options.
5. Select the fonts you want. The live preview on the right updates immediately to show how your actual page content looks with the new fonts.
6. Click Save when you are satisfied.

Base Font Size

The base font size controls the default text size for body content across your pages. All other text sizes (headings, small text, labels) scale proportionally from this base value.

• Range: 12px to 24px
• Default: 16px
• Adjustment: Use the slider to increase or decrease the base size. Moving right increases the size; moving left decreases it.

A base size of 14-16px is standard for most websites and offers a good balance between readability and content density. Increase to 18-20px if your audience skews older or if you want a more editorial, spacious feel. Sizes below 14px can strain readability on mobile devices, so use smaller values with caution.

Line Height

Line height (also called leading) controls the vertical spacing between lines of text. Proper line height is critical for readability, especially in longer text passages like product descriptions and blog-style content.

Adjusting line height works in tandem with your base font size. Larger font sizes generally benefit from slightly tighter line height ratios, while smaller font sizes need more generous spacing to remain comfortable to read.

Use the line height slider in the Typography section to adjust this value. The live preview reflects changes immediately so you can fine-tune the spacing with your actual content visible.

Tips for Font Pairing

Choosing two fonts that work well together is one of the most impactful design decisions you can make. Here are guidelines for successful pairings:

• Contrast heading and body fonts. Pair a geometric heading font (like Space Grotesk or Outfit) with a humanist body font (like Inter or Nunito Sans). The contrast creates visual interest while maintaining readability.
• Avoid pairing fonts that are too similar. If your heading and body fonts look nearly identical, the distinction between headings and body text is lost. Choose fonts with noticeably different characteristics.
• When in doubt, use Inter for body. Inter was designed specifically for screen interfaces and pairs well with virtually every heading font in the Leenkies collection.
• Match the font personality to your brand. A coaching business might pair Sora (warm, approachable headings) with Nunito Sans (friendly body text), while a SaaS product might use Space Grotesk (technical headings) with IBM Plex Sans (precise body text).
• Test at multiple sizes. Some fonts look great at large heading sizes but lose their character at smaller body sizes, and vice versa. Always preview with real content at both heading and paragraph sizes.

Pro Tip: If you are unsure where to start, apply a preset theme and examine its font pairing. The presets use curated combinations that are proven to work well together. You can then swap just one of the two fonts if you want to put your own spin on it.