← Brand System
Aa
Typography System

Engineered for Clarity

A precision-crafted type system built for industrial-grade interfaces and professional communications.

01 — Type Families

Font Stack

Three carefully selected typefaces that balance engineering precision with high-legibility for industrial applications.

Download Fonts for Installation
Ag
Space Grotesk
Display & Headlines
Our primary display typeface. A geometric sans-serif with a technical, engineered aesthetic. Used for headlines, titles, and brand statements where impact is required.
Regular 400 Medium 500 SemiBold 600 Bold 700
Ag
Inter
Body & UI
Optimized for screens with excellent legibility at all sizes. Used for body text, UI elements, and detailed content.
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700
Ag
JetBrains Mono
Code & Data
A monospace typeface for technical content, code snippets, data displays, and labels requiring precise alignment.
Regular 400 Medium 500 SemiBold 600
02 — Type Scale

Hierarchy System

A modular scale based on a 1.25 ratio for consistent visual rhythm across all applications.

Style Sample Specs
Display Intelligent Logistics Space Grotesk Bold / 72px / -0.03em / 1
H1 Network Operations Space Grotesk SemiBold / 56px / -0.02em / 1.1
H2 Terminal Management Space Grotesk SemiBold / 40px / -0.02em / 1.2
H3 Real-Time Tracking Space Grotesk SemiBold / 32px / -0.01em / 1.3
H4 Operational Metrics Space Grotesk SemiBold / 24px / 0 / 1.3
H5 Fleet Status Overview Inter SemiBold / 20px / 0 / 1.4
H6 Current Shipments Inter SemiBold / 18px / 0 / 1.4
Body Large Delivering precision logistics solutions across Mexico's rail network. Inter Regular / 18px / 0 / 1.6
Body Our integrated platform provides real-time visibility into all operations. Inter Regular / 16px / 0 / 1.6
Body Small Track shipments and monitor KPIs from a single dashboard. Inter Regular / 14px / 0 / 1.5
Caption Last updated 2 minutes ago • 24 active shipments Inter Medium / 12px / 0 / 1.4
Code shipment.status = "IN_TRANSIT" JetBrains Mono Regular / 14px / 0 / 1.6
Label TRACKING NUMBER JetBrains Mono Medium / 11px / 0.1em / 1
03 — Letter Spacing

Tracking Guidelines

Precise letter-spacing values for different contexts and type sizes.

Tight
SOLMEX
-0.03em (-3%)

Display headlines, H1-H3, large type

Normal
SOLMEX
0 (default)

Body text, paragraphs, UI elements

Wide
SOLMEX
+0.2em (+20%)

Labels, badges, small caps, captions

04 — Line Height

Leading System

Consistent vertical rhythm improves readability and creates visual harmony.

Tight (Headlines)
line-height: 1.2

Grupo Solmex operates as an intelligent logistics network, connecting terminals across Mexico's industrial corridors with precision and reliability.

Normal (Body)
line-height: 1.6

Grupo Solmex operates as an intelligent logistics network, connecting terminals across Mexico's industrial corridors with precision and reliability.

Loose (Reading)
line-height: 2.0

Grupo Solmex operates as an intelligent logistics network, connecting terminals across Mexico's industrial corridors with precision and reliability.

05 — Application

Context Examples

Typography applied in real-world contexts.

Dashboard Header
OVERVIEW

Operations Dashboard

Real-time monitoring of all active shipments and terminal operations.

KPI Module
ACTIVE SHIPMENTS
2,847

↑ 12% from last week

Print Material (Light)

Intelligent Logistics Operator

Grupo Solmex provides end-to-end visibility and control over your supply chain, ensuring reliable delivery with real-time tracking capabilities.

Technical Data
Tracking ID: SMX-2024-0847291
Origin: Terminal Monterrey
Destination: Terminal Guadalajara
ETA: 2024-03-15 14:30 CST
Status: IN_TRANSIT
06 — Guidelines

Do's & Don'ts

Rules for maintaining typographic consistency.

✓ Do
Use Space Grotesk for headlines
Headlines should always use Space Grotesk for brand consistency.
✕ Don't
Use Inter for headlines
Inter should be reserved for body text and UI elements only.
✓ Do
USE WIDE TRACKING FOR LABELS
Small caps and labels should use increased letter-spacing.
✕ Don't
use tight tracking for labels
Tight tracking on small text reduces legibility.
✓ Do
Maintain comfortable line lengths between 50-75 characters for body text to ensure optimal readability.
Keep paragraphs at readable widths (50-75 characters).
✕ Don't
Extend text lines beyond comfortable reading widths which forces the eye to travel too far and makes it difficult for readers to find the start of the next line when they reach the end of the current one.
Avoid overly wide text columns.
07 — Implementation

CSS Variables

Copy these custom properties for consistent typography implementation.

/* Grupo Solmex - Typography System */
:root {
  /* Font Families */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Font Sizes */
  --text-display: 72px;
  --text-h1: 56px;
  --text-h2: 40px;
  --text-h3: 32px;
  --text-h4: 24px;
  --text-h5: 20px;
  --text-h6: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-label: 11px;
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.2em;
}