타이포그래피
타이포그래피 (Typography)
출처: 문서
본문
Font
Element Plus는 서로 다른 플랫폼에서도 최상의 프레젠테이션을 보장하기 위해 폰트 규칙을 만들어 두었어요. 이미지 두 장을 붙여서 헤딩, 본문 텍스트, 코드 등 다양한 글꼴이 실제로 어떻게 보이는지 바로 확인할 수 있습니다.
img {
width: 220px;
height: 174px;
margin: 0 24px 24px 0;
}
img:nth-of-type(3) {
margin-right: 0;
}
Font Convention
상황에 따라 쓰는 폰트 크기와 굵기, 줄 높이를 정해 둔 것이 Font Convention이에요. TS와 JS 두 가지 예시로 각각의 스타일을 확인할 수 있어요.
Font Line Height
폰트 크기에 어울리는 줄 높이(Line Height)도 함께 규칙으로 관리합니다. 이 값들은 코드로 바로 확인해 볼 수 있어요.
Font-family
font-family:
Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
이 폰트 패밀리는 시스템 환경에 따라 가장 적절한 글꼴을 순서대로 골라 쓰도록 되어 있어요. 눈에 띄는 건 微软雅黑처럼 한국어 사용자에게 익숙하지 않은 글꼴도 함께 들어 있다는 점인데요, 이는 중국어 서체까지 포함하는 Element UI의 전통을 이어받았기 때문이에요.
Source
정확한 출처를 따라가 보고 싶다면 Docs 페이지에서 원문을 확인할 수 있어요.