Press/to search

Typography

Font Size

Utilities for sets the font size.


Class

classcss
text-xsfont-size: .75remText
text-smfont-size: .875remText
text-mdfont-size: 1remText
text-lgfont-size: 1.125remText
text-xlfont-size: 1.25remText
text-2xlfont-size: 1.5remText
text-3xlfont-size: 1.875remText
text-4xlfont-size: 2.25remText
text-5xlfont-size: 3remText
text-6xlfont-size: 4remText
text-7xlfont-size: 5remText
text-8xlfont-size: 6remText

Usage

Set font-size to an element.

<!-- Example -->
<y class="text-md">
...
</y>

<span class="text-md">
...
</span>

Set default font-size with <body> tag.

<!-- Example -->
<body class="text-md">
...
</body>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'text',
$property: font-size,
$modifier: (
xs: .75rem,
sm: .875rem
//...
)
);

// Add Variants
@include yogurt(
$class: 'text',
$property: font-size,
$modifier: (
xs: .75rem,
sm: .875rem
//...
),
$variant: (
'responsive'
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.