Skip to main content

Typography

Utility class to organize and implement typography utilities

Read all typography utilities

Font-family

.font-sans

.font-serif

ClassProperties
.font-serif-apple-system, "Helvetica", system-ui, sans-serif, "Segoe UI", "Arial", "Verdana";
.font-sansserif, "Times", "Georgia", "Times New Roman";

Font-size

small

caption

subtitle

font-size-xs

font-size-sm

font-size-md

font-size-lg

Class selectorsProperties & values
.small, smallfont-size: var(--rbrh-font-size-xxs); font-weight: var(--rbrh-font-weight-light);
.captionfont-size: var(--rbrh-font-size-xs); font-weight: var(--rbrh-font-weight-light);
.subtitlefont-size: var(--rbrh-font-size-sm); font-weight: var(--rbrh-font-weight-medium);
.font-size-xsfont-size: var(--rbrh-font-size-xs);
.font-size-smfont-size: var(--rbrh-font-size-sm);
.font-size-mdfont-size: var(--rbrh-font-size-md );
.font-size-lgfont-size: var(--rbrh-font-size-lg);
.h6font-size: var(--rbrh-font-size-xl);
.h5font-size: var(--rbrh-font-size-2xl);
.h4font-size: var(--rbrh-font-size-3xl);
.h3font-size: var(--rbrh-font-size-4xl);
.h2font-size: var(--rbrh-font-size-5xl);
.h1font-size: var(--rbrh-font-size-6xl);

Line-height

line-h-xs

line-h-sm

line-h-md

line-h-lg

ClassProperties
.line-h-xsline-height: var(--rbrh-line-h-xs);
.line-h-smline-height: var(--rbrh-line-h-sm);
.line-h-mdline-height: var(--rbrh-line-h-md );
.line-h-lgline-height: var(--rbrh-line-h-lg);

Letter-spacing

letter-spacing-xs

letter-spacing-sm

letter-spacing-md

ClassProperties
.letter-spacing-xsletter-spacing: var(--rbrh-letter-spacing-xs);
.letter-spacing-smletter-spacing: var(--rbrh-letter-spacing-sm);
.letter-spacing-mdletter-spacing: var(--rbrh-letter-spacing-md );

Font-weight

font-light

font-default

font-medium

font-semibold

font-bold

ClassProperties
.font-lightfont-weight: var(--rbrh-font-weight-xs);
.font-defaultfont-weight: var(--rbrh-font-weight-sm);
.font-mediumfont-weight: var(--rbrh-font-weight-md );
.font-semiboldfont-weight: var(--rbrh-font-weight-lg);
.font-boldfont-weight: var(--rbrh-font-weight-lg);

Transform & style

text-italic

text-uppercase

text-capitalize

text-underline

ClassProperties
.italicfont-style: italic;
.uppercasetext-transform: uppercase;
.capitalizetext-transform: capitalize;
.underlinetext-decoration: underline;