EVA CSS Typography

Responsive typography system that scales fluidly across all devices.

Font Configuration

Typography Configuration

Customize the typography scale to match your design system.

_font.scss - Typography system

$font-sizes

Typography scale values

$font-sizes: 12, 16, 18, 24, 
           36, 52, 72;

Font sizes from your design system

$font-class-config

Typography class filtering

$font-class-config: (
  fs: (14, 16, 18, 24, 32)
);

Control which font sizes generate classes

Responsive Typography

Typography scales fluidly based on your design system. Perfect for maintaining visual hierarchy across all devices.

.fs-72-px
.fs-72
.fs-72_
.fs-72__

Typography Variables

Typography Variables

var(--fs-36) clamp(1.63rem, 0.63vw + 1.69rem, 2.5rem)
mobile 1.63rem = 26px
laptop 0.63vw + 1.69rem = 36px
desktop 2.5rem = 40px
var(--fs-36_) clamp(1.25rem, 1.25vw + 1.13rem, 2.5rem)
mobile 1.25rem = 20px
laptop 1.25vw + 1.13rem = 36px
desktop 2.5rem = 40px
var(--fs-36__) clamp(0.96rem, 1.88vw + 0.56rem, 2.5rem)
mobile 0.96rem = 15px
laptop 1.88vw + 0.56rem = 36px
desktop 2.5rem = 40px

Typography Mathematics

Typography vs Spacing Calculations

Different mathematical approaches for typography and spacing.

Typography Variables
$min: 0.6rem
$max: 1rem
$Φ: 1.3
$ez: 142.4

Optimized for readability and hierarchy

Key Typography Features:
  • Typography uses higher minimum values (0.6rem vs 0.5rem) for better readability
  • Typography uses a smaller ratio (1.3 vs 1.618) for more conservative scaling
  • Typography variables are suffixed with --fs- for clear identification
  • Font sizes maintain optimal readability across all device sizes