Typograpy

김동현·2021년 10월 21일

목록 보기

8/13

font

폰트 관련 속성들을 font라는 CSS 프로퍼티 하나로 font-size, font-family, font-style, font-weight, line-height 속성을 모두 작성할 수 있습니다.
font 단축 속성 사용시 font-size, font-family 값은 필수로 작성해주어야 합니다. 이외 생략된 속성들은 기본값을 사용하게 됩니다.
작성시 font-family는 가장 마지막에, font-style과 font-weight는 font-size 앞에 작성해주어야 하고, line-height는 font-size 뒤에 /작성하고 line-height 값을 작성해줍니다.

selector {
    font: <font-style> <font-weight> <font-size>/<line-height> <font-family> ;
}

font-size

글자의 크기를 지정하는 속성입니다.
값 의미 기본값
단위 px, em, rem 등 단위로 지정 16px
% 단위 부모 요소의 font-size 값 백분율로 지정
px 단위는 절대 단위로서 고정된 크기를 가집니다.
em, rem은 상대 단위로서 기준에 따라 값이 상대적으로 변합니다.
- em 단위는 자기 자신의 font-size 크기가 1em입니다. 만약 font-size가 24px이라면 10em은 240px과 같은 의미입니다.
- rem은 HTML 문서에서 html 태그의 font-size 값을 1rem이라고 합니다.
px, em, rem 단위를 사용하며, 일반적으로 px 단위를 사용하여 고정적으로 지정해줍니다.

값	의미	기본값
단위	px, em, rem 등 단위로 지정	16px
% 단위	부모 요소의 font-size 값 백분율로 지정

font-family

폰트 서체(글꼴)를 표현할 때 사용하는 속성입니다.

selector {
    font-family: "글꼴 후보",,, 글꼴 계열;
}

font-family에서는 ,(콤마)를 사용하여 여러 글꼴 후보들을 작성할 수 있습니다. 작성한 후보들이 사용자 환경에 없다면 마지막에 작성한 글꼴 계열을 이용한 서체를 사용합니다.

selector {
    font-family: "Roboto", "Poppins", sans-serif;
}

위 코드는 Roboto라는 서체가 없다면 Poppins 서체를 Poppins 서체도 없다면 sans-serif 계열의 서체를 사용합니다.

font-style

글자의 스타일(기울기)를 지정하는 속성입니다.
값 의미 기본값
normal 스타일 없음 normal
italic 이탤릭체
oblique 기울어진 글자
일반적으로 em 태그에 font-style: none;을 사용하여 기본적으로 기울어진 글자(italic)를 일반적인 글자로 표시하기 위해 자주 사용합니다.

값	의미	기본값
normal	스타일 없음	normal
italic	이탤릭체
oblique	기울어진 글자

font-weight

폰트의 두께를 설정하는 속성입니다.
값 의미 기본값
normal 기본 글자 두께, 숫자 400과 동일 normal
숫자 100 ~ 900 사이 100단위 숫자 9개
bold 글자 두껍게, 700과 동일

값	의미	기본값
normal	기본 글자 두께, 숫자 400과 동일	normal
숫자	100 ~ 900 사이 100단위 숫자 9개
bold	글자 두껍게, 700과 동일

400이 일반적인 두께(Regular, normal), 700이 두꺼운 두께(Bold)라는 것은 기억하는 것이 좋습니다.

line-height

줄의 높이를 지정하는 속성입니다.

값	의미	기본값
normal	브라우저의 기본 정의를 사용(1.0 ~ 1.1)	normal
단위	px, em, rem 등 단위로 지정
% 단위	요소 자체의 글꼴 크기의 백분율로 지정
숫자	요소 자체의 글꼴 크기(font-size)의 배수로 지정

normal 값은 기본적으로 글꼴마다 값이 다릅니다. 즉, 글꼴마다 갖는 기본 line-height 값이 다릅니다.
줄간격이 얼마가 되든간에 글자가 줄 간격의 가운데에 배치가 됩니다. 이를 이용하여 텍스트를 수직으로 정렬할 때 자주 사용합니다.
em 단위값 사용시 계산된 값을 하위 요소에게 전달됩니다. 즉, 상위 요소의 line-height 값이 1em이고, font-size 값이 20px인 경우 하위 요소에게는 20px 값이 상속됩니다.
하지만 단위 없는 숫자값 사용시 계산된 값이 아닌 배수가 전달됩니다. 즉, 상위 요소의 line-heigth 값이 1이고, font-size가 20px인 경우 하위 요소에게 20px이 전달되는 것이 아니라 1이 전달되고 하위 요소의 font-size 값이 1 배수인 값이 line-heigth 값으로 설정됩니다.
em을 포함한 다른 단위값들도 계산된 값이 상속되므로 일반적으로 단위 없는 숫자값을 사용합니다.

노란색 부분이 line-height 부분이며, font라는 텍스트가 line-height의 가운데에 배치되는 것을 볼 수 있습니다.

color

글자의 색상을 지정하는 속성 입니다.
값 의미 기본값
색상 문자의 색상을 지정 rgb(0, 0, 0)

값	의미	기본값
색상	문자의 색상을 지정	rgb(0, 0, 0)

색상값

색상을 값으로 사용하는 속성에는 아래와 같은 색상 값을 작성할 수 있습니다.

키워드
색상을 나타내는 키워드를 작성하여 적용할 수 있습니다.
ex) red, blue, green, yellow, transparent(투명) 등 ,,,
rbg
rgb() 함수를 작성하여 적용할 수 있습니다. 0~255 사이 숫자 인수 3개를 작성하며 첫 번쨰 인수는 Red 값, 두 번째 인수값은 Blue 값, 세 번째 인수는 Green 값을 전달합니다.
ex) rgb(0,0,0) -> 검정색, rgb(255, 255, 255) -> 흰색

rgba
rgba() 함수를 작성하여 적용할 수 있습니다. 숫자 인수 4개를 작성하며 첫 번쨰 인수는 Red 값, 두 번째 인수값은 Blue 값, 세 번째 인수는 Green 값, 네 번째 인수로는 투명도를 전달합니다.
투명도는 0~1 사이 숫자를 전달합니다. 0은 투명, 0.5는 반투명, 1은 불투명을 의미합니다.
ex) rgba(0, 0, 0, 0) ~ rgba(255, 255, 255, 1)
hex / 16진수
#000000 ~ #ffffff 값을 작성할 수 있습니다. 16진수 숫자 6개를 작성하며 두 자리씩 3부분으로 구분됩니다. 앞 두 자리는 Red 값, 그 다음은 Blue 값, 마지막 두 자리는 Green 값을 작성합니다.

text-align

텍스트 정렬 방식을 지정하는 속성입니다.
값 의미 기본값
left 왼쪽 정렬 left
right 오른쪽 정렬
center 중앙 정렬
justify 양쪽 맞춤(2줄 이상인 경우에만)
block 요소의 텍스트는 요소의 가로너비 전체의 중앙에 배치됩니다. text-align 속성을 가로 너비가 충분히 존재하는 경우에만 적용이 되므로 block 요소에만 사용하는 속성이며, 요소의 Content 영역 가로 너비에 여백이 존재하는 경우에만 적용됩니다.
inline 요소의 텍스트 경우 Content만큼의 가로 너비를 갖기 때문에 정렬이 적용되지 않습니다. 만약 inline 요소의 텍스트를 정렬하고자하는 경우 상위 block 요소에 text-align 속성을 사용해야 합니다.

값	의미	기본값
left	왼쪽 정렬	left
right	오른쪽 정렬
center	중앙 정렬
justify	양쪽 맞춤(2줄 이상인 경우에만)

text-indent

첫 번째 줄의 들여쓰기를 설정하는 속성입니다.
값 의미 기본값
px, em, rem 등 0
% 단위 요소 자체의 너비 백분율로 지정
음수값을 사용할 수 있으며 음수값을 사용시 왼쪽으로 들여쓰기(내어쓰기)가 됩니다.
inline 요소의 경우 Content 영역만큼만 가로 너비를 갖기 때문에 text-indent 속성이 적용되지 않습니다. 즉, block 요소에만 사용되는 속성입니다. 참고로 text-align 속성처럼 Content의 가로 너비에 여백이 존재하지 않아도 적용됩니다.
참고로 background라는 CSS 속성을 사용하여 이미지를 삽입할 때 text-indent 속성의 값으로 -9999px을 지정하여 대체 텍스트를 작성할 수도 있습니다.

값	의미	기본값
px, em, rem 등		0
% 단위	요소 자체의 너비 백분율로 지정

text-transform

텍스트를 변경해주는 속성입니다(한국어 적용 안됨).
값 의미 기본값
none 변경 없음 none
capitalize 단어의 첫 문자를 대문자로
uppercase 모든 문자를 대문자로
lowercase 모든 문자를 소문자로

값	의미	기본값
none	변경 없음	none
capitalize	단어의 첫 문자를 대문자로
uppercase	모든 문자를 대문자로
lowercase	모든 문자를 소문자로

text-decoration

문자의 장식을 설정하는 속성입니다.
font 속성처럼 여러 속성을 작성할 수 있는 단축 속성으로 사용됩니다. 즉, 공백으로 구분하여 스타일들의 작성하며 이때 작성 순서는 없습니다.

selector {
    text-decoration: <text-decoration-inline> <text-decoration-style> <text-decoration-color> <text-decoration-thickness>;
}

text-decoration-inline, text-decoration-color, text-decoration-style, text-decoration-thickness 속성을 작성합니다.
text-decoration-inline 값은 필수로 작성해주어야 합니다.

text-decoration-inline

값 의미 기본값
none 선없음 none
underline 밑줄 지정
overline 윗줄 지정
line-through 중앙 선 지정
여러 값을 공백으로 구분하여 작성시 여러 스타일을 지정할 수 있습니다.
보통 a 태그의 밑줄을 없애기 위해 text-decoration: none;을 작성하여 기본적으로 표시되는 밑줄을 제거하는 용도로 자주 사용됩니다.

값	의미	기본값
none	선없음	none
underline	밑줄 지정
overline	윗줄 지정
line-through	중앙 선 지정

text-decoration-style

text-decoraiton-inline으로 설정된 밑줄의 스타일을 설정하는 속성입니다.
값 의미 기본값
solid 일반 밑줄
double 두 줄
dotted 점선
dashed 끊긴 점선
wavy 곡선

값	의미	기본값
solid	일반 밑줄
double	두 줄
dotted	점선
dashed	끊긴 점선
wavy	곡선

text-decoration-color

text-decoraiton-inline으로 설정된 밑줄의 색상 설정하는 속성입니다.

text-decoration-thickness

text-decoraiton-inline으로 설정된 밑줄의 굵기를 설정하는 속성입니다.

letter-spacing

문자의 자간을 설정하는 속성입니다.
값 의미 기본값
normal 문자 사이의 일반 간격, 글꼴에 따라 값이 다름 normal
단위 px, em, rem 등(% 단위는 사용 불가능)
단위값 작성시 normal 값이 더하거나 뺀 값을 적용됩니다.
보통 em 단위를 사용하여 font-size에 비례해서 적용되도록 사용합니다. 또한 음수값이 허용이 됩니다.

값	의미	기본값
normal	문자 사이의 일반 간격, 글꼴에 따라 값이 다름	normal
단위	px, em, rem 등(% 단위는 사용 불가능)

word-spacing

단어간 간격을 설정하는 속성입니다.
값 의미 기본값
normal 문자 사이의 일반 간격, 글꼴에 따라 값이 다름 normal
단위 px, em, rem 등(% 단위는 사용 불가능)
단위값 작성시 normal 값이 더하거나 뺀 값을 적용됩니다.
보통 em 단위를 사용하여 font-size에 비례해서 적용되도록 사용합니다. 또한 음수값이 허용이 됩니다.

값	의미	기본값
normal	문자 사이의 일반 간격, 글꼴에 따라 값이 다름	normal
단위	px, em, rem 등(% 단위는 사용 불가능)

word-break

텍스트를 줄바꿈을 할 때 단어 기준으로 할 지 문자 기준으로 할 지 설정하는 속성은 입니다.

값	의미	기본값
normal	기본 줄 바꿈 규칙을 사용	normal
break-all	문자 기준으로 줄바꿈 (한,중,일 텍스트 기본값)
keep-all	단어 기준으로 줄바꿈 (영문 텍스트 기본값)

텍스트가 영문인 경우에는 normal이 keep-all처럼 동작합니다. 즉, 단어를 끊지 않고 줄바꿈을 사용하게 됩니다.
만약 한 라인에 단어 하나만 존재할 때 이 단어의 길이가 요소의 가로 너비보다 길더라도 줄바꿈을 하지 않고 가로 너비를 넘어 텍스트가 배치됩니다.
일반적인 경우 한 라인에 배치 가능한 단어들만 배치되고 이후에는 줄바꿈되어 배치됩니다.
텍스트가 한, 중, 일인 경우에는 normal이 break-all처럼 동작합니다. 즉, 단어를 끊더라도 요소의 가로 너비를 넘지 않도록 줄바꿈이 사용됩니다. 그렇기 때문에 언제나 요소의 가로 너비를 끝까지 채우는 방식으로 텍스트가 배치됩니다.

Web Font

우리가 어떤 폰트를 CSS에 사용하든지 간에 웹 사이트를 사용하는 사용자 환경에 우리가 사용한 서체가 없다면 기본 서체가 적용되어 표시가 됩니다.

그렇기 때문에 특정 폰트를 사용하는 경우 반드시 Web font를 사용자에게 제공해야 합니다.

web font를 사용하는데 두 가지 방법이 존재합니다.

https://fonts.google.com/ 을 통해 설명하겠습니다.

1. 갖다 쓰기

구글 폰트 사이트에 접속시 위와 같은 웹 사이트가 표시됩니다.

원하는 폰트를 선택하면 왼쪽 사이드 바에 우리가 흔히 본 link 태그가 있습니다. 이 link 태그를 복사하여 우리 HTML 문서의 head 태그에 붙여넣습니다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">

그다음 우리의 CSS 파일에 위 그림의 CSS 코드를 요소에 작성하여 폰트를 적용시킵니다. font-family 속성은 상속되는 속성이므로 일반적으로 body 태그에 font-family 속성을 작성하여 다른 요소에게 상속을 받아 적용되도록 사용합니다. 따로 모든 요소에 폰트를 적용할 필요가 없습니다.

body {
	font-family: 'Nanum Gothic', sans-serif;
}

이때 주의할 점은 폼 태그(input, button, textarea ,,,)에서는 상속이 되지 않으므로 직접 명시해주어야 합니다.

input,
button,
textarea,
select {
    font-family: 'Nanum Gothic', sans-serif;
}

2. 직접 제공하기

구글 폰트 사이트에서 원하는 폰트를 선택한 후 오른쪽 사이드바 하단에 Download all 이라는 버튼을 클릭하면 폰트 파일을 다운로드 할 수 있습니다.

다운받은 폰트 파일을 프로젝트의 assets 폴더 안에 font 폴더 안에 옮겨 줍니다(폴더 구조는 개발자 마음대로 만든다).

그다음 Web font 명세를 위한 CSS 파일을 작성해주어야 합니다.

// fonts.css
@font-face {
    font-family: '사용할폰트이름';
    font-style: 기울기;
    font-weight: 굵기;
    src: url('폰트파일.eot'); /* IE9 Compat Modes */
    src: url('폰트파일.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('폰트파일.woff2') format('woff2'), /* Super Modern Browsers */
       	 url('폰트파일.woff') format('woff'), /* Pretty Modern Browsers */
       	 url('폰트파일.ttf')  format('truetype'), /* Safari, Android, iOS */
       	 url('폰트파일.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face 키워드를 통해 선언을 하며 {,,,}안에 폰트에 대한 정보를 작성합니다. 이때 각 폰트 파일 하나당 하나의 @font-face를 작성합니다.

font-family 속성에는 내가 사용할 폰트 이름을 설정할 수 있습니다. 이때 작성한 font-family 속성의 값이 css 파일에서 사용할 폰트 이름이 됩니다.

font-style 속성으로 기울기를 명시해줍니다. 예를 들어, 이탤릭체를 위한 폰트라면 italic이라는 값을 명시하고 일반적인 폰트라면 normal로 설정합니다.

font-weight 속성으로 두께를 명시해줍니다.

그다음 src 속성을 통해 우리가 가져온 폰트 파일의 경로를 작성해 줍니다. url 함수로 경로를 작성해주고, format 함수로 폰트 파일 확장자를 명시해줍니다.

브라우저마다 지원하는 폰트 확장자가 다르기 때문에 ,(콤마)를 사용하여 다양한 확장자의 파일을 제공합니다. 예를 들어, Safari와 Android, iOS 환경인 경우 다른 폰트 파일은 무시하고 폰트 파일 확장자가 truetype 인 폰트 파일만을 다운받습니다. 이렇게 함으로써 조금 더 효율적으로 폰트를 로드할 수 있습니다.

https://css-tricks.com/snippets/css/using-font-face/ 위 사이트는 각 브라우저마다 지원하는 폰트 확장자에 대한 코드를 제공합니다.

해당 사이트에서 위 코드를 찾을 수 있는데 우리는 해당 코드를 복사하여 url 함수에 사용할 폰트 경로만 새로 지정하여 사용할 수 있습니다.

작성한 폰트 CSS 파일(명세)을 HTML 문서에서 link 태그를 통해 가져오거나, 기존 CSS 파일에 @import url('css 폰트 파일 경로'); 를 통해 CSS 파일에서 다른 CSS 파일을 불러올 수도 있습니다.

김동현

Frontend Dev

이전 포스트

Media Query

다음 포스트