Foundations

Typography

Type families, sizes, weights and line heights

Three type families, a size scale, weights and line heights. Each card previews the token with var(), live.

Families

AgHeadingsPlus Jakarta Sans--font-heading

AgBodyInter--font-body

AgCodeJetBrains Mono--font-mono

Ag--text-8080px

Ag--text-6464px

Ag--text-4848px

Ag--text-4040px

Ag--text-3636px

Ag--text-3232px

Ag--text-2828px

Ag--text-2424px

Ag--text-2020px

Ag--text-1818px

Ag--text-1616px

Ag--text-1414px

Ag--text-1212px

AgRegular400--weight-400

AgMedium500--weight-500

AgSemibold600--weight-600

AgBold700--weight-700

AgExtrabold800--weight-800

Line height decides how much a text breathes. Too tight tires the eye, too loose breaks the reading.

Tight1.2--leading-tight

Line height decides how much a text breathes. Too tight tires the eye, too loose breaks the reading.

Normal1.5--leading-normal

Line height decides how much a text breathes. Too tight tires the eye, too loose breaks the reading.

Relaxed1.65--leading-relaxed