Skip to main content

What are Scalable Fonts

Scaling fonts for many devices

Updated over a year ago

What is Scalable Font Sizing?

Scalable Font Sizing is a way to make sure that your fonts look good on all devices, regardless of the screen size. It works by using a starting pixel size and then scaling the font up or down depending on the screen size.

How does it work?

  1. You set a Global Base Font Size for your website. This is the starting pixel size for all of your fonts.

  2. You then set a Scaled Font Size for each font. This tells the system how much larger or smaller you want that font to be compared to the Global Base Font Size.

  3. The system will adjust the actual pixel size of each font depending on the screen size it is being displayed on. This ensures that your fonts always stay in proportion and look their best.

Example

Let's say you set your Global Base Font Size to 16 pixels. You then set your Subheading Scaled Font Size to 2. This means that your subheadings will be 32 pixels (16 pixels + 16 pixels).

However, if your website is being viewed on a small phone, the system may adjust the Base Font Size down to 12 pixels. This means that your subheadings will now be 24 pixels (12 pixels + 12 pixels).

Benefits of Scalable Font Sizing

  • Your fonts will always look their best on all devices.

  • Your website will be more responsive and user-friendly.

  • You will save time and effort, as you will not need to create multiple font sizes for different devices.

How to set up Scalable Font Sizing in Zenu

  1. Go to Site Designs > Global Settings.

  2. Set your Global Base Font Size.

  3. Go to Site Designs > Elements.

  4. Create or edit a font.

  5. Set your Scaled Font Size.

Did this answer your question?