Typography 제작

이번에는 타이포그라피 라이브러리를 만들어보겠다.

실무에서는 디자이너가 타이포그라피 관련된 시안을 준다. 그 시안에서 사용하는 타이포그래피만 사용해서 통일성을 웹페이지에 부여하기 위함임.

타이포그라피 라이브러리를 만든다는 것의 의미는 디자이너가 제공한 시안에 맞춰 폰트관련된 클래스들을 모아놓은 라이브러리를 만든다는 것이다. 이 라이브러리를 활용해 앞으로 폰트관련된게 있으면 해당 클래스를 사용해 편하게 작업할 수 있다.

시안을 보면 Noto Sans CJK KR이라는 폰트를 사용하고 있다.

보면 네가지의 폰트만 사용하고 있다. 구글 폰트에서 임베드 해오자.

잘 렌더되고 있다. 여기에 떠야 실제로 적용되고 있는 것임.

다음은 폰트사이즈와 관련된 라이브러리를 만들어보자.

Tiny부터 보자.

이런 값들을 갖고 있다.

이때 line height와 letter는 그대로 px로 적기보다 em단위로 적는게 관습적이다.

그리고 모든 폰트가 공통된 속성을 갖고 있다면 이는 body클래스에 넣어주는게 꿀팁