#6 - 디자인 정의 - 폰트

Material Design Typography Image 

디자인 정의에서 설명하지 못한 컬러에 대한 설명을 진행한다.

 

 

---

서체 관련 단어

서체를 뜻하는 단어

1. typo : 오타
2. typography : typeface를 가지고 제작하는 그래픽
3. typeface : 서체가 가지고 있는 느낌을 포함한 큰 범위
4. font : 특정한 서체 하나

서체 스타일

1. serif : 돌기형 장식 요소가 있는 경우/각진 세리프도 있음
2. san-serif : 돌기형 장식 요소가 없는 경우
3. script : 손글씨
4. decorative : 장식적 요소가 많은 서체

서체 관련 세부 명칭

1. baseline : y나 P와 같이 밑으로 돌출되어 있는 형태를 제외한 기본 바닥 줄
2. Cap Height : M이나 I와 같이 평평한 대문자의 최 상단 줄
3. x-height : 소문자 X의 높이를 나타낸다. 본문용 서체는 Cap height 와 x-height의 값이 많이 차이 나지 않아야 한다.
4. Ascenders and descenders : 글자의 최상단 / 최 하단 줄

 

 

#Material Design Typography 추가 설명 보기

material.io/design/typography/understanding-typography.html#type-properties

Material Design

 

자간 행간 명칭

1. latter spacing : 자간을 뜻한다.
   1. tracking : 전체적으로 자간을 조정하는 것을 뜻한다.
   2. kerning : 특정 문자와 특정 문자 사이를 조정하는 것을 뜻한다.
2. line length : 문장의 좌우 길이를 뜻한다.
3. line height : 행간, 윗줄 baseline 부터 아랫줄 baseline까지를 뜻한다. 본문은 1.3까지 일반적으로 사용한다.
4. paragraph spacing : 문단과 문단 사이를 뜻한다.

---

폰트 다운로드

OS별 시스템 폰트

웹 앱에서는 저작권과 환경적 요인으로 시스템 폰트를 주로 사용한다.

1. android
   1. 영문 : roboto
   2. 그 외 : noto 시리즈. noto는 No more Tofu의 약자로 Tofu는 엑박을 의미하는 말이다.
   3. 사이즈
      1. 기본 : 16dp
      2. 서브 : 14dp
2. IOS 
   1. San Francisco
   2. apple SD gothic
   3. 사이즈
      1. 제목 : 20pt 이상
      2. 본문 : 19pt 이하
      3. 기본 : 17pt
      4. 서브 : 15pt

시스템 폰트 다운

#안드로이드 폰트 다운로드 사이트

fonts.google.com/

Google Fonts

 

#애플 폰트 다운로드 사이트

SF Compact는 Watch OS이고, 그 외는 SF Pro를 사용한다. 

developer.apple.com/fonts/

Fonts - Apple Developer

 

---

 

폰트 크기 시스템

폰트 크기 정하기

아래와 같이 용도별 명칭과 폰트의 크기를 정하여 시스템화한다. 

 

1. Headline : 제목. HTML 시스템에 따라 1에서 6까지 제공하며, 1이 제일 큰 제목이다.
2. Sub Title : Headline과 Body 사이의 소제목. Label에서 자주 사용된다.
3. Body : 본문
4. Button : 버튼. Material Design에서는 약간 굵은 폰트에 대문자 자용을 권장한다.
5. Caption : 주석
6. Overline : 제목 소개용 작은 텍스트

 

#Material Dsign에서 추천하는 폰트 크기

 

 

#Material Dsign 상세 폰트 가이드

material.io/design/typography/the-type-system.html#type-scale

Material Design

 

 

---

 

 

그 밖에 폰트 관련 사이트가 궁금하다면

아래 링크에서 확인해보자.

 

#디자인 사이트 추천 - 폰트 편

rosakim90.tistory.com/entry/4-%ED%8F%B0%ED%8A%B8-%ED%8E%B8?category=955595

#4 - 폰트 편