font-size

텍스트의 크기를 설정하는 속성입니다. Atomic CSS에서 fs는 단위 유무에 따라 의미가 달라집니다. fs0, fs1은 flex-shrink이고, fs16px, fs2rem처럼 단위가 붙으면 font-size입니다.

클래스 목록 — px 단위

20px 미만은 px 단위를 사용합니다. 정밀한 크기 제어가 필요할 때 적합합니다.

클래스 목록 — rem 단위

20px 이상은 rem 단위를 사용합니다. 1rem = 10px 기준이므로, fs2rem은 20px입니다.

클래스 목록 — em 단위

em은 부모 요소의 font-size를 기준으로 합니다. 부모 크기에 따라 상대적으로 변해야 할 때 사용합니다.

클래스 목록 — % 단위

p는 퍼센트를 의미합니다. 부모 요소의 font-size를 100%로 기준 잡습니다.

fs0 vs fs16px — 주의사항

fs 뒤에 단위 없이 숫자만 오면 flex-shrink, 단위가 붙으면 font-size입니다.

px vs rem 비교

동일한 크기를 px과 rem으로 표현할 수 있습니다. 1rem = 10px 기준입니다.

rem 환산 참조표

html { font-size: 10px } 기준 rem 환산표입니다.

추천 사이즈

일반적인 웹 프로젝트에서 권장하는 font-size 기준입니다.

시각적 비교

각 font-size 클래스가 텍스트에 어떤 영향을 주는지 비교합니다.

코드 예시

<!-- 기본 본문 -->
<p class="fs16px lh1-7">일반 본문 텍스트입니다.</p>

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

<!-- 보조 텍스트 -->
<small class="fs12px c71717A">캡션 또는 보조 설명</small>

<!-- 코드 인라인 -->
<code class="fs14px bg1E1E2E py2px px5px br4px">코드 텍스트</code>

<!-- 히어로 타이틀 -->
<h1 class="fs4-8rem fw900 lh1-1">대형 히어로 타이틀</h1>

반응형 font-size

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 글자 크기를 조절할 수 있습니다.

<!-- 데스크탑 16px → 태블릿 14px → 모바일 12px -->
<p class="fs16px md-fs14px sm-fs12px">반응형 텍스트</p>

<!-- 제목: 데스크탑 36px → 태블릿 28px → 모바일 24px -->
<h1 class="fs3-6rem md-fs2-8rem sm-fs2-4rem fw800">반응형 제목</h1>

<!-- 히어로: 데스크탑 48px → 모바일 32px -->
<h1 class="fs4-8rem sm-fs3-2rem fw900 lh1-1">히어로 타이틀</h1>

팁 & 주의사항

관련 속성