Skip to main content

Typography

Nectarblocks provides a global typography system that allows you to share a set of font rules throughout your WordPress website.

  1. Consistency: Define global font rules to ensure a harmonious and consistent visual identity across different elements of your website.

  2. Efficiency: Modify a global font rule, and the update seamlessly propagates across the entire site. This efficiency proves invaluable, particularly for expansive websites with numerous pages and sections.

  3. Ease of Customization: Effortlessly experiment with different fonts, refining your website's aesthetic without the need to manually update each individual element.

Font Rule Types​

  1. Core These are fonts which are provided by Nectarblocks and cannot be deleted. They cover all the common HTML elements.
  2. Custom These are font rules which you have added. You can add as many as needed and name them whatever you want for ease of use. Any rule in this list can be deleted freely.

Font Rule Properties​

When you click on any font rule, you'll get a popover with the following properties you can configure:

Nectarblocks WordPress Global Typography Settings
Nectarblocks Global Typography

Fluid & Responsive Sizing​

Global font rules don't have to be a single fixed size — they can scale with the viewport and adapt per device.

  • Min / Max Each font rule's size accepts an optional Min and Max value. Nectarblocks outputs a CSS clamp() so the text scales between those bounds and never becomes too small on phones or oversized on large screens.
  • Fluid root scaling The Root (HTML) font rule offers a Base size (px or rem) plus a Scale value (in vw) — for example a base of 16px with a 0.5vw scale. Because most sizes are defined relative to the root, scaling the root fluidly scales your whole site's typography in proportion as the screen size changes.
  • Per device Size, scale, min and max can each be set separately for desktop, tablet and mobile.

Organizing & Editing Font Rules​

  • Drag to reorder Rearrange your custom font rules by dragging them into the order you prefer.
  • Bulk delete Hold Shift and click to select multiple font rules, then delete them all at once.

Utilizing Global Font Rules​

Any Nectar blocks which involve editing text will have the ability to make use of Global Font Rules. When editing a block, you'll see a field labeled "Font Style". This option will allow you to select a font rule from the Global Typography.

In the above video, we edit the font rule assigned to a Text Block. We then change the font rule within the Global Settings to show the text block being updated from the new rule. Finally, we create a custom Font Rule and assign it to the block.

Deletion of Font Rules​

When you delete a Custom Global Font Rule, you will have the option to set the value for that rule to permanently point to another font rule that is part of the Core Global Font Rules.

Deletion of a Global Font Rule will affect every page that had that has elements with that rule selected.