[CSS] Typography

텍스트를 이쁘게 디자인 할 때 쓰입니다.

 

 

 

font-size

글씨의 크기

.text {
	font-size: 24px;
}

 

px, em, rem의 세 가지 단위를 사용합니다.

em (equal to capital m)

• 실제로 적용된 폰트 사이즈가 기준입니다. 
• ex) 폰트 사이즈가 12px이라 하면 1em = 12px

그렇지만 폰트 사이즈를 em으로 나타내기엔 조금 불안정한 감이 있습니다.

 

rem (root em)

• root는 html 문서를 뜻합니다.
• html에 적용된 font-size = 1 rem

 

 

 

line-height

줄 간격을 뜻합니다.

.text {
	font-size: 16px;
    line-height: 1.5;
}

 

단위로는 px, em, rem을 사용합니다.

• 줄 간격은 em을 많이 사용하기 때문에 단위를 생략하면 em으로 적용됩니다.
• 줄 간격이 커져도 글씨는 가운데에 배치됩니다.

줄 간격이 커져도 글씨는 가운데 배치

수직으로 무언가를 정렬할 때 많이 사용됩니다.

 

 

 

 

font-family

서체입니다.

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

서체가 여러 종류일 경우, 왼쪽에서 오른쪽 순으로 있는 서체부터 적용됩니다.

 

 

 

 

font-weight

font의 굵기입니다.

.text {
	font-weight: 400;
    /* 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 */
}

 

100 단위로 사용됩니다.

regular: 400

bold: 700

정도를 기억하면 됩니다.

 

 

 

color

글씨의 색상입니다.

.text {
	color: #0066ff; /* hex */
    color: rgb(0, 102, 255); /* rgb */
    color: rgba(0, 102, 255, 1); /* rgba */
}

hex, rgb, rgba의 세 가지 방식으로 표현합니다.

 

 

 

text-align

text를 정렬합니다.

.text {
	text-align: left;
    /* left | right | center */
}

 

 

 

 

text-indent

들여쓰기를 합니다.

.text {
	text-indent: 50px;
}

 

 

 

 

text-transform

텍스트를 변화시킵니다. 주로 알파벳에 유효합니다.

.text {
	text-transform: capitalize;	/*단어의 앞자리를 대문자로 바꿉니다.*/
    text-transform: uppercase;	/*모두 대문자로 바꿉니다.*/
    text-transform: lowercase;	/*모두 소문자로 바꿉니다.*/
}

 

 

 

 

 

text-decoration

텍스트에 줄을 긋는 것과 관련된 속성입니다.

.text {
	text-decoration: none;
    /* none | underline | line-through | overline */
}

 

a 태그의 underline을 없애는 용도로 none을 많이 사용합니다.

 

 

 

font-style

.text {
	font-style: normal;
    /* normal | italic | oblique */
}

<em>에 기본으로 적용되어 있는 italic을 없앨 때 주로 사용합니다.

 

 

 

webfont

웹에서 제공되는 font를 사용하거나 직접 제공하여 사용합니다.

웹에서 제공되는 font를 사용하면 네트워크에서 리소스를 받아오는 만큼 속도는 로컬보다 느립니다.

https://fonts.google.com/ 에서 font를 찾아볼 수 있습니다.

 

웹에서 가져오기 - <link>

html

<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=Roboto:ital,wght@0,300;1,300&display=swap" rel="stylesheet">


<p class ="roboto">roboto</p>

css

.roboto{ font-family: 'Roboto', sans-serif;}

 

 

 

웹에서 가져오기 - @import

html

<p class ="roboto">roboto</p>

css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap');

.roboto {
	font-family: 'Roboto', sans-serif;
}

 

 

 

 

로컬 웹 폰트 적용하기

css

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

font-family와 src를 필히 적어줘야 합니다.

src에는 로컬 폰트 파일의 경로가 들어갑니다.

 

https://css-tricks.com/snippets/css/using-font-face-in-css/

How to use @font-face in CSS | CSS-Tricks

이 사이트에서 모든 브라우저에 폰트가 적용되게 하려면 어떤 식으로 작성해야하는지 정보를 얻을 수 있습니다.