/
INDEX
/
INDEX
/
INDEX

Style Guide

01 Section Title [H2]

01 Section Title [H2]

01 Section Title [H2]

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 05

[S01C05] 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

[S01C05] 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

[S01C05] 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

[S01C05] 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.

01 Content S01

02 Content S01

03 Content S01

04 Content S01

05 Content S01

02 Section Title [H2]

02 Section Title [H2]

02 Section Title [H2]

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 05

[S01C05] 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

[S01C05] 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

[S01C05] 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

[S01C05] 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.

Content 01 S02

Content 02 S02

Content 03 S02

Content 04 S02

Content 05 S02

03 Section Title [H2]

03 Section Title [H2]

03 Section Title [H2]

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 05

[S01C05] 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

[S01C05] 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

[S01C05] 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

[S01C05] 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.

Content 01 S03

Content 02 S03

Content 03 S03

Content 04 S03

Content 05 S03

04 Section Title [H2]

04 Section Title [H2]

04 Section Title [H2]

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 05

[S01C05] 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

[S01C05] 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

[S01C05] 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

[S01C05] 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.

Content 01 S04

Content 02 S04

Content 03 S04

Content 04 S04

Content 05 S04

05 Section Title [H2]

05 Section Title [H2]

05 Section Title [H2]

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 01

[S01C01] When tasked with building a robust typography system for our product, I sought to blend personal design intuition with proven industry practices. The goal was to create a type system that is not only visually harmonious and legible, but also flexible enough to scale across different use-cases.

As Atlassian’s design language puts it, “Typography is our system of fonts and text styles. It enhances communication, reinforces brand, and guides users’ emotions” . Keeping this philosophy in mind, I drew inspiration from leading design systems (IBM Carbon, Shopify Polaris, Atlassian) while crafting a bespoke solution tailored to our product’s needs.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 02

[S01C02] Choosing the right fonts was the cornerstone. I selected three complementary typefaces to cover headings, body text, and monospaced needs, ensuring each choice served a distinct purpose while maintaining a cohesive overall tone:

  • TT Interphases (Headings): A neo-grotesque sans-serif designed specifically for user interfaces, known for its uniform text color and static character proportions . TT Interphases has a large lowercase x-height that improves on-screen readability , making it ideal for headings that must be clear at a glance. Its neutral, squared letterforms give headings a modern, technical feel without being distracting. This font anchors the design with a crisp and consistent voice for all titles and section headers.

  • TT Neoris (Body Text): A modern grotesque typeface described as a neo-grotesque with hints of geometric shapes . TT Neoris was chosen for paragraphs and UI copy due to its versatility and legibility. It strikes a balance between character and clarity – its forms are clean and familiar, which helps long passages of text feel comfortable to read. As an “ideal sans” designed to meet modern needs , it pairs well with TT Interphases without competing for attention, allowing body content to be approachable and scannable.

  • SöhneMono (Monospace Accent): A monospaced font from the Söhne type family, which is famously “the memory of Akzidenz-Grotesk framed through the reality of Helvetica” . We use SöhneMono sparingly for code snippets, data tables, or other instances where a fixed-width font brings clarity. Its design DNA blends seamlessly with the neo-grotesques above, adding a technical flair for accent text without feeling out of place. Following best practices, using a dedicated mono font for code ensures alignment and easy differentiation (echoing Shopify Polaris’s guidance that monospace fonts be used for code and data ).

Each typeface was carefully tested in context. Together, this trio establishes a clear typographic voice: TT Interphases delivers structured, high-impact headings; TT Neoris provides friendly yet professional body text; and SöhneMono offers utility for technical detail. Consistency in using sans-serif styles across the board (grotesques for both display and text, plus a grotesque-inspired mono) means the typography feels unified, while the specialized roles of each font preserve clarity and purpose.

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 03

[S01C03] To maintain visual hierarchy and rhythm, I defined a modular type scale using a ratio of 1.33 (a “Perfect Fourth”) for sizing. In practice, a modular scale is a mathematical rule that yields harmonious type sizes by multiplying a base size by a constant factor repeatedly . Using a 1.33× factor ensures each jump in size is noticeable yet not jarring, creating a consistent progression. This ratio – approximately a 4:3 scale step – provided just the right graduation between text levels: it’s larger than the common minor third (1.2) but more subtle than the golden ratio (1.618), striking a balance between dynamic and controlled.

We set the base font size (body text) at 16px, then scaled upward and downward. (For reference, a 1.33× ratio is well-known in typography circles as a balanced scale step .) This yielded a fluid ramp of text sizes for various purposes. The table below shows the type scale in action, with approximate pixel values:

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 04

[S01C04] Establishing the type scale went hand-in-hand with defining the spacing and layout grid of the design system. Consistent typography is not only about font sizes, but also about how text elements align and space out in the interface. We adhered to an 8px base grid for spacing, a convention many systems follow for clarity and ease of use. 

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

All paddings, margins, and component dimensions are rounded to this 8px unit (with the occasional 4px half-step for fine adjustments). This decision was informed by industry best practices: for example, design systems experts often prefer 8pt increments as a balance between granularity and simplicity . An 8px grid is large enough to differentiate spacing steps clearly (avoiding the “too many subtle values” problem of smaller units ) while still being flexible.

Heading H3 - Content 05

[S01C05] 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

[S01C05] 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

[S01C05] 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

[S01C05] 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.

Content 01 S05

Content 02 S05

Content 03 S05

Content 04 S05

Content 05 S05