2.1.8. Scaling

Understanding Scaling Units for Responsive Web Design

Modern websites must work across an enormous range of devices - from small mobile phones to ultra-wide desktop monitors. To make this possible, browsers and developers rely on scaling units. Understanding how these units work is essential for building layouts that are responsive, accessible, and visually consistent.

In this tutorial, we’ll cover:

• How to enable or disable the scaling option
• How scaling works
• How to set sizes correctly
• How to control the font sizes

1. How to Enable or Disable the Scaling Option

To enable scaling across different screen sizes, navigate to:

• Dashboard > Appearance > Customize > StyleCloud Settings

From there, you can turn the scaling option on or off depending on your project needs.

2.1. How Scaling Works

When a browser loads a page, it determines two key factors that affect layout and sizing:

2.1.1. Viewport Size

The viewport is the visible area of the browser window (phone, tablet, desktop, or resized window). Two common viewport-based units are:

• vw – viewport width
• vh – viewport height

Their values are defined as:

• 1vw = 1% of the browser window width
• 1vh = 1% of the browser window height

As the browser window changes size, the values of vw and vh change dynamically.

On a standard desktop screen of 1920 × 1080px:

• 1vw = (1% x 1920px) / 100% = 19.2px
• 1vh = (1% x 1080px) / 100% = 10.8px

If the browser window is resized to 1400 × 700px:

• 1vw = (1% x 1400px) / 100% = 14px
• 1vh = (1% x 700px) / 100% = 7px

Each time the window is resized, new VW and VH values are calculated. This makes viewport units dynamic and responsive by nature.

2.1.2. Root Font Size

The root font size is usually set to 16px by default, although developers can change it based on project requirements. 

This value:

• Is defined in the project’s source code
• Is not directly visible in the UI
• Is used by the browser to calculate sizes for other units (such as rem)

PX (pixels) are static.

If a paragraph is set to 32px, it will always render as 32px on all screen sizes - mobile, tablet, desktop, or ultra-wide.

REM (root em) values are calculated relative to the root font size.

2rem x Root Font Size = 2 x 16px = 32px

While this calculation is dynamic, the final rendered size is still the same across all screen sizes if the root font size never changes.

This means that PX and REM behave similarly unless the root font size itself changes.

2.2. How the Scaling Option Helps

This is where the scaling option becomes important. Instead of keeping the root font size static, StyleCloud dynamically changes the root font size based on the viewport size.

StyleCloud uses the following root font size values:

• Desktop: 1vw
• Tablet: 2vw
• Mobile: 4vw

By tying the root font size to the viewport, all rem values automatically scale with the screen size.

Let’s say you want a font size equivalent to 32px, but you want it to scale automatically.

• Convert PX to REM: 32px / 16 = 2rem
• Turn on StyleCloud autoscaling and your 2rem font will be automatically scaled up or down as follows, to keep your typography perfectly in proportion.
• On a 1920 × 1080px screen 2rem would scale up to 38.4px
• On a 1400 × 700px screen, 2rem would scale down to 28px.

The same 2rem value adapts automatically to the screen size, ensuring consistent visual proportions across devices. The layout remains nearly identical - about 99% on different screen sizes without manual adjustments.

The same principle applies to tablet and mobile screens, using their respective viewport-based root font sizes.

3. How to Set Your Sizes

When managing sizes such as:

• Font size
• Width
• Padding
• Margin
• Column or Row Gutter

we recommend using either CLAMP values (e.g., SM, MD, LG, etc) or custom REM values.

3.1. Using CLAMP Values

CLAMP values are hardcoded in the core of the theme and are based on common design standards (e.g., 24px, 32px, etc).

• They are already converted to rem
• They scale automatically
• We do not recommend changing

Simply use these predefined values as they are.

3.2. Using Custom REM Values

If the CLAMP values don’t fit your design requirements, you can define your own REM values.

To convert PX to REM:

PX / 16 = REM

For example:

24px = 24 / 16 = 1.5rem

32px = 32 / 16 = 2rem

You can also use an online PX-to-REM converter to speed up this process: https://nekocalc.com/px-to-rem-converter

4. How to control the font sizes

There are two different ways to control font sizes, and each serves a different purpose.

4.1. Font Size in the Customizer (Global Settings)

The font size option in the Customizer sets the default (global) font sizes for your site. These values act as the baseline typography used across all pages and posts.

• Can be found in Dashboard > Appearance > Customize > Colors & Fonts > Typography
• Applies site-wide
• Controls default sizes for headings, body text, and other text elements
• Best for maintaining consistent typography throughout your website

Think of this as the starting point for your design.

Additional Note:

The Font Size settings in the Customizer include an option to add custom clamp values, but we recommend not using it. For best results, use the standard font size option with REM values.

4.2. Font Size in the Block Settings (Local Overrides)

The font size option directly in a block allows you to override the global font size for that specific block only.

• Can be found directly in the Block Settings
• Applies only to the selected block
• Does not affect other content or global settings
• Useful for emphasis, design variations, or special layouts

This gives you fine-grained control when you need a specific piece of content to stand out.

4.3. How They Work Together

• If a block does not have a font size set, it uses the Customizer’s global font size.
• If a block does have a font size set, the block’s value overrides the global setting.

In short:

• Customizer = global defaults
• Block settings = individual overrides

Updated on: 23/12/2025