유동형 타이포그래피?

Hyor·2025년 6월 18일

서론

사이드 프로젝트를 진행하던 중, 화면 크기에 따라 글자 크기가 부드럽게 변하는 fluid typography라는 개념을 알게 되었습니다. 처음에는 "그냥 미디어 쿼리로 폰트 사이즈 조절하면 되는 거 아닌가?"라고 생각했지만, 실제로는 조금 더 정교하고 유연한 방식이라는 것을 알게 되어 글로 정리해봅니다.

반응형 타이포그래피?

Fluid Typography는 반응형 웹 디자인에서 화면의 너비에 따라 글자 크기가 부드럽게 변하는 방식입니다. 예를 들어, 모바일에서는 작게, 데스크톱에서는 크게 보이되, 그 변화가 단절 없이 자연스럽게 이어집니다.

미디어 쿼리로 폰트 사이즈 조절하면 되는 거 아닌가?

미디어 쿼리를 사용하면 특정 해상도 구간에서 글자 크기를 고정된 값으로 바꿀 수는 있습니다. 하지만 이 방식은 뷰포트 크기가 변할 때마다 급격한 변화가 발생합니다.

반면, Fluid Typography는 CSS 함수를 활용해 연속적이고 부드러운 크기 변화를 만들어냅니다. 사용자의 화면 크기가 달라질수록 글자 크기도 함께 유연하게 반응합니다.

차이점

방식	설명	특징
미디어 쿼리	해상도 구간마다 지정된 폰트 크기 적용	급격한 변화, 구간마다 스타일 필요
Fluid Typography	뷰포트에 따라 수학적으로 계산된 크기 적용	부드러운 변화, 유지보수 용이

어떻게 구현할까?

CSS의 clamp() 함수나 calc() + vw 단위를 조합해 구현할 수 있습니다.

1. clamp() 함수 사용 (권장)

/**
 * 1rem: 최소 글자 크기
 * 2vw: 중간값, 뷰포트 너비에 비례한 값
 * 2rem: 최대 글자 크기
 */
font-size: clamp(1rem, 2vw, 2rem);

함수는 최솟값, 중간값, 최댓값을 지정해서 브라우저가 뷰포트 크기에 따라 적절한 폰트 크기를 자동으로 계산해줍니다.
예를 들어, clamp(1rem, 2vw, 2rem)이라고 가정하고, root 폰트 사이즈가 16px일 때는 다음과 같은 동작을 합니다:
- 800px 이하에서는 2vw가 1rem보다 작아지므로 → 16px(1rem)로 고정됩니다.
- 1280px 기준에서는 2vw = 25.6px이므로 → 25.6px로 적용됩니다.
- 1600px 이상에서는 2vw가 2rem보다 커지므로 32px(2rem)로 고정됩니다.

화면 크기가 작을수록 작아지고, 클수록 커지되, 지정된 최소/최대 범위를 벗어나지 않도록 부드럽게 조절되는 폰트 크기를 만들 수 있습니다.

2. calc()와 vw 사용

/**
 * 1rem: 최소 글자 크기
 * 1vw씩 글자 크기 증가
 */
font-size: calc(1rem + 1vw);

단순 계산으로 글자 크기를 늘리지만, 최소/최댓값을 제한하기 어렵습니다.

Figma 에서는 어떻게 사용하지?

Fluid Typography를 코드에서만 구현하면 디자이너와 협업이 어려울 수 있습니다.
디자인 툴인 Figma에서도 이를 적용할 수 있어야 실제 개발과 디자인 결과물이 일치하겠죠.
이럴 때는 Figma의 Utopia라는 플러그인을 사용하면 해결됩니다.
Utopia는 뷰포트 크기에 따라 유동적으로 변하는 타이포그래피 시스템을 설계할 수 있도록 도와줍니다.