AAtomic CSS

font-size

Sets the text size. In Atomic CSS, fs has different meanings depending on whether a unit is present. fs0, fs1 are flex-shrink, while fs16px, fs2rem with units become font-size.

Class List -- px Unit

Use px units for sizes under 20px. Suitable when precise size control is needed.

ClassCSSUsage
fs10pxfont-size: 10pxMinimum readable size
fs11pxfont-size: 11pxVery small text
fs12pxfont-size: 12pxSecondary text, captions
fs13pxfont-size: 13pxSmall body text, code
fs14pxfont-size: 14pxDefault body (compact UI)
fs16pxfont-size: 16pxDefault body (standard)
fs18pxfont-size: 18pxEmphasized body, subheading

Class List -- rem Unit

Use rem units for sizes 20px and above. Based on 1rem = 10px, so fs2rem is 20px.

ClassCSSConversion
fs1-2remfont-size: 1.2rem12px
fs1-4remfont-size: 1.4rem14px
fs1-6remfont-size: 1.6rem16px
fs1-8remfont-size: 1.8rem18px
fs2remfont-size: 2rem20px — h3
fs2-4remfont-size: 2.4rem24px — h2
fs3-2remfont-size: 3.2rem32px
fs3-6remfont-size: 3.6rem36px — h1
fs4-8remfont-size: 4.8rem48px -- Hero title

Class List -- em Unit

em is relative to the parent element's font-size. Use when size should change proportionally with the parent.

ClassCSSDescription
fs0-8emfont-size: 0.8emparent 80%
fs0-9emfont-size: 0.9emparent 90%
fs1emfont-size: 1emSame as parent
fs1-2emfont-size: 1.2emparent 120%
fs1-5emfont-size: 1.5emparent 150%
fs2emfont-size: 2emparent 200%

Class List -- % Unit

p represents percentage. Uses the parent element's font-size as the 100% baseline.

ClassCSSDescription
fs80pfont-size: 80%parent 80%
fs90pfont-size: 90%parent 90%
fs100pfont-size: 100%Same as parent
fs120pfont-size: 120%parent 120%
fs150pfont-size: 150%parent 150%
fs200pfont-size: 200%parent 200%

fs0 vs fs16px -- Caution

When only a number follows fs without a unit, it is flex-shrink; with a unit, it is font-size.

ClassCSSProperty
fs0flex-shrink: 0flex-shrink (no unit)
fs1flex-shrink: 1flex-shrink (no unit)
fs0pxfont-size: 0pxfont-size (px unit)
fs12pxfont-size: 12pxfont-size (px unit)
fs1-6remfont-size: 1.6remfont-size (rem unit)
fs2remfont-size: 2remfont-size (rem unit)
fs1emfont-size: 1emfont-size (em unit)
fs100pfont-size: 100%font-size (% unit)

Caution

fs0 is not font-size: 0 but flex-shrink: 0. To set font-size to 0, use fs0px.

px vs rem Comparison

The same size can be expressed in both px and rem. Based on 1rem = 10px.

Sizepx classrem classRecommended
12pxfs12pxfs1-2rempx 권장 (20px 미만)
14pxfs14pxfs1-4rempx 권장 (20px 미만)
16pxfs16pxfs1-6rempx 권장 (20px 미만)
18pxfs18pxfs1-8rempx 권장 (20px 미만)
20pxfs20pxfs2remrem 권장 (20px 이상)
24pxfs24pxfs2-4remrem 권장 (20px 이상)
32pxfs32pxfs3-2remrem 권장 (20px 이상)
36pxfs36pxfs3-6remrem 권장 (20px 이상)
48pxfs48pxfs4-8remrem 권장 (20px 이상)

rem Conversion Reference Table

rem conversion table based on html { font-size: 10px }.

ClassCSSConversion
fs1-2remfont-size: 1.2rem= 12px
fs1-4remfont-size: 1.4rem= 14px
fs1-6remfont-size: 1.6rem= 16px
fs2remfont-size: 2rem= 20px
fs2-4remfont-size: 2.4rem= 24px
fs3-2remfont-size: 3.2rem= 32px
fs3-6remfont-size: 3.6rem= 36px
fs4-8remfont-size: 4.8rem= 48px

Recommended font-size guidelines for typical web projects.

UsageSizeClass
캡션 / 보조 텍스트12pxfs12px
작은 본문 / 코드13-14pxfs13px / fs14px
기본 본문16pxfs16px
h3 소제목20pxfs2rem
h2 제목24pxfs2-4rem
h1 제목36pxfs3-6rem
Hero title48pxfs4-8rem

Visual Comparison

Compares how each font-size class affects text.

12px — fs12px

The quick brown fox jumps over the lazy dog

14px — fs14px

The quick brown fox jumps over the lazy dog

16px — fs16px

The quick brown fox jumps over the lazy dog

20px (2rem) — fs2rem

The quick brown fox jumps over the lazy dog

24px (2.4rem) — fs2-4rem

The quick brown fox jumps over the lazy dog

32px (3.2rem) — fs3-2rem

The quick brown fox jumps over the lazy dog

36px (3.6rem) — fs3-6rem

The quick brown fox jumps over the lazy dog

48px (4.8rem) — fs4-8rem

The quick brown fox jumps over the lazy dog

Code Examples

<!-- Default body text -->
<p class="fs16px lh1-7">This is regular body text.</p>

<!-- Title hierarchy -->
<h1 class="fs3-6rem fw800 lh1-3">h1 Title — 36px</h1>
<h2 class="fs2-4rem fw700 lh1-3">h2 Title — 24px</h2>
<h3 class="fs2rem fw700 lh1-3">h3 Title — 20px</h3>

<!-- Auxiliary text -->
<small class="fs12px c71717A">Caption or auxiliary description</small>

<!-- Inline code -->
<code class="fs14px bg1E1E2E py2px px5px br4px">Code text</code>

<!-- Hero title -->
<h1 class="fs4-8rem fw900 lh1-1">Large hero title</h1>

responsive font-size

Combine with media query prefixes to adjust font size based on screen size.

<!-- Desktop 16px → Tablet 14px → Mobile 12px -->
<p class="fs16px md-fs14px sm-fs12px">Responsive Text</p>

<!-- Title: Desktop 36px → Tablet 28px → Mobile 24px -->
<h1 class="fs3-6rem md-fs2-8rem sm-fs2-4rem fw800">Responsive Title</h1>

<!-- Hero: desktop 48px → mobile 32px -->
<h1 class="fs4-8rem sm-fs3-2rem fw900 lh1-1">Hero title</h1>
<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class CombinationBehavior
fs16px md-fs14px sm-fs12pxDefault 16px, 14px at 1024px and below, 12px at 768px and below
fs3-6rem md-fs2-8rem sm-fs2-4remDefault 36px, 28px at 1024px and below, 24px at 768px and below
fs4-8rem sm-fs3-2remDefault 48px, 32px at 768px and below
fs14px es-fs12pxDefault 14px, 12px at 640px and below

Tips & Notes

Use rem as the default

rem scales proportionally with root font-size, offering excellent scalability. Adapts naturally even when users change browser default font size.

Use px for precision under 20px

For small sizes like 12px, 13px, 14px, rem decimals can get long, so using px units like fs12px, fs14px is more concise.

fs0 is not font-size

fs0 = flex-shrink: 0. To set font-size, you must include a unit: fs16px, fs2rem.

Use with line-height

When changing font-size, also adjust lh(line-height) for better readability. Generally lh1-7 for body text and lh1-3 for headings.

font-weightline-heightletter-spacingtext-align