in CSS, 웹 디자인

CSS로 유연한 디자인 만들기

우리는 옛부터 전해지는 타이포그래피의 금언에서부터 시작해야 할 것이다. 단락에서 가장 읽기 좋은 라인의 길이는 ‘알파벳 한 세타 길이의 하나 반’이다. 이것은 최대의 가독성을 위해서 문단의 각 라인은 약 문자 40개 정도의 길이가 되어야 함을 의미한다.

이것이 어떻게 유동적 페이지라는 우리의 목표와 상응될 수 있을까? 만일 우리가 화면을 가득 채우도록 디자인된 페이지를 만든다면 라인 길이를 제어할 수 없으며, 그렇게 되면 가독성 같은 것은 포기해야만 할 것이다.

하지만 두 가지 모두 가질 수는 없을까? 가능하다.

먼저 우리는 고정된 폰트 크기에 대한 관념을 포기하는 것부터 시작해야 한다. CSS는 우리에게 타이포그래피에 대한 폭 넚은 제어권을 주고 있다. 또한 그것은 몇 가지 새로운 측정 단위들을 주는데, 가장 주목할만한 것은 em 단위이다.

포인트나 픽셀이 절대적인 크기를 나타내는 것과는 달리, em은 폰트에 기반하고 있다. 기술적으로 1em은 당신이 어떤 폰트를 사용하든 소문자 ‘m’의 폭을 나타내도록 되어 있다.

대부분 브라우저들은 이렇게 복잡하지는 않지만 실제로 1em을 ‘기본값’으로 정의하고 있다. 그래서 인터넷 익스플러4(영문 기준) 혹은 그 이상의 버전에서 1em으로 정해진 베르다나체(verdana)는 12pt로 렌더링된다.

그러나 그것은 고정적인 12pt가 이니고, 오히려 사용자가 임의로 정한 기본값이라고 할 수 있다. 만일 시력이 약한 사용자(나 포함)가 브라우저에서(환경설정 메뉴를 사용하여) 폰트 사이즈를 16pt까지 키워서 기본값으로 설정한다면 1em은 16pt가 되는 것이며, 모든 것이 이것에 맞추어 크기가 조정될 것이다.

당신은 대부분의 사용자들이 결코 그들의 환경설정을 바꾸지 않는다고 말할 것이다. 그 말은 맞다. 나(hooney)는 밤늦게 일을 마치고 새벽에 해외 사이트의 작은 글꼴의 영문으로된 웹문서들을 읽어야 했을떄, pt나 px 크기를 절대값으로 고정시킨 웹디자이너들을 무척 저주했다. 나의 지친 눈에 그런 웹문서들의 양이 얼마나 많은지.. 쩝.

– 출처 : 웹디자인 마인드 –

댓글 남기기

  1. 그럴 때 쓰는 기능으로, IE를 제외한 모든 브라우저에 있는 text zoom이란 유용한 기능이 있죠. 맥에서는 command + (글자 확대), comman – (글자 축소)의 단축키를 눌러주면 되고, PC에서는 아마 ctrl + (글자 확대), ctrl – (글자 축소) 일 겁니다. 저 같은 경우는, 웹 페이지의 글자가 너무 작은 경우에 종종 씁니다.

    그래서 이 글의 결론은 폰트 크기 지정할 때 px이나 pt보다 em을 권장하는 건가요?

  2. 앗. IE에서도 ctrl + 마우스 휠의 위/아래 이동을 통한 text zoom 기능을 사용할 수 있답니다. 브라우저 상단의 메뉴에서도 글자 크기를 확대/축소할 수 있죠.

    그리고, 이 글은 폰트 지정에서 em을 권장하는 일례를 소개한 것이 맞구요. 책의 내용에서는 와이어드 잡지를 예제로 em의 다양한 실례를 보여주고 있더군요. (책의 저자가 와이어드 제작자인듯..)

    폰트 단위로써 em의 단위는 WCAG 2.0에서 정확하게 권고하고 있답니다. 그동안 em이냐, pt냐 (px는 접근성 부분에서 거의 0점이라.. 논외 ^^;)라는 지루한 논쟁에 WAI가 마침표를 찍은 듯 싶네요~ 🙂

  3. em 좋아요 ^^*
    px이나 pt같은경우 고정이라 전체 글꼴크기 수정할때도 하나하나 수정해야하지만 em은 body부터 종속되는것이라 body em 만 바꿔도 전체가 바꿔질수있는 장점이 있는것 같습니다. %도 비슷한것 같습니다.

  4. WCAG 2.0은 권고안이 아닌, 현재 작업중이더라구요. 그래도 em의 단위는 계속 추천할 것 같습니다. ^^;;

    Quickplay님/ em은 폰트에 있어서 가장 유용한 단위임에 틀림없지만, 패딩이나 마진에도 사용한다면 레이아웃에도 좋은 단위가 될 수 있을 것 같습니다. 배경 이미지 사용이 걸리지만요~ 🙂