Typography

Font Size

The numeric scale fs-1 through fs-6 matches Bootstrap's h1-h6/fs-1-fs-6 values; the same scale drives the built-in h1-h6 elements and the .h1-.h6 heading aliases.

<p class="fs-1">The quick brown fox</p>
<p class="fs-2">The quick brown fox</p>
<p class="fs-3">The quick brown fox</p>
<p class="fs-4">The quick brown fox</p>
<p class="fs-5">The quick brown fox</p>
<p class="fs-6">The quick brown fox</p>

Pixel-based fluid sizes

For fine-grained control, use font-{n} classes where n is a pixel size from the predefined scale. The named step always stays pixel-based, with clamp() used internally for fluid scaling.

<p class="font-12">12px text</p>
<p class="font-16">16px text</p>
<p class="font-24">24px text</p>
<p class="font-48">48px text</p>
<p class="font-96">96px text</p>

Available values: 1-16, 18, 20-22, 24, 26, 28, 32, 36, 40, 42, 44, 48, 54, 60, 64, 66, 72, 80, 88, 96.

Named scale

The named scale text-xs through text-6xl matches Tailwind's text-xs-text-6xl values.

Font Weight

Control the visual weight of text with numeric or keyword weight classes.

<p class="fw-300">Light text</p>
<p class="fw-400">Normal text</p>
<p class="fw-700">Bold text</p>

Font Style

Apply italic or oblique style to text.

<p class="italic">Italic text</p>
<p class="text-italic">Also italic</p>
<p class="oblic">Oblique text</p>

Font Family

ArchCSS ships with a comprehensive $font_face map that registers system fonts, web-safe fonts, and Google Fonts. Font-family classes are generated automatically - each key becomes both a standalone class and a font-{key} variant.

<p class="poppins">Poppins font</p>
<p class="font-inter">Inter font</p>
<p class="jetbrainsmono">JetBrains Mono</p>

System & web-safe fonts

Google Fonts

Google Fonts are loaded automatically in the default build. Disabling them yourself by building from SCSS source is coming in a future release.

Using font tokens in SCSS

Once SCSS source usage is public, you'll be able to access any registered font family directly from the $font_face map in your own SCSS:

Coming soon. This SCSS workflow isn't available in the published package yet.

@use 'sass:map';
@use 'archcss/src/scss/config' as *;

.my-element {
  font-family: map.get($font_face, 'poppins');
}

.my-heading {
  font-family: map.get($font_face, 'playfair');
  font-weight: 700;
}

Line Height

Control the spacing between lines of text with the lh-{n} scale.

Responsive variants. All fs-*, fw-*, and lh-* classes support responsive prefixes - e.g. md:fs-3, lg:fw-700. The font-style and font-family classes also support hover and focus pseudo-variants.