HTMLㆍCSS 기초 강좌/CSS

#2 타이포그래피(Typography) 디자인

jaiyah 2019. 1. 21. 08:47

Typography Design

타이포그래피은 말 그대로 typo(형체)를 가지고 그래픽을 하는 것, 즉 읽기 용이하도록 글자(텍스트) 디자인을 꾸며주는 것을 말합니다.

CSS 에는 타이포그래피를 위해 크게 폰트(Fonts) 스타일 속성과 텍스트(Text) 레이아웃 속성으로 크게 두가지 속성을 가지고 있습니다.






폰트(Fonts) 스타일 속성

폰트에 영향을 주는 속성으로 적용되는 모양(family), 크기(size), 굵기(weight), 기울임(style) 등을 지정해 줄 수 있습니다.

  • font-family : 폰트의 종류를 지정
  • font-size : 폰트의 크기를 지정
  • font-weight : 폰트의 굵기(두께)를 지정
  • font-style : 폰트의 스타일(이탤릭체)을 지정

글자 색상은 font-color 가 아닌 color 속성으로 설정하므로 주의.

  • color keywords : red, green, blue, pink, black ...
  • hex color code : #RRGGBB, #rrggbb / 0 ~ 9, a ~ f
    예) #fffff, #fff, #808080
  • rgb, rgba : RED, GREEN, BLUE, ALPHA(불투명도)
    알파값이 1이면 불투명하고 0이면 투명하게 됩니다.
    예) rgba(255, 255, 255, 0.5)
  • hsl, hsla : hue(색상), saturation(채도), lightness(명도), ALPHA(불투명도)
    hue 는 각도를 사용하고 채도,명도는 %를 사용합니다. 채도값이 높아질 수록 원색 계열에 가까워지고 명도는 0에 가까워질 수록 검정색에 가까워집니다. 예) hsla(0, 50%, 50%, 0.5)

웹 브라우저는 운영체제가 지원하는 기본 폰트(웹 안전 폰트)만 화면에 렌더링합니다. (참고 : https://www.cssfontstack.com)
즉, 사용된 폰트가 사용자 컴퓨터에 없으면 렌더링되지 않습니다.

웹에서 사용되는 안전한 폰트는 다음과 같습니다.

  • Arial : [sans-serif] 고딕체
  • Verdana : [sans-serif] 고딕체
  • Courier New : [monospace] 코드체(공간이 동일)
  • Georgia : [serif] 명조체
  • Times New Roman : [serif] 명조체
  • Trebuchet : [serif] 명조체

하지만 웹 안전 폰트만으로 사용하는 디자이너는 없습니다!!
Helvetica 폰트의 경우 디지이너가 애용하는 폰트이지만 Mac OSX 는 지원, Window 는 기본 지원하지 않고 있습니다.

그렇기 때문에 비주얼 디자인 과정에서 적용 가능한 웹폰트를 사용해야 합니다.

폰트 저작권 주의! (참고 : https://www.hyundaicard.com)

저작권 없는 폰트

  1. https://fonts.google.com
  2. https://google.co.kr/search?q=무료+웹폰트


font-family

font-family 속성은 해당 요소에 사용되는 폰트의 종류를 정의합니다.

일반적으로 하나가 아닌 여러 개의 폰트 이름을 지정하여 사용하는데 브라우저는 정의한 순서대로 지원하는 폰트를 골라 렌더링을 해줍니다.

만약 첫 번째 폰트 종류를 해당 브라우저가 지원하지 않는다면 자동적으로 두 번째 폰트를 렌더링 하는 것입니다.

이 속성은 우리에게 친숙한 돋움, 맑은 고딕, 나눔폰트 등과 같은 일반적인 특성을 공유하는 폰트의 집합체를 담고 있습니다.

폰트의 모양을 집합체로 담고 있다고 볼 수 있습니다.

폰트 패밀리를 선언할 때 주의할 점은 한글 폰트의 경우 문자열로 묶어줘야 합니다.

예를 들어 font-family:'돋움', Dotum;

그리고 각 폰트 이름은 콤마(,)로 구분하며 만약 폰트 이름에 띄어쓰기가 되어 있다면 그것은 반드시 따옴표로 묶어 주어야 합니다.

그리고 웹 폰트, 즉 시스템 폰트가 아닌 웹 폰트 다시 말해 디자인된 폰트이지만 웹에서 사용하기 위해 다자인된 폰트를 웹 서비스 상에서 이미지가 아닌 시스템 폰트처럼 사용하기 위해 만들어진 폰트를 일컫는데 이러한 폰트는 웹 서비스를 제공해 주는 곳에서 폰트를 서버와 같은 곳에 올려놓고 사용하게 되며 모든 브라우저에서 호환성을 유지하기 위해 폰트 또한 변환하여 서비스를 제공해줘야 합니다.

css
body {
    font-family:'돋움', Dotum, arial, sans-serif;
}

font-style

폰트 스타일은 대개 italic, normal 을 많이 사용하며, 이태릴릭체는 기울기 모양으로 된 스타일이며 normal 은 기울기가 없는 일반 폰트를 말합니다.

font-size

폰트 사이즈는 크기를 정의하는 것이며 사이즈를 선언시 폰트단위를 지정할 수 있는데, 그 단위에는 px, em, %, pc, rem 등이 있습니다.

css
div { font-size:12px; }
div { font-size:100%; }

font-weight

font-weight 는 폰트의 굵기를 정의하는데 대개 normal, bold 를 사용합니다.

strong 요소에 이 속성 값인 normal 을 선언하게 되면 일반 굵기로 표현됩니다.

그리고 숫자로 100~900 까지 굵기를 지정하여 선언할 수 있으나 폰트 종류에 따라 호환성이 떨어지므로 잘 사용하지는 않습니다.

다만 웹 폰트의 경우 폰트를 제작시에 폰트 굵기를 숫자로 사용자 정의하여 만들게 되는데 이 경우 그 값을 사용할 수 있습니다.

예를 들어, monoLight 라는 이름의 폰트가 있을 경우 이 폰트에 normal 도 있을 것이고 bold 를 가진 것이 있을 텐데 이 경우에 보통체가 500으로 선언되어있다면 500으로 아니면 볼드체가 700으로 선언되어 있다면 700으로 명시적으로 선언하여 그 웹 폰트를 사용하는 것이 호환성이 좋습니다.

font

font 는 모든 폰트 속성들을 하나로 정의하는 축약 속성입니다.

그 안에 포함할 수 있는 속성들에는 font-style,font-weight, font-size/line-height, font-family 가 있으며 그 중 font-size 와 font-family 는 필수 값입니다.

만약 두 값 중 하나라도 작성하지 않는다면 기본값으로 설정됩니다.

css
.box { font: 16px/1.5 Verdana; }

폰트 단축속성을 최소한으로 많이 이용되는 방법이며, 앞서 언급한 크기와 폰트종류 순서는 둘다 써야 하는데 이 사이에 슬래시로 구분하여 line-height(줄간격)을 선언하여 사용할 수 있습니다.

그리고 주의할 점은 글씨 크기와 line-height(줄간격)사이에는 공백없이 슬래시를 작성해야 합니다.

폰트 선언에 줄 간격을 넣는 것은 옵션이지만 일단 넣기로 했다면 정해진 위치에만 사용할 수 있습니다


폰트 속성의 순서는 혼란스러운 CSS 규칙 중 하나이며 많은 사람이 가장 많이 실수를 할 수 있는 부분입니다

폰트 속성에는 최소한의 키워드가 정해져 있으며, 순서도 지켜야 합니다.

font: 폰트사이즈 폰트패밀리;

요점은 단축 속성을 사용할 경우에 반드시 이 두 가지 값을 정의해야 하고 순서도 지켜야한다는 겁니다

크기를 먼저 쓰고 그 다음에 폰트 종류를 씁니다.

순서를 바꾸거나 그 중 하나를 생략한다면 최신 브라우저 대부분은 font 선언을 무시하게 됩니다

또한 다른 값을 포함할 때는 추가하는 키워드를 모두 필수적인 키워드보다 앞에 선언해야 한다는 것입니다.

예외가 하나 있는데 바로 다음 부분에서 살펴보겠습니다.

body { font: bold italic small-caps 16px Verdana, Helvetica, Arial; }

위와 같이 폰트 사이즈와 폰트 종류앞에 그 밖의 키워드를 사용하며, 그 앞에 쓴 키워드들 간의 순서는 전혀 신경쓰지 않아도 된다는 점을 기억하세요.

다시 말해, 지켜야 할 것은 모두 크기 앞에 선언해야 한다는 것입니다.

그 밖의 키워드를 뒤에 써도 브라우저는 이 선언을 무시합니다.



텍스트(Text) 레이아웃 속성

텍스트 간격 및 레이아웃 기능 등에 영향을 주는 속성으로 행간, 자간(글자 사이의 간격), 어간(단어 사이의 간격), 정렬, 변형, 꾸밈, 그림자 등을 꾸며줄 수 있습니다.

line-height

line-height 속성은 한 줄에 대한 높이값을 지정하는 것입니다.

그리고 자간(letter-spacing)에서는 음수값이 허용되지만 행간은 음수값이 허용되지 않습니다.

정확히는 라인인 행 사이의 수직 공간을 늘이거나 줄이는 방법입니다.

값으로 숫자나 %, em, px 등을 할당할 수 있습니다. 음수값을 지정할 수 없습니다

기본값이 normal 이고 브라우저에 다를 수 있으나 Chrome 은 1.25 로 할당되어 있습니다.

그래서 이 값을 CSS 를 초기화작업시 명시적으로 선언하는 경우가 일반적입니다.

숫자로 선언할 경우 현재 글꼴에서 몇 배 크기로 할지를 지정하게 됩니다.

만약 현재 글꼴이 14px 이라면 line-height: 1.5 로 할 경우 줄간격이 21px 높이로 지정됩니다.


line-height 가 양분되는 공간은 다음의 공식에 따릅니다.

공간 = ( 행간(line-height) - 글자크기(font-size) ) ÷ 2

예를 들어, 100px 만큼 행간 높이가 설정되었고, 글자 크기가 24px 이라면?
아래 공식에 따라 결과 값인 38px 만큼 남은 공간을 양분하게 됩니다.
공간 = ( 100 - 24 ) ÷ 2 = 38


text-decoration

텍스트의 꾸밈을 지정하는 것으로 text-decoration 속성은 텍스트에 효과를 주는 것으로 line 스타일과 관련이 있습니다.

  • underline : 텍스트 아래에 라인을 지정(밑줄 효과)
  • overline : 텍스트 위에 라인을 지정(윗줄 효과)
  • line-through : 텍스트 중앙에 라인을 지정
css
h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

text-indent

첫 번째 줄의 텍스트 들여쓰기를 지정하는 것입니다.

이 속성은 문단 텍스트의 첫줄만을 들여쓰기로 표현할 때 사용하는 속성이고 음수값을 선언할 경우 내어쓰기와 같이 표현됩니다. (주목할 점은 한줄 라인에서 적용)

css
p { text-indent:20px; }

text-align

인라인 속성의 수평 방향 정렬을 지정하는 경우에 사용합니다.

즉, 이 속성은 문서를 수평으로 정렬할 때 사용합니다.

  • left : 왼쪽으로 인라인 요소를 정렬
  • right : 오른쪽으로 인라인 요소를 정렬
  • center : 중앙으로 인라인 요소를 정렬

많은 제작자가 많이 오해하는 점이 글자(텍스트)를 수평선 상에서 정렬하는 속성으로 잘못알고 있는 경우가 많습니다.

이 속성에는 다음과 같은 특징이 있습니다.

  • 이 속성을 정의하는 대상은 블록 요소(Flow Content)에만 적용할 수 있습니다.
  • 정렬되는 것은 block 요소 안에 있는 inline(inline-block) 요소만 정렬이 가능합니다.
  • 정렬되는 인라인 요소에는 img, a, input 요소 등.. 이 있으며 중요한 것은 텍스트도 인라인 요소라는 것입니다.

letter-spacing

letter-spacing 속성은 텍스트 내에서 문자 간의 간격의 좁고 넓음의 여부를 지정합니다.

즉, 자간 간격 너비를 지정합니다.

css
h1 { letter-spacing:1px; }
h2 { letter-spacing:-1px; }

vertical-align

vertical-align 속성은 요소의 수직 정렬 상태를 지정합니다.

단순히 이 속성이 수직 정렬만 한다고 생각하면 CSS 를 제어하는데 어려움을 겪을 수 있습니다.

이 속성이 어떤 요소에 적용되고 어떻게 정렬되는지 이해해야 좀더 쉽게 CSS 를 제어할 수 있습니다

이 속성은 사용되는 요소의 성질이 CSS 에서 인라인 요소와 인라인 블록 요소에서만 사용 가능하며 이 요소들을 수직 정렬할 때 vertical-align 을 사용합니다.

예외적으로 table 내에서의 table cell 에서는 요소를 수직정렬 시키는 것이 아니라 content area 를 수직정렬시킵니다.


vertical 속성은 다음과 같은 특징을 가지고 있습니다.

  • 앞서 언급한 inline 이나 inline-block 요소에만 적용됩니다.
    따라서 div와 같은 block 요소에 이 속성을 사용하면 동작하지 않습니다.
  • 요소 자체만을 정렬하고 요소 안의 내용에는 영향을 미치지 않습니다 ( 단, table cell 에 적용할 때는 예외)
    그래서 table cell 에 적용할 경우에는 내용에도 영향을 미칩니다.
  • vertical-align 으로 정렬하려는 요소는 다른 인라인 요소에 상대적으로 정렬하게 됩니다.
    그래서 같은 줄에서 인라인 요소의 크기에 따라 높낮이가 달라질 수 있으며, line-height 에 선언된 값에 따라서도 달라질 수 있습니다.

white-space

white-space 속성을 이용하면 pre 요소를 사용한 것 같은 효과를 줄 수 있습니다.

white-space 에는 다음과 같은 속성값들이 있습니다.

  • normal : 현재 상태 그대로
  • pre : pre 요소를 사용한 것처럼 텍스트를 입력한 그대로를 유지함
  • pre-line : pre 요소를 사용한 것과 같은 효과에서 들여쓰기된 공백 부분까지 제거해 줌
  • nowrap : 래핑을 하지 않는다는 뜻으로 한 줄로 렌더링됨

word-break & word-wrap

word-break 는 단어의 분리를 어떻게 할 것인지를 결정하는 속성이며, word-wrap 은 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여하는 속성입니다.

HTML
/*
    (공백/띄어쓰기) 수고했어 오늘도
    (음절)         수 고 했 어 오 늘 도
*/
p {word-break:break-all;}
    
p {word-wrap:break-word;}

text-shadow

text-shadow는 글자에 그림자를 꾸며주는 속성입니다.

HTML
/* text-shadow: x y blur spread color; */
h1 {
    text-shadow:4px 4px 0 #9bdbde;
    text-shadow:0 -3px 0 #9bdbde,
                0 3px 10px #943978;
}


포토샵에서의 타이포그래피 설정과 브라우저 상에서 렌더링되는 CSS 와 차이가 나는데 왜 그럴까요?

디자이너의 시안 파일을 토대로 CSS 를 작성했을 때 동일한 결과가 나오지 않는 경우가 많을 것입니다.
안타깝게도 디자이너가 디자인을 제작하는 환경(예: Photoshop, Sketch)과 CSS 를 통해 그려지는 환경(예: 웹 브라우저)이 달라서 정확하게 일치하는 결과가 그려지지 않은 겁니다.
이러한 문제는 웹 환경 뿐만 아니라, 앱 환경에서도 마찬가지 입니다.

하지만 제작 환경만 문제삼을 순 없을 것입니다. 그에 대한 해결책을 알아보도록 하겠습니다.

타이포그래피가 포토샵에서 작업한 결과물이 실제 모니터에 표시되는 view 와 동일하게 나타나기 위해선는, 포토샵의 옵션과 css의 옵션이 완전하게 동일해야 합니다.

각종 간격, 요소의 영역,font-family, font-weight , font-size, line-height, ect ...

그리고 디자인할때 눈에 보이는 컬러의 경계가 아닌, 각 요소가 가지고 있는 영역에 맞춰서 작업을 해야합니다.
하지만 많은 디자이너가 그렇지는 못할겁니다.
특히 비공식 서체로 디자인을 하는 경우에는 간격이 실제 폰트와 다르게 표시될 가능성이 많기때문에 간격을 맞춘다고 맞췄는데, 실제로는 다른경우가 많이 있습니다. 이 사실을 아는경우도 있고, 모르는 경우도 있지만 어쨌든 많은 디자이너들이 눈으로 봤을 때 완성도 높은 배치를 잡은 다음에, 완전 세세한 옵션보다는 큰 수치들만 가이드문서에 기록하거나 하는 경우가 많습니다. 그래서 디자인파일과, 실제 개발과 차이가 생기게 됩니다.


위와 같은 이유로 완벽한 대안은 쉽지 않겠지만 능률이 올라가는 대안을 제시해 보자면 다음과 같습니다.

#1 디자이너와 충분한 대화를 한다.
우선 디자이너에게 포토샾의 수치와 실제 수치가 다르다는걸 인지시키는것이 중요합니다.
디자인 가이드라인문서와 그 수치를 그대로 적용했을 때의 차이를 보여주고, 디자인의 기준이 디자인 파일이 아닌 디스플레이에 있다는 사실을 공유해야 합니다.

#2 작업종료전에 최종적으로 디자이너와 디자인 QA를 진행한다.
위에 말했듯이, 기술적으로 만들기에 완벽하고 세세한 수치를 건내주면 좋지만, 아닐경우에는 어쩔 수 없이 디자인이미지와 실제 결과물에는 차이가 있을 수 밖에 없습니다.
문서적으로 해결하기 어렵다면 디자이너와 함께 조율하는 시간이 필요합니다.
일정을 잡을때, 디자인 QA를 포함시켜서, 모니터에 보여지는 결과물을 중심으로 디자이너의 눈으로 조율하고, 개발자가 이를 실행해주는 식으로 보통 많이 진행합니다.
좀 지루하고 짜증나게 느껴질수 있지만 매우 중요한 시간입니다.


무엇보다 중요한 것은 작업자간의 이해타산적인 자세가 중요할 것입니다. (참고 : 디자이너와 개발자의 거리 1px)



Related Info

  1. CSS 폰트/텍스트 스타일링
  2. 웹폰트 사용하기(http://wit.nts-corp.com/2017/02/13/4258)
  3. 블럭킹 없이 CSS 로드하기
  4. 디자이너와 개발자의 거리 1px(https://brunch.co.kr/@creative/9)
  5. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 1


Jaehee's WebClub


저작자표시 변경금지