Typography

seeh_h·2020년 12월 3일
1

이번 포스팅은 font 관련 속성들에 대해 정리해 본다. 😁😁

Typography란?

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. -Wikipedia-

Typegraphy란 한마디로 글자의 배열이나 간격, 글씨체등을 더욱 읽기 쉽게, 예쁘게 만드는 것을 의미한다. 관련 태그를 정리해보자.


em vs rem

1. em

  • 크기를 나타내는 상대적 단위
  • 0.5em이라 하면 부모의 font-size * 0.5 px이 된다
  • 0.5em === 50%, %로 대체해서 쓸 수 있다.

2. rem

  • root em으로, 0.5rem이라 하면 root의 font-size * 0.5px이 된다.
  • rem의 기본 크기는 html의 font-size(16px)이다.

em과 rem의 사용에 대해서는 조금 더 자세하게 포스팅 할 예정이다.


font에 관련된 설정들

font-size

  • 글자 크기에 대한 속성으로 px, em, rem으로 사용 가능하다.
  • 반응형 웹사이트를 제작하기 위해서는 px의 사용은 지양하는 것이 좋다!

line-height

  • line의 높이에 대한 설정으로 줄 간 거리를 지정한다.
  • px, em, rem 사용가능하다.

letter-spacing

  • 글자 사이의 간격을 조정한다.
  • em을 많이 사용한다.

font-family

  • 글씨체 관련 속성으로 최근에 여러 무료 font가 웹 상에 공개되어있다. 대표적으로 google Font가 있다!

text-align

  • 글자의 정렬에 관한 속성으로 left, right, center로 설정 가능하다.
  • block tag는 영향을 받지 않고, inline tag만 정렬한다.

font-weight

  • 글자 두께에 관한 속성으로, 100 단위로 적어줘야 한다. 대표적인 값들은 다음과 같다.
  • Thin : 300
  • Regular : 400
  • Bold : 700

color

글자 색을 나타내는 태그로 3가지 방식으로 표현 할 수 있다.

  • hex값으로 표현 : color : #AABBCC
  • rgb로 표현 : rgb(0,103,305)
  • rgba(rgb+투명도) : rgba(0,102,255,1) a가 0이면 완전 투명, 0.5면 50% 투명!
profile
주니어 개발자 성장기😎

0개의 댓글