font-size

Utilities for controlling the font size of an element.

Quick reference

Class	Styles
text-xs	font-size: var(--text-xs); /* 0.75rem (12px) */ line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */
text-sm	font-size: var(--text-sm); /* 0.875rem (14px) */ line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */
text-base	font-size: var(--text-base); /* 1rem (16px) */ line-height: var(--text-base--line-height); /* calc(1.5 / 1) */
text-lg	font-size: var(--text-lg); /* 1.125rem (18px) */ line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */
text-xl	font-size: var(--text-xl); /* 1.25rem (20px) */ line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */
text-2xl	font-size: var(--text-2xl); /* 1.5rem (24px) */ line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */
text-3xl	font-size: var(--text-3xl); /* 1.875rem (30px) */ line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */
text-4xl	font-size: var(--text-4xl); /* 2.25rem (36px) */ line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */
text-5xl	font-size: var(--text-5xl); /* 3rem (48px) */ line-height: var(--text-5xl--line-height); /* 1 */
text-6xl	font-size: var(--text-6xl); /* 3.75rem (60px) */ line-height: var(--text-6xl--line-height); /* 1 */
text-7xl	font-size: var(--text-7xl); /* 4.5rem (72px) */ line-height: var(--text-7xl--line-height); /* 1 */
text-8xl	font-size: var(--text-8xl); /* 6rem (96px) */ line-height: var(--text-8xl--line-height); /* 1 */
text-9xl	font-size: var(--text-9xl); /* 8rem (128px) */ line-height: var(--text-9xl--line-height); /* 1 */
text-(length:<custom-property>)	font-size: var(<custom-property>);
text-[<value>]	font-size: <value>;

Examples

Basic example

Use utilities like text-sm and text-lg to set the font size of an element:

<!-- [!code classes:text-sm,text-base,text-lg,text-xl,text-2xl] -->
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>

Setting the line-height

Use utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time:

<!-- [!code classes:text-sm/6,text-sm/7,text-sm/8] -->
<p class="text-sm/6 ...">So I started to walk into the water...</p>
<p class="text-sm/7 ...">So I started to walk into the water...</p>
<p class="text-sm/8 ...">So I started to walk into the water...</p>

Using a custom value

Use the text-[<value>] syntax to set the font size based on a completely custom value:

<p class="text-[14px] ...">Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the text-(length:<custom-property>) syntax:

<p class="text-(length:--my-text-size) ...">Lorem ipsum dolor sit amet...</p>

This is just a shorthand for text-[length:var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a font-size utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-sm md:text-base ...">Lorem ipsum dolor sit amet...</p>

Customizing your theme

Customize the font size utilities in your project using theme configuration:

import { createContext } from '@barocss/kit';

const ctx = createContext({
  theme: {
    extend: {
      fontSize: {
        tiny: '0.625rem'
      }
    }
  }
});

Now the text-tiny utility can be used in your markup:

<div class="text-tiny">
  <!-- ... -->
</div>

You can also provide default line-height, letter-spacing, and font-weight values for a font size:

import { createContext } from '@barocss/kit';

const ctx = createContext({
  theme: {
    extend: {
      fontSize: {
        tiny: ['0.625rem', { lineHeight: '1.5rem', letterSpacing: '0.125rem', fontWeight: '500' }]
      }
    }
  }
});