Press
/
to search

Typography

Glyphs

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

Variant

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

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