EVA CSS Typography

Responsive typography system that scales fluidly across all devices.

Font 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

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__

var(--fs-36) clamp(1.63rem, 0.63vw + 1.69rem, 2.5rem)

1.63rem = 26px

0.63vw + 1.69rem = 36px

2.5rem = 40px

var(--fs-36_) clamp(1.25rem, 1.25vw + 1.13rem, 2.5rem)

1.25rem = 20px

1.25vw + 1.13rem = 36px

2.5rem = 40px

var(--fs-36__) clamp(0.96rem, 1.88vw + 0.56rem, 2.5rem)

0.96rem = 15px

1.88vw + 0.56rem = 36px

2.5rem = 40px

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: