NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


글꼴 사이즈를 반응형으로 만들기.

본문 건너 뛰기

반응형 웹에서 골치 아픈 문제 중 하나가 글꼴 사이즈입니다. 화면 크기에 비례하는 글꼴 사이즈를 지정할 수 있도록 하기 위해 CSS3 에는 rem(root em) 이라는 단위를 제공하고 있습니다. 루트 요소인 <html> 요소에 지정한 글꼴 크기를 기준으로 특정 요소의 글꼴 크기를 결정하는 방식으로써 부모 요소의 글꼴 크기를 기준으로 삼는 em 이라는 단위보다 계산하기 편리합니다. 또한 페이지 전체적으로 적용되어 있는 서로 다른 크기의 글꼴을 동일한 비율을 적용하여 일괄 변경할 수 있는 방식입니다. 오늘은 머리 속으로만 생각했던 코드를 실제로 구현해 봤습니다.

@media (max-width:360px){html{font-size:10px;}}
@media (min-width:361px) and (max-width:399px){html{font-size:11px;}}
@media (min-width:400px) and (max-width:439px){html{font-size:12px;}}
@media (min-width:440px) and (max-width:479px){html{font-size:13px;}}
@media (min-width:480px) and (max-width:519px){html{font-size:14px;}}
@media (min-width:520px) and (max-width:559px){html{font-size:15px;}}
@media (min-width:560px) and (max-width:599px){html{font-size:16px;}}
@media (min-width:600px) and (max-width:639px){html{font-size:17px;}}
@media (min-width:640px) and (max-width:679px){html{font-size:18px;}}
@media (min-width:680px) and (max-width:719px){html{font-size:19px;}}
@media (min-width:720px) and (max-width:759px){html{font-size:20px;}}
@media (min-width:760px) and (max-width:799px){html{font-size:21px;}}
@media (min-width:800px) and (max-width:839px){html{font-size:22px;}}
@media (min-width:840px) and (max-width:879px){html{font-size:23px;}}
@media (min-width:880px){html{font-size:24px;}}

좀 무식해 보이기도 하네요. 자바스크립트로 window.width()를 구해서 html 요소의 글꼴 크기를 변경한다면 좀 더 멋져 보이고 코드 양을 줄일 수 있을 것 같기는 하지만 자바스크립트는 겸손하게 쓰기로 했습니다.

.btn-small{font-size:1.1rem;}
.btn-medium{font-size:1.2rem;}
.btn-large{font-size:1.4rem;}

.btn-small 버튼을 예로 들면 1.1rem 으로써 360px 이하 너비 단말에서 루트 요소인 html{font-size:10px;} 코드의 영향으로 인해 11px으로 계산이 됩니다. 10px 크기의 1.1배 이기 때문에 11px 으로 계산되는 원리입니다. 만약 단말 해상도가 720px 이라면 루트 요소의 글꼴 크기가 html{font-size:20px;} 이기 때문에 .btn-small 버튼의 글꼴 크기는 20px 크기의 1.1배 즉 22px 으로 계산됩니다.

위 코드는 화면 크기에 비례해서 약 40px 정도의 간격을 기준으로 루트 요소의 글꼴 크기가 1px씩 증감하도록 미디어 쿼리로 설정해 놓은 것입니다.

rem 단위는 font-size에 한정해서만 사용할 수 있는 것은 아닙니다. border-width:0.1rem; width:10rem 등과 같이 length 값을 제공할 수 있는 속성의 값 단위로 얼마든지 사용할 수 있습니다.

IE 8 브라우저가 지원하지 않으므로 국내 데스크톱 단말에 대응하는 서비스에 사용하기에는 무리가 있지만 모바일 단말에 한한다면 상용으로 적용해도 좋을 것입니다.

분류: CSS,웹 기획,웹 디자인,웹 표준 | 2014년 11월 6일, 18:26 | 정찬명 | 댓글: 1개 |
트랙백URI - http://naradesign.net/wp/2014/11/06/2077/trackback/