Typography System

The NETWRIX project uses two primary typefaces that complement each other to create a modern, professional, and accessible typography system.

Location: src/scss/framework/_var/_vars.scss and src/scss/framework/foundation/font/

Font Families

Primary Font - Hubot Sans

Font Name: Hubot Sans

Variable: $type-a
Usage: Headings, titles, large display text, hero sections
Characteristics: Modern, geometric, excellent for large sizes
Fallbacks: "Hubot Sans", "HubotSans-fallback", "Courier New", monospace

$type-a: "Hubot Sans", "HubotSans-fallback", "Courier New", monospace;

Secondary Font - Syne

Font Name: Syne

Variable: $type-b
Usage: Body text, paragraphs, small text, UI elements
Characteristics: Clean, readable, optimized for long-form content
Fallbacks: "Syne", "Syne-fallback", "Trebuchet MS", "Verdana", sans-serif

$type-b: "Syne", "Syne-fallback", "Trebuchet MS", "Verdana", sans-serif;

Font Files

Location: public/fonts/

File Structure:

public/fonts/
├── HubotSans/
│   ├── HubotSans-Regular.woff2
│   ├── HubotSans-Medium.woff2
│   ├── HubotSans-Bold.woff2
│   └── ... (various weights)
└── Syne/
    ├── Syne-Regular.woff2
    ├── Syne-Medium.woff2
    ├── Syne-Bold.woff2
    └── ... (various weights)

Font Loading

Font faces are defined in src/scss/framework/foundation/font/_font-face.scss using @font-face rules with optimized loading strategies.

Font Face Definition:

// Example pattern (actual definitions in _font-face.scss)
@font-face {
  font-family: 'Hubot Sans';
  src: url('/fonts/HubotSans/HubotSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('/fonts/Syne/Syne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Loading Strategy:

Uses font-display: swap to prevent invisible text during font loading
WOFF2 format for optimal compression and browser support
Fallback fonts ensure text remains readable during loading

Typography Scale

The typography system uses 7 font tokens (f—font-a through f—font-g) that provide a consistent scale across the application. Each token is fully responsive.

Location: src/scss/framework/foundation/font/_make-font.scss

Font A - Extra Large Display

Desktop: 4.375rem (70px)
Tablets: 2.5rem (40px)
Mobile: 2rem (32px)
Font Family: Hubot Sans
Line Height: 1.1 (desktop), 1.2 (responsive)
Usage: Main hero headings, primary page titles

SCSS Mixin:

@mixin make-font-a($weight: 400) {
    font-family: $type-a;
    font-weight: $weight;
    line-height: 1.1;
    font-size: 4.375rem;

    @media all and ($viewport-type: $tablets) {
        line-height: 1.2;
        font-size: 2.5rem;
    }

    @media all and ($viewport-type: $mobile) {
        font-size: 2rem;
    }
}

Font B - Large Heading

Desktop: 2.5rem (40px)
Tablets: 2rem (32px)
Mobile: 1.6rem (25.6px)
Font Family: Hubot Sans
Line Height: 1.2
Usage: Section headings, secondary hero titles

SCSS Mixin:

@mixin make-font-b($weight: 400) {
    font-family: $type-a;
    font-weight: $weight;
    line-height: 1.2;
    font-size: 2.5rem;

    @media all and ($viewport-type: $tablets) {
        font-size: 2rem;
    }

    @media all and ($viewport-type: $mobile) {
        font-size: 1.6rem;
    }
}

Font C - Medium Heading

Desktop: 1.5rem (24px)
Tablets: 1.375rem (22px)
Mobile: 1.1rem (17.6px)
Font Family: Hubot Sans
Line Height: 1.25
Usage: Card titles, subsection headings

SCSS Mixin:

@mixin make-font-c($weight: 400) {
    font-family: $type-a;
    font-weight: $weight;
    line-height: 1.25;
    font-size: 1.5rem;

    @media all and ($viewport-type: $tablets) {
        font-size: 1.375rem;
    }

    @media all and ($viewport-type: $mobile) {
        font-size: 1.1rem;
    }
}

Font D - Small Heading

Desktop: 1.3125rem (21px)
Tablets: 1.25rem (20px)
Mobile: 1rem (16px)
Font Family: Hubot Sans
Line Height: 1.3
Usage: Small headings, prominent labels

SCSS Mixin:

@mixin make-font-d($weight: 400) {
    font-family: $type-a;
    font-weight: $weight;
    line-height: 1.3;
    font-size: 1.3125rem;

    @media all and ($viewport-type: $tablets) {
        font-size: 1.25rem;
    }

    @media all and ($viewport-type: $mobile) {
        font-size: 1rem;
    }
}

Font E - Large Body

Desktop: 1.125rem (18px)
Mobile: 1rem (16px)
Font Family: Syne
Font Weight: 500
Line Height: 1.4
Usage: Lead paragraphs, introductory text, important body text

SCSS Mixin:

@mixin make-font-e($weight: 500) {
    font-family: $type-b;
    font-weight: $weight;
    line-height: 1.4;
    font-size: 1.125rem;

    @media all and ($viewport-type: $mobile) {
        font-size: 1rem;
    }
}

Font F - Regular Body

Desktop: 1rem (16px)
Mobile: 0.9rem (14.4px)
Font Family: Syne
Line Height: 1.4
Usage: Standard body text, paragraphs, main content

SCSS Mixin:

@mixin make-font-f($weight: 400) {
    font-family: $type-b;
    font-weight: $weight;
    line-height: 1.4;
    font-size: 1rem;

    @media all and ($viewport-type: $mobile) {
        font-size: 0.9rem;
    }
}

Font G - Small Text

Size: 0.75rem (12px) - same across all breakpoints
Font Family: Syne
Line Height: 1.4
Usage: Captions, fine print, metadata, labels

SCSS Mixin:

@mixin make-font-g($weight: 400) {
    font-family: $type-b;
    font-weight: $weight;
    line-height: 1.4;
    font-size: 0.75rem;
}

Typography Usage Examples

Using Utility Classes

HTML Examples:

<!-- Extra large display heading (Font A) -->
<h1 class="f--font-a">Transform Your Security Posture</h1>

<!-- Large heading (Font B) -->
<h2 class="f--font-b">Key Features</h2>

<!-- Medium heading (Font C) -->
<h3 class="f--font-c">Real-Time Threat Detection</h3>

<!-- Small heading (Font D) -->
<h4 class="f--font-d">Advanced Analytics</h4>

<!-- Large body text (Font E) -->
<p class="f--font-e">
  Discover how NETWRIX helps organizations secure their critical data
  with enterprise-grade solutions.
</p>

<!-- Regular body text (Font F) -->
<p class="f--font-f">
  Our platform provides comprehensive visibility across your entire
  IT infrastructure, enabling proactive security measures.
</p>

<!-- Small text (Font G) -->
<small class="f--font-g">Last updated: November 17, 2025</small>

Using SCSS Mixins

You can also use typography mixins directly in your component styles for more control:

@use "@scssFoundation/foundation.scss" as *;
@use "@scssUtilities/utilities.scss" as *;

.c--my-custom-heading {
  @extend .f--font-a;         // Extend font-a
  @extend .u--font-bold;      // Extend font-bold
  color: $color-a;
  margin-bottom: $measure * 4;
}

.c--my-custom-paragraph {
  @extend .f--font-f;         // Extend font-f
  color: $color-f;
}

.c--my-hero-title {
  @extend .f--font-b;         // Extend font-b
  @extend .u--font-semibold;  // Extend font-semibold

  // You can add custom overrides if needed (only if necessary)
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Typography Best Practices

Do’s ✅

✅ Use .f--font-* utility classes for consistent typography
✅ Use Hubot Sans ($type-a) for headings and display text
✅ Use Syne ($type-b) for body text and UI elements
✅ Let the responsive scaling work automatically (don’t override breakpoints unless absolutely necessary)
✅ Use appropriate font weights utilities (400 for regular, 500 for medium, 600-700 for bold)
✅ Reference Figma to verify which font token to use for each element

Don’ts ❌

❌ Don’t use arbitrary font sizes like font-size: 23px - always use the defined font tokens
❌ Don’t mix font families randomly (headings should use Hubot Sans, body should use Syne)
❌ Don’t create new font sizes without consulting the design team
❌ Don’t override line-heights unless there’s a specific design requirement
❌ Don’t forget to test responsive breakpoints to ensure text remains readable

Common Patterns

Hero Section Typography

<section class="u--pt-10 u--pb-10">
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-8">
        <h1 class="f--font-a f--color-a">Secure Your Enterprise</h1>
        <p class="f--font-e f--color-h">
          Enterprise-grade security solutions for modern organizations.
        </p>
      </div>
    </div>
  </div>
</section>

Content Section Typography

<section class="u--pt-7 u--pb-7">
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-10">
        <h2 class="f--font-b">Features Overview</h2>
        <h3 class="f--font-c">Real-time Monitoring</h3>
        <p class="f--font-f">
          Monitor your infrastructure in real-time with advanced analytics.
        </p>
        <small class="f--font-g f--color-h">Available in Enterprise plan</small>
      </div>
    </div>
  </div>
</section>

Typography Quick Reference

Class	Size (Desktop)	Size (Mobile)	Font Family	Usage
`.f--font-a`	70px	32px	Hubot Sans	Main hero headings
`.f--font-b`	40px	25.6px	Hubot Sans	Section headings
`.f--font-c`	24px	17.6px	Hubot Sans	Subsection headings
`.f--font-d`	21px	16px	Hubot Sans	Small headings
`.f--font-e`	18px	16px	Syne	Lead paragraphs
`.f--font-f`	16px	14.4px	Syne	Body text
`.f--font-g`	12px	12px	Syne	Small text, captions

Font Weight Reference

When using typography mixins, you can specify font weights:

Weight	Name	When to Use
400	Regular	Default body text, standard headings
500	Medium	Lead paragraphs, emphasized text
600	Semi-Bold	Subheadings, important labels
700	Bold	Primary headings, strong emphasis

Example:

.c--my-heading {
  @extend .u--font-bold;      // Extend font-bold
}

.c--my-paragraph {
  @extend .u--font-medium;    // Extend font-medium
}

Check out the Utility Classes Reference for a complete list of available font utilities.

Next Section

Continue to Spacing System to learn about the measure-based spacing system and spacing utilities.

Chapter 2 Overview - Back to foundations introduction
Colors & Palette - Previous section
Spacing System - Next section
Figma: NETWRIX UI Design - Foundations
Code: src/scss/framework/_var/_vars.scss - Typography variables
Code: src/scss/framework/foundation/font/ - Typography system

Typography System