Home›Docs›Basic›Page / Font Scaling

Page / Font Scaling

Last updated: 16 days ago

Category: Basic

Increase or decrease the font size, line height, and margin sizes of the page using the num-step and fs-root variables

Page / Font Scaling16 days agoFont Family18 days agoIcon font11 days ago

Introduction

For CJK characters (Japanese, Chinese, Korean, etc.), 12px is the minimum readable font size, typically used for secondary text. 14px is the minimum body text size, while 16px and 18px are commonly used for subheadings. For Latin scripts (English, French, German, etc.), font sizes generally need to be 2px larger than CJK characters, making 2px the fundamental increment for page scaling.

CSS units fall into two categories:

Relative units (rem, em, vw, etc.)
Absolute units (px)

In this framework, fixed px units are used for:

Validation modules
Message notification modules
Flag components
Comment components
Callout notification modules

The framework adjusts overall page size by modifying:

The --_num-step variable
The :root.font-size property

This isn't simple scaling - it fundamentally changes font sizes, line heights, margins, and dimensions.

Components Using px Units

The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed.

Emily Johnson

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

num-step Variable

The --_num-step variable has global scope. Default value is 0 (14px/1.4rem body text). Setting it to 2 increases all typographic values by 2, making body text 16px (1.6rem) - the optimal reading size for Latin scripts.

For mobile devices with smaller screens, consider applying num-step only for desktop:

Here is the implementation using CSS overrides:

                      
                        /* Applies to all devices */
                        :root {
                            --_num-step:2;
                        }
                        /* Desktop only */ 
                        @media (hover:hover) {
                            :root {
                                --_num-step:2;
                            }
                        }

Certainly, we can use JavaScript methods to increase or decrease the value of this variable by clicking buttons to achieve page zoom effects.

Output
HTML
JS

```
                
                
            
```

                
                stepdec.onclick = ()=>{
                    let styles = orca.style(document.documentElement),
                        value = parseFloat(styles.getPropertyValue('--_num-step')) || 0;
                    value -= 2;
                    document.documentElement.style.setProperty('--_num-step', Math.max(value,0));
                }
                stepinc.onclick = ()=>{
                    let styles = orca.style(document.documentElement),
                        value = parseFloat(styles.getPropertyValue('--_num-step')) || 0;
                    value += 2;
                    document.documentElement.style.setProperty('--_num-step', Math.max(value,0));
                }
                stepback.onclick = ()=>{
                    document.documentElement.style.setProperty('--_num-step', 0);
                }

fs-root Variable

This framework primarily uses rem units. The root font-size (default: var(--_fs-root)) controls overall dimensions but doesn't affect px-based elements like borders or callout components.

When font-size=10px, body text is 14px. At 11.43px (16/1.4), body text becomes 16px.

CSS overrides can use either property:

                      
                        /* Applies to all devices */
                        :root {
                            /* font-size:11.43px; */
                            --_fs-root:11.43px;
                        }
                       /* Desktop only */
                        @media (hover:hover) {
                            :root {
                                //font-size:11.43;
                                --_fs-root:11.43px;
                            }
                        }

Certainly, we can use JavaScript methods to increase or decrease the value of this variable by clicking buttons to achieve page zoom effects.

Output
HTML
JS

```
                
                
            
```

                
                let fsRoot = orca.style(document.documentElement).getPropertyValue('--_fs-root');
                rootback.onclick = ()=>{
                    document.documentElement.style.setProperty('font-size', fsRoot);
                }
                root18px.onclick = ()=>{
                    document.documentElement.style.setProperty('font-size', 'calc(18px/1.4)');
                }
                root16px.onclick = ()=>{
                    document.documentElement.style.setProperty('font-size', 'calc(16px/1.4)');
                }

Global Scaling

The simplest scaling method uses transform.scale or the scale property on the html element. However, this may create scrollbars and thicken 1px borders.

Output
HTML
JS

```
                
                
            
```

                
                scaleback.onclick = ()=>{
                     document.documentElement.style.setProperty('scale', '1');
                }
                scale18px.onclick = ()=>{
                     document.documentElement.style.setProperty('scale', '1.29');
                }
                scale16px.onclick = ()=>{
                    document.documentElement.style.setProperty('scale', '11.43');
                }

Scrollable Container

16 days ago

CSS Poster