유토피아(Utopia)는 글자 크기와 여백이 화면 폭에 따라 부드럽게 변하도록 설계하는 방법을 소개한다. 작은 화면과 큰 화면의 기준을 정하고 그 사이의 변화를 웹 브라우저에 맡긴다. 글자와 간격과 그리드를 위한 계산 도구를 제공한다. 별도의 프레임워크를 설치하는 대신 생성한 값을 자기 CSS에 적용할 수 있다.

• 공식 웹사이트

글자와 여백을 함께 조절하기

• 전시 안내의 본문이 좁은 화면에서는 18px, 넓은 화면에서는 20px로 보이게 한다고 가정하자. 글자 크기 계산기에서 두 뷰포트 너비와 기준 크기를 정하면 그 사이의 크기를 계산하는 CSS를 얻을 수 있다. 값은 예시이며 모든 본문에 적용할 기준은 아니다.
• 여백 계산기는 같은 기준값에서 유동형 간격을 만든다. 제목과 본문 사이의 공간, 작품 카드 사이의 간격이 글자 크기의 변화와 함께 움직이도록 구성할 수 있다.
• 작은 화면의 s와 큰 화면의 l을 연결하는 식으로 서로 다른 단계의 간격을 짝지을 수도 있다. 모든 여백을 같은 비율로 늘릴 필요는 없다.
• 타이포그래피 스케일이 맞아도 긴 제목은 다른 위치에서 줄을 바꿀 수 있다. 유동형 타이포그래피를 적용한 뒤에는 계산한 크기와 실제 글줄을 함께 본다.

#도구 #웹사이트 #CSS #타이포그래피