Typography & Text

Font weight, letter spacing, line height, text transform, text decoration, text overflow, and text alignment.

Font Weight

Light (300)

coffee

Bold (700)

coffee

--alap-font-weight: 300;  /* light */
--alap-font-weight: 700;  /* bold */

Weight Change on Hover

Normal → semibold on hover: bridges

Base weight 400, hover weight 600. The fallback chain ensures hover inherits the base if --alap-hover-font-weight is unset.

--alap-font-weight: 400;
--alap-hover-font-weight: 600;

Letter Spacing

Tight (-0.02em)

coffee spots

Wide (0.08em)

coffee spots

--alap-letter-spacing: -0.02em;  /* tight */
--alap-letter-spacing: 0.08em;   /* wide — pairs well with uppercase */

Line Height

Compact (1.2)

coffee

Spacious (2.0)

coffee

--alap-line-height: 1.2;  /* compact */
--alap-line-height: 2.0;  /* spacious */

Text Transform

uppercase

bridges

capitalize

bridges

lowercase

bridges

--alap-text-transform: uppercase;   /* BROOKLYN BRIDGE */
--alap-text-transform: capitalize;  /* Brooklyn Bridge */
--alap-text-transform: lowercase;   /* brooklyn bridge */

Text Decoration

Underline appears on hover: coffee spots

Base: no decoration. Hover: underline. A traditional link feel inside the menu.

--alap-text-decoration: none;
--alap-hover-text-decoration: underline;

Text Alignment

center

coffee

right

coffee

--alap-text-align: center;
--alap-text-align: right;

Text Overflow (Ellipsis)

Long labels get truncated: long-name coffee shops

Requires three companion properties. text-overflow alone does nothing without overflow: hidden and white-space: nowrap.

--alap-text-overflow: ellipsis;
--alap-overflow: hidden;
--alap-white-space: nowrap;
--alap-max-width: 200px;

Monospace / Terminal

Developer-friendly look: car lookup.

Combines custom font, tighter padding, smaller size, notch corners, and wide letter spacing.

--alap-font: 'JetBrains Mono', 'SF Mono', monospace;
--alap-font-size: 0.8rem;
--alap-padding: 0.4rem 0.8rem;
--alap-letter-spacing: 0.02em;
--alap-text-transform: uppercase;
--alap-corner-shape: notch;