Jayson

index

01 DESIGN SYSTEM

Typography

Typography as a vital element of user experience that shapes interactions with products. This Index Design System serves as an evolving language. I've developed a typographic system that balances aesthetics with usability, focusing on legibility, rhythm, and consistency.

Overview

Typography goes beyond just text on a screen; it affects how users interact with a product. I created a typographic system that works well on different devices, adapts to various contexts, and clearly communicates messages. It focuses on being responsive, expressive, and consistent.

In today’s world of multiple devices, typography should not only look good but also feel easy to use. It should guide the reader's eye and adjust to screen sizes, user preferences, and content layout. This is my approach to typography.

Overview

Typographic principles

My typographic foundation was designed with three core goals in mind:

Scalability: Whether a user is on a small mobile screen or a large monitor, the typography should adjust effortlessly—preserving structure, hierarchy, and comfort.
Legibility: Every choice, from font size to line height, is driven by readability and clarity.
Consistency through fluidity: By blending modular scales with dynamic calculations, I ensure consistency across breakpoints—without feeling rigid or formulaic.

Typography should not constrain design—it should elevate it. That’s why I embraced both fluid scaling and a token-based architecture that integrates seamlessly across design tools and codebases.

Typographic principles

My typographic foundation was designed with three core goals in mind:

Scalability: Whether a user is on a small mobile screen or a large monitor, the typography should adjust effortlessly—preserving structure, hierarchy, and comfort.
Legibility: Every choice, from font size to line height, is driven by readability and clarity.
Consistency through fluidity: By blending modular scales with dynamic calculations, I ensure consistency across breakpoints—without feeling rigid or formulaic.

Typographic principles

My typographic foundation was designed with three core goals in mind:

Scalability: Whether a user is on a small mobile screen or a large monitor, the typography should adjust effortlessly—preserving structure, hierarchy, and comfort.
Legibility: Every choice, from font size to line height, is driven by readability and clarity.
Consistency through fluidity: By blending modular scales with dynamic calculations, I ensure consistency across breakpoints—without feeling rigid or formulaic.

Typographic principles

My typographic foundation was designed with three core goals in mind:

Scalability: Whether a user is on a small mobile screen or a large monitor, the typography should adjust effortlessly—preserving structure, hierarchy, and comfort.
Legibility: Every choice, from font size to line height, is driven by readability and clarity.
Consistency through fluidity: By blending modular scales with dynamic calculations, I ensure consistency across breakpoints—without feeling rigid or formulaic.

Modular Scale: Minor Third + Perfect Fourth

To build a sense of rhythm across viewports, I designed the type system using modular scales—specifically:

Mobile: I use a minor third scale (1.2) to keep type sizes compact, efficient, and tightly structured. It’s ideal for mobile UIs, where vertical space is limited and readability must remain high.
Tablet and Desktop: I apply a perfect fourth scale (1.333). This creates a more generous, elegant rhythm that allows for better visual hierarchy and longer reading comfort on larger screens.

By combining both scales, I can tailor the typographic rhythm based on context—without fragmenting the system.

Dynamic Root Font Size (Fluid :root Scaling)

One of the most significant enhancements I implemented is dynamic root font sizing. Rather than defining a static font-size (like 16px) in the html or :root element, I calculate it in real-time based on the viewport's width and height:

:root {
  font-size: calc(0.625vw + 0.625vh);
}

This formula blends the viewport width (vw) and height (vh) to create a responsive base font size, allowing every rem-based value in the system to scale with the screen.

Why this matters:

It removes the need for hard breakpoints for typography.
The entire type system scales organically, preserving hierarchy.
Users who adjust their default browser settings still experience a consistent, harmonious interface.
It unlocks true fluid type across all devices.

This also plays nicely with component padding, spacing, and layout since everything in my system is rem-based.

Modular Scale: Minor Third + Perfect Fourth

To build a sense of rhythm across viewports, I designed the type system using modular scales—specifically:

Mobile: I use a minor third scale (1.2) to keep type sizes compact, efficient, and tightly structured. It’s ideal for mobile UIs, where vertical space is limited and readability must remain high.
Tablet and Desktop: I apply a perfect fourth scale (1.333). This creates a more generous, elegant rhythm that allows for better visual hierarchy and longer reading comfort on larger screens.

By combining both scales, I can tailor the typographic rhythm based on context—without fragmenting the system.

Dynamic Root Font Size (Fluid :root Scaling)

:root {
  font-size: calc(0.625vw + 0.625vh);
}

This formula blends the viewport width (vw) and height (vh) to create a responsive base font size, allowing every rem-based value in the system to scale with the screen.

Why this matters:

It removes the need for hard breakpoints for typography.
The entire type system scales organically, preserving hierarchy.
Users who adjust their default browser settings still experience a consistent, harmonious interface.
It unlocks true fluid type across all devices.

This also plays nicely with component padding, spacing, and layout since everything in my system is rem-based.

Modular Scale: Minor Third + Perfect Fourth

To build a sense of rhythm across viewports, I designed the type system using modular scales—specifically:

Mobile: I use a minor third scale (1.2) to keep type sizes compact, efficient, and tightly structured. It’s ideal for mobile UIs, where vertical space is limited and readability must remain high.
Tablet and Desktop: I apply a perfect fourth scale (1.333). This creates a more generous, elegant rhythm that allows for better visual hierarchy and longer reading comfort on larger screens.

By combining both scales, I can tailor the typographic rhythm based on context—without fragmenting the system.

Dynamic Root Font Size (Fluid :root Scaling)

:root {
  font-size: calc(0.625vw + 0.625vh);
}

This formula blends the viewport width (vw) and height (vh) to create a responsive base font size, allowing every rem-based value in the system to scale with the screen.

Why this matters:

It removes the need for hard breakpoints for typography.
The entire type system scales organically, preserving hierarchy.
Users who adjust their default browser settings still experience a consistent, harmonious interface.
It unlocks true fluid type across all devices.

This also plays nicely with component padding, spacing, and layout since everything in my system is rem-based.

Modular Scale: Minor Third + Perfect Fourth

To build a sense of rhythm across viewports, I designed the type system using modular scales—specifically:

Mobile: I use a minor third scale (1.2) to keep type sizes compact, efficient, and tightly structured. It’s ideal for mobile UIs, where vertical space is limited and readability must remain high.
Tablet and Desktop: I apply a perfect fourth scale (1.333). This creates a more generous, elegant rhythm that allows for better visual hierarchy and longer reading comfort on larger screens.

By combining both scales, I can tailor the typographic rhythm based on context—without fragmenting the system.

Dynamic Root Font Size (Fluid :root Scaling)

:root {
  font-size: calc(0.625vw + 0.625vh);
}

This formula blends the viewport width (vw) and height (vh) to create a responsive base font size, allowing every rem-based value in the system to scale with the screen.

Why this matters:

It removes the need for hard breakpoints for typography.
The entire type system scales organically, preserving hierarchy.
Users who adjust their default browser settings still experience a consistent, harmonious interface.
It unlocks true fluid type across all devices.

This also plays nicely with component padding, spacing, and layout since everything in my system is rem-based.

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Heading H3 - Content 05

[S01C05] @design-systems To foster an intuitive and consistent visual hierarchy, I employed a modular type scale using the "Perfect Fourth" ratio of 1.33. This carefully chosen scale facilitates noticeable yet harmonious increments, contributing to a coherent visual rhythm:

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Heading H3 - Content 05

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Heading H3 - Content 05

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Heading H3 - Content 05

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Overview

Typographic principles

Modular Scale

Dynamic Root Font Size

Text Styles and Typography Tokens

Text styles and typography tokens focus on font features like family, size, and line height. In design tools like Figma, you'll see these styles visually, while coding uses typography tokens. It's best to use heading, body, and code text styles in your designs since they come with optimized spacing and work well with other design elements like color.

Rem Units in Tokens

Typography tokens use rem units instead of fixed pixel values, calculated by multiplying the rem unit by the browser's default size of 16px (1rem = 16px). Unlike pixels, rem units adjust based on the root element size (html), allowing for flexible text sizing that enhances responsiveness and accessibility.

Text Styles and Typography Tokens

Rem Units in Tokens

Text Styles and Typography Tokens

Rem Units in Tokens

Text Styles and Typography Tokens

Rem Units in Tokens

Headings

Use headings for page titles or subheadings; they're designed to stand out and help readers easily understand the content structure.

Body

Body text serves as the main content. It typically follows headings and may stand alone in components, featuring added spacing for better readability and flow.

Headings

Use headings for page titles or subheadings; they're designed to stand out and help readers easily understand the content structure.

Body

Body text serves as the main content. It typically follows headings and may stand alone in components, featuring added spacing for better readability and flow.

Headings

Use headings for page titles or subheadings; they're designed to stand out and help readers easily understand the content structure.

Body

Body text serves as the main content. It typically follows headings and may stand alone in components, featuring added spacing for better readability and flow.

Headings

Use headings for page titles or subheadings; they're designed to stand out and help readers easily understand the content structure.

Body

Body text serves as the main content. It typically follows headings and may stand alone in components, featuring added spacing for better readability and flow.

Typography 3B

Vestibulum sem condimentum nullam mi natoque convallis viverra vitae, hac primis erat est ullamcorper malesuada feugiat suspendisse, magna fames hendrerit sagittis velit tincidunt montes.

Typography 3B

Vestibulum sem condimentum nullam mi natoque convallis viverra vitae, hac primis erat est ullamcorper malesuada feugiat suspendisse, magna fames hendrerit sagittis velit tincidunt montes.

Typography 3B

Vestibulum sem condimentum nullam mi natoque convallis viverra vitae, hac primis erat est ullamcorper malesuada feugiat suspendisse, magna fames hendrerit sagittis velit tincidunt montes.

Typography 3B

Vestibulum sem condimentum nullam mi natoque convallis viverra vitae, hac primis erat est ullamcorper malesuada feugiat suspendisse, magna fames hendrerit sagittis velit tincidunt montes.

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Dynamic Root Font Size

Instead of a fixed html { font-size }, I calculate it on the fly based on screen dimensions using this JavaScript snippet:

<script>
  (function() {
    const BREAKPOINTS = [
      { width:  480, height:  667 },
      { width:  768, height: 1024 },
      { width: 1024, height:  768 },
      { width: 1280, height:  800 },
      { width: 1536, height:  864 },
      { width: 1920, height: 1080 }
    ];
    const INCREMENT = 0.0125;
    const BASE_FONT = 16;

    function getBreakpoint() {
      const w = window.innerWidth;
      return BREAKPOINTS.find(bp => w <= bp.width) || BREAKPOINTS[BREAKPOINTS.length - 1];
    }

    function getFontRatio() {
      const { width: bpW, height: bpH } = getBreakpoint();
      const hRatio = window.innerWidth / bpW;
      const vRatio = window.innerHeight / bpH;
      const rawRatio = Math.min(hRatio, vRatio);
      const steps = Math.round(rawRatio / INCREMENT);
      return steps * INCREMENT;
    }

    function updateViewportUnits() {
      const ratio = getFontRatio();
      const root = document.documentElement;
      const scaledFs = ratio * BASE_FONT;

      root.style.setProperty('font-size', `${scaledFs}px`);
      root.style.setProperty('--ra', `${ratio}px`);
      root.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
      root.style.setProperty('--vw', `${window.innerWidth * 0.01}px`);
      root.style.transition = "var(--sp)";
    }

    updateViewportUnits();
    let resizeId;
    window.addEventListener('resize', () => {
      if (resizeId) cancelAnimationFrame(resizeId);
      resizeId = requestAnimationFrame(updateViewportUnits);
    });
  })();
</script>

Heading H3 - Content 05

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Heading H3 - Content 05

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Heading H3 - Content 05

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Heading H3 - Content 05

Type Style	Scale Step	Size (px)
Caption / Fine Print	–1	~12px
Body Text (Base)	0	16px
Small Heading (H6)	+1	~21px
Section Subtitle (H5)	+2	~28px
Section Heading (H4)	+3	~37px
Page Subtitle (H3)	+4	~50px
Page Heading (H2)	+5	~66px
Display Title (H1)	+6	~88px

This modular scale creates a seamless and intuitive hierarchy, guiding users naturally through content, with each step clearly defined and visually distinct.

Typography 1B

Typography 2B

Typography 3B

03 Section Title [H2]

Type Styles