Typography

Typography defines the default text styles used throughout your store. It lets you create a consistent typographic hierarchy for body text, links, headings, display text, page titles, and breadcrumbs without styling each element individually.

These settings work as site-wide defaults. They are especially useful when combined with Global Fonts and Global Colors, allowing your typography system to remain consistent and easy to update.

Tip: Configure your typography hierarchy before styling individual pages. Once the defaults are in place, many elements can inherit the correct appearance automatically.

Typography

The main Typography section controls body text, links, HTML headings, and Creative Elements display text.

Typography settings
Body

Define the default appearance of regular text across the site.

Text Color
Set the default text color for the page body.
Typography
Configure the typography of body text, including the available font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing settings.
Paragraph Spacing
Set the default space below paragraphs. Available units are px, em, and vh.
Link

Set the default appearance of links and define separate styles for their normal and hover states.

Normal
Color
Set the default link color.
Typography
Configure the typography of links in their normal state.
Hover
Color
Set the color displayed when the visitor hovers over a link.
Typography
Configure the typography applied to links on hover.
Heading

Define the default typography hierarchy for HTML headings from H1 to H6. Each heading level can be styled independently.

H1 - H6
Color
Set the text color for the selected heading level.
Typography
Configure the typography for the selected heading level.
Display

Configure the Creative Elements display text styles. Display styles are available in five sizes and are useful for prominent text that needs a stronger visual presence than standard headings.

S, M, L, XL and XXL
Color
Set the text color for the selected Display size.
Typography
Configure the typography for the selected Display size.

Body text

Body typography establishes the baseline for regular text across the store. A consistent body style improves readability and prevents individual content areas from developing slightly different font sizes, weights, or spacing.

Paragraph Spacing controls the space below paragraph elements. This is useful for creating consistent vertical rhythm without manually adding margins to text widgets.

Tip: For body text, prioritize readability over decoration. Keep the font size comfortable, use sufficient line height, and make sure the text color has enough contrast against the background.

Links

Links have separate Normal and Hover styles. This allows you to create a clear visual indication when a visitor interacts with a link.

Both states include their own Color and Typography controls, so hover feedback can involve more than a color change. For example, you can add or remove text decoration on hover.

Tip: Make links visually distinguishable from surrounding text. Do not rely on a very subtle color difference alone, especially when links appear inside longer paragraphs.

Heading hierarchy

The Heading settings control the default styles of the HTML heading levels H1 through H6. Each level has its own Color and Typography controls.

A clear heading hierarchy helps visitors scan content and understand how information is organized. It also makes page building easier because the visual role of each heading level is already established.

H1
Typically used for the main title or most important heading of a page.
H2
Useful for major sections within the page.
H3 - H6
Useful for progressively deeper levels of content structure.
Important: Choose heading tags according to the structure and meaning of the content, not only according to their visual size. If you need text that looks larger without changing the document hierarchy, consider using the Display styles or styling the element separately.

Display text

Display styles provide an additional typography scale in S, M, L, XL, and XXL. Unlike H1-H6, these styles are intended primarily as visual styles rather than HTML heading levels.

They are useful for hero text, promotional messages, large titles, and other prominent text where you want a reusable visual scale without changing the semantic heading structure.

Tip: Use Heading styles to define content hierarchy and Display styles when you mainly need a particular visual scale. This gives you more flexibility without choosing an incorrect heading level simply because of its appearance.

Page Title

The Page Title section controls the appearance of page titles recognized by Creative Elements. It can target both Creative Elements page titles and the page title selector configured under Theme Style > Layout.

Theme Style Page Title
Page Title
Color
Set the default page title color.
Typography
Configure the typography of page titles.
Text Align
Align page titles to the left, center, or right independently for responsive devices.
Note: If your PrestaShop theme uses a different selector for its page titles, configure the Page Title Selector under Theme Style > Layout so the Theme Style can target it correctly.

Typography and Global Fonts

Typography and Global Fonts have different roles. Global Fonts provide reusable typography values, while Typography determines the default styling of specific types of text, such as body text, links, and headings.

For example, you can create a reusable Global Font for headings and then assign it to H1, H2, H3, and other typography settings. If that Global Font is changed later, all connected styles can follow the update.

Tip: Avoid defining the same font settings manually in many different places. Reuse Global Fonts for recurring typography styles, then use the Typography section to decide where those styles should apply.

Global styles and individual element styles

Typography settings provide defaults, but individual widgets and other elements can have their own typography settings. When a local style is explicitly defined, it can override the corresponding Theme Style value.

Important: If a heading, link, or other text does not follow your Theme Style, check whether the element has its own Color or Typography settings applied. Styles from the active PrestaShop theme or custom CSS can also affect the final appearance.

Recommended workflow

  1. Define the reusable fonts you need under Global Fonts.
  2. Choose a readable default style for Body text.
  3. Configure the Normal and Hover states of links.
  4. Create a clear visual hierarchy from H1 to H6.
  5. Configure the Display scale if your design uses large promotional or hero text.
  6. Style the Page Title and check that the correct theme selector is configured.
  7. Style the Breadcrumb so it supports the page hierarchy without competing visually with the main content.
  8. Use these defaults when building pages and only add individual typography overrides when they are genuinely needed.
Good to know: A small, consistent typography system is usually easier to maintain than many slightly different text styles. Theme Style gives you a central place to establish that system for the entire store.
© WebshopWorks - Professional PrestaShop Addons