← Examples Gallery

Typography & Text (DOM)

Font weight, spacing, transform, decoration, and overflow via light DOM CSS.

All CSS on this page applies equally to popover mode — the menu renders as the same .alapelem element whether using DOM or popover.

Font Weight

Light (300)

Bold (600)

.alap_ty-light a { font-weight: 300; }
.alap_ty-bold  a { font-weight: 600; }

Letter Spacing

Tight (-0.02em)

Wide (0.08em)

.alap_ty-tight a { letter-spacing: -0.02em; }
.alap_ty-wide  a { letter-spacing: 0.08em; }

Text Transform

Uppercase

Lowercase

.alap_ty-upper a { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.06em; }
.alap_ty-lower a { text-transform: lowercase; }

Hover Underline

Items get an underline on hover: bridges

.alap_ty-underline a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

Text Overflow (Ellipsis)

Long labels truncate with ellipsis: long labels

.alap_ty-ellipsis a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

Compact Size

Smaller text and padding: coffee

.alap_ty-compact a {
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
}