Typography SystemGoogle Sans Flex Variable Font

Variable Font Typography

Beautiful typography
built for the modern web

A comprehensive typography system using Google Sans Flex variable font with optical sizing, multiple weights, and fluid scales.

Display Styles

Thin weight (100) for elegant, modern headlines

display-2xl · 72px · weight 100

The quick brown fox

display-xl · 60px · weight 100

The quick brown fox jumps

display-lg · 48px · weight 100

The quick brown fox jumps over

hero · 48px · weight 100 · line-height 1.25

The quick brown fox jumps over the lazy dog

Heading Hierarchy

Progressive weight scale from extralight to medium

heading-xl · 36px · weight 200

Heading Extra Large

heading-lg · 30px · weight 200

Heading Large

heading-md · 24px · weight 300

Heading Medium

heading-sm · 20px · weight 400

Heading Small

heading-xs · 18px · weight 500

Heading Extra Small

Body Text

Regular weight (400) optimized for readability

body-xl · 20px · line-height 1.65

Premium market research, expert analysis, institutional-grade tools, weekly livestreams, and more to help you become a better trader.

body-lg · 18px · line-height 1.65

The variable font automatically adjusts optical sizing based on the rendered size, ensuring optimal readability at any scale.

body-md · 16px · line-height 1.65

Google Sans Flex supports six variable axes: weight, width, slant, optical size, grade, and roundness for complete typographic control.

body-sm · 14px · line-height 1.6

Smaller body text maintains excellent legibility through automatic optical size adjustments that increase stroke weight and letter spacing.

Labels & UI Text

Medium weight (500) for interface elements

Primary Button
Secondary Button
Medium Label
Small Label
Overline Text

Card Title Here

Supporting description text using body-sm style.

NEW

Feature Card

Caption and label styles work great for UI elements.

Updated 2 hours ago

Status Card

Timestamps and metadata use caption style.

Variable Font Axes

Interactive control over all six axes

Weight (wght)100 → 900

Thin 100

Extralight 200

Light 300

Regular 400

Medium 500

Semibold 600

Bold 700

Extrabold 800

Black 900

Width (wdth)25 → 151

Condensed 75

Narrow 87

Normal 100

Wide 125

Expanded 150

Roundness (ROND)0 → 100

Sharp corners 0

Rounded 50

Super rounded 100

Slant (slnt)-12 → 0

Upright 0°

Subtle slant -6°

Full slant -12°

Grade (GRAD)-200 → 150

Light grade -50

Normal grade 0

Heavy grade 100

Optical Size (opsz)8 → 144

Optical sizing is automatic! The font adjusts stroke weight and spacing based on rendered size for optimal readability. Small text gets thicker strokes; large text gets refined details.

Gradient Headings

Decorative gradient text for impactful headlines

Variant: light (on dark bg)

Heading - xxl (thin)

Heading - xxl (base)

Heading - xxl (semi)

Heading - xxl (bold)

Heading - xxl (black)

Heading - xxxl (thin)

Heading - xxxl (base)

Heading - xxxl (semi)

Heading - xxxl (bold)

Heading - xxxl (black)

Variant: pink (on dark bg)

Heading - lg (thin)

Heading - lg (base)

Heading - lg (semi)

Heading - xl (thin)

Heading - xl (base)

Heading - xl (semi)

Heading - xxl (medium)

Variant: default (neutral gradient)

Heading - xxl (thin)

Heading - xxl (base)

Heading - xxl (semi)

Heading - xxl (bold)

Heading - xxl (black)

Vibrant Gradients

Sunset Vibes

Ocean Depths

Aurora Lights

Cosmic Energy

Fire & Flame

Golden Hour

Weight Variations with Gradients

Thin Weight 100

Extralight Weight 200

Light Weight 300

Normal Weight 400

Medium Weight 500

Bold Weight 700

Display Size Scale

Display 4XL

Display 3XL

Display 2XL

Display XL

Display LG

Build the future
one pixel at a time

Create stunning gradient headlines that capture attention and elevate your brand's visual identity.

Hero Titles · size="xxl" · weight="medium"
Trading Platform

Master the markets
with confidence

Premium market research, expert analysis, and institutional-grade tools to help you become a profitable trader.

AI-Powered Analytics

Unlock insights
hidden in your data

Transform raw data into actionable intelligence with our next-generation analytics platform.

Premium Membership

Elevate your
investment strategy

Join thousands of successful investors who trust our premium research and exclusive market insights.

Prediction Markets

Trade on the future.
Profit from insight.

The world's most advanced prediction market platform. Trade events, hedge risk, and discover alpha.

Enterprise Solutions

Scale your business
with confidence

Enterprise-grade infrastructure built for teams that demand reliability, security, and performance.

Sample Compositions

Real-world usage examples

Featured

Learn the proven process that generates trading profits

Premium market research, expert analysis, institutional-grade tools, weekly livestreams, and more to help you become a successful trader.

98%

Success Rate

2.5M+

Active Users

$50B

Volume Traded