반응형 타이포그래피 - 유동적인 폰트 사이즈를 만들어주는 Fluid Type Scale Calculator

반응형 타이포그래피 - 유동적인 폰트 사이즈를 만들어주는 Fluid Type Scale Calculator
Photo by Brett Jordan / Unsplash

직접 디자인시스템을 구축해본 적은 없지만, Bootstrap이나 TailwindCSS와 같은 라이브러리를 사용하다보면, 체계적인 타이포그래피 시스템이 구축되어있는 것이 무척 편리하다는 것을 느낄때가 있습니다.

그래서 이러한 부분을 흉내내서 직접 나만의 타이포그래피 규칙을 적용해서 쓰고 싶을때 유용한 사이트가 있습니다.

구글에서 type scale generator 라고 검색하면 다양한 도구들이 나오는데, 개인적으로는 이 도구가 가장 마음에 듭니다.

clamp 라는 기능을 이용해서 반응형 타이포그래피를 구축하는데 다양한 옵션을 제공하면서도 아주 간결하고 정리가 잘 되어있어서, 사용하기가 참 좋습니다.

한 번쯤 사용해보시면, 꽤나 마음에 드실겁니다.

Fluid Type Scale Calculator
Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any design system.