Press
/
to search

Typography

Glyphs

Utilities for sets alternate glyphs for numbers, fractions, and ordinal markers to an element.

Variant

Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled

API

classcss
glyphs-normalfont-variant-numeric: normal
glyphs-ordinalfont-variant-numeric: ordinal
glyphs-slashed-zerofont-variant-numeric: slashed-zero
glyphs-lining-numsfont-variant-numeric: lining-nums
glyphs-oldstyle-numsfont-variant-numeric: oldstyle-nums
glyphs-proportional-numsfont-variant-numeric: proportional-nums
glyphs-tabular-numsfont-variant-numberic: tabular-nums
glyphs-diagonal-fractionsfont-variant-numeric: diagonal-fractions
glyphs-stacked-fractionsfont-variant-numeric: stacked-fractions

Usage

2/4 4/5 3/6 4/8
Glyphs: OFF
2/4 4/5 3/6 4/8
Glyphs: ON
<div class="glyphs-diagonal-fractions">
  2/4 4/5 3/6 4/8
</div>
HTML
.dummy {
  @extend
    .glyphs-diagonal-fractions;
}
SCSS