> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.stylecloud.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](#3-1-how-to-enable-or-disable-the-scaling-option)
* [How scaling works](#3-21-how-scaling-works)
* [How to set sizes correctly](#3-3-how-to-set-your-sizes)
* [How to control the font sizes](#3-4-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.


![Enable/Disable Scaling](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/sc-plugin-scaling-1_1v0rft3.png)

---

### 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

${color}[#ff0000](Each time the window is resized, new )${color}[#ff0000](**VW**)${color}[#ff0000]( and )${color}[#ff0000](**VH**)${color}[#ff0000]( 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.

${color}[#ff0000](This means that )${color}[#ff0000](**PX**)${color}[#ff0000]( and )${color}[#ff0000](**REM**)${color}[#ff0000]( behave similarly unless the )${color}[#ff0000](**root font size**)${color}[#ff0000]( 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.

${color}[#ff0000](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.


![Using CLAMP Values](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/sc-plugin-scaling-2_4srvhc.png)

---


**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](https://nekocalc.com/px-to-rem-converter)


![Using REM Values](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/sc-plugin-scaling-3_my5e9m.png)
---

### 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.


![Font Size in the Customizer](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/sc-fonts-1_yyohzw.png)
---

**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.

![Avoid the Customizer CLAMP option](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/sc-fonts-3_z9pin2.png)


---

**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.


![Font Size in the Block Settings](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/sc-fonts-2_50epzb.png)

---

**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**