The Typography section allows you to control the fonts, sizes, spacing, and alignment across your entire website. This ensures your design looks professional, consistent, and easy to read.
Body Typography #
What it does: Defines the main text style used across your site (paragraphs, normal text, etc.).
Options: #
- Font Family – Choose from available Google Fonts or system fonts.
- Font Weight & Style – Adjust weight (e.g., 400 Regular, 600 Semi-Bold, etc.).
- Font Size – Set the base size in pixels (e.g., 16px for normal text).
- Line Height – Adjust spacing between lines for readability (e.g., 1.5–1.8).
- Letter Spacing – Increase or decrease the space between characters.
- Text Align – Align text (left, center, right, justified).
Tip: Keep body text between 15–18px for best readability.
Navigation Typography #
What it does: Controls the font settings for your site’s main menu/navigation items.
Options: #
- Font Family – Select a font for navigation links.
- Font Weight & Style – Choose thickness or italics if needed.
- Font Size – Adjust menu text size.
- Line Height – Control vertical spacing in navigation.
- Letter Spacing – Add spacing for a clean, modern look.
- Text Transform – Convert text to uppercase, lowercase, or capitalize.
Tip: Navigation fonts are usually bold and slightly larger to stand out.
Heading Fonts (H1–H6) #
What it does: Defines fonts for all heading tags (H1, H2, H3, etc.), used in titles and section headings.
Options: #
- Font Family – Choose a distinct font to create hierarchy.
- Font Weight & Style – Adjust boldness for emphasis.
- Letter Spacing – Space out characters for modern designs.
- Text Align – Align headings (left, center, right).
- Margin Top & Bottom – Add spacing above/below headings.
Tip: Use a different font for headings than the body for better contrast and style.
Best Practices #
- Use no more than 2–3 fonts across your site (one for body, one for headings, one optional for navigation).
- Stick to Google Fonts for performance and easy integration.
- Always check typography on mobile devices to ensure readability.
