Typography

Utility class to organize and implement typography utilities

Read all typography utilities

Font-family

.font-sans

.font-serif

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

Font-size

small

caption

subtitle

font-size-xs

font-size-sm

font-size-md

font-size-lg

Class selectors	Properties & values
.small, small	font-size: var(--rbrh-font-size-xxs); font-weight: var(--rbrh-font-weight-light);
.caption	font-size: var(--rbrh-font-size-xs); font-weight: var(--rbrh-font-weight-light);
.subtitle	font-size: var(--rbrh-font-size-sm); font-weight: var(--rbrh-font-weight-medium);
.font-size-xs	font-size: var(--rbrh-font-size-xs);
.font-size-sm	font-size: var(--rbrh-font-size-sm);
.font-size-md	font-size: var(--rbrh-font-size-md );
.font-size-lg	font-size: var(--rbrh-font-size-lg);
.h6	font-size: var(--rbrh-font-size-xl);
.h5	font-size: var(--rbrh-font-size-2xl);
.h4	font-size: var(--rbrh-font-size-3xl);
.h3	font-size: var(--rbrh-font-size-4xl);
.h2	font-size: var(--rbrh-font-size-5xl);
.h1	font-size: var(--rbrh-font-size-6xl);

Line-height

line-h-xs

line-h-sm

line-h-md

line-h-lg

Class	Properties
.line-h-xs	line-height: var(--rbrh-line-h-xs);
.line-h-sm	line-height: var(--rbrh-line-h-sm);
.line-h-md	line-height: var(--rbrh-line-h-md );
.line-h-lg	line-height: var(--rbrh-line-h-lg);

Letter-spacing

letter-spacing-xs

letter-spacing-sm

letter-spacing-md

Class	Properties
.letter-spacing-xs	letter-spacing: var(--rbrh-letter-spacing-xs);
.letter-spacing-sm	letter-spacing: var(--rbrh-letter-spacing-sm);
.letter-spacing-md	letter-spacing: var(--rbrh-letter-spacing-md );

Font-weight

font-light

font-default

font-medium

font-semibold

font-bold

Class	Properties
.font-light	font-weight: var(--rbrh-font-weight-xs);
.font-default	font-weight: var(--rbrh-font-weight-sm);
.font-medium	font-weight: var(--rbrh-font-weight-md );
.font-semibold	font-weight: var(--rbrh-font-weight-lg);
.font-bold	font-weight: var(--rbrh-font-weight-lg);

Transform & style

text-italic

text-uppercase

text-capitalize

text-underline

Class	Properties
.italic	font-style: italic;
.uppercase	text-transform: uppercase;
.capitalize	text-transform: capitalize;
.underline	text-decoration: underline;