Design #2 TYPOGRAPHY

yonpark·2021년 5월 6일
0

Deisgn & Figma & Webflow

목록 보기
3/10
post-thumbnail

본 블로그의 포스팅 내용은 Udemy Vako Shvili의 "Complete Web Design: from Figma to Webflow to Freelancing" 강의 내용의 일부입니다.

Typeface Categories

Personality

각 Typeface는 개성이 있다.
어떤 것들은 재미있고 장난기가 있고, 어떤 것들은 엄격하고 무뚝뚝하며, 어떤 것들은 학술적이고 고급(화려하다)스럽다고 느낀다.

Typeface의 성격은 적절한 때에 맞는 옷을 고르는 것만큼 중요합니다.

Categories

각 Typeface가 해당되는 특정 분류가 있습니다.
크게 Typeface는 4가지 종류로 분류합니다.

Serif : Serif는 세 가지 스타일 Oldstyle, Modern and Slab을 포함합니다.
Oldstyle은 세리프 글꼴에서 가장 인기 있습니다. 고전적이고 전통적인 서체입니다.

Sans Serif : "Sans"는 프랑스어로 "without"이라는 뜻입니다. 한마디로 획의 삐침이 없는 글씨체를 뜻합니다.
가장 다재다능합니다.
다양한 개성을 가진 디자인에 맞출 수 있어서 모든 스타일 중에서 가장 안전한 방법입니다.

Display : Danger zone. 이 Typeface는 상당히 우스꽝스럽게 될 가능성이 있습니다.
Large Headlines에만 사용하고 Paragraph에는 사용하지 마세요.

Script(Handwriting) : Script Typefaces는 필기를 기반으로 합니다.
Display와 마찬가지로 Script style을 사용하는 경우는 거의 없습니다.
하지만, 꽤 유용하게 쓰일 때가 있을 수 있습니다. 예를 들어, 만약 여러분이 보육을 위한 웹사이트(어린이집)를 디자인한다면 유용하게 사용될 수도 있습니다.

💡 서체와 폰트의 차이점?
Typefaces는 Serif, Sans Serif, Display, Script와 같이 그대로 그 Font 집합의 이름이며 Typefaces를 이루는 Font 집합의 하위에 여러 Font가 속해있다. Font는 굵기, 스타일 및 크기에 대한 정보가 들어있는 디지털 파일이기도 합니다.
예를 들어 Roboto는 Font family의미하고 Roboto Regular는 Font를 의미합니다.

Letter Spacing

Letter spacing은 웹의 글꼴에서 변경할 수 있는 속성 중 하나입니다.
우리는 Letter를 매우 Tight하거나 Wide하게 설정할 수 있습니다.

매우 넓은 문자 간격으로 디자이너는 Panorama라는 효과를 만듭니다.

💡 Panorama Effect 사용시 두 가지 규칙 :
1. Text는 대문자여야합니다.
2. Single line Headlines에 사용합니다. 여러 줄 Text에서 잘 보이지 않습니다.

Line Height

Line Height는 텍스트 줄 사이의 간격입니다.

모든 Font는 기본 줄 높이 값과 함께 제공됩니다. 매우 잘 만들어지고 균형이 잘 잡힌 일부 Font는 기본 줄 높이가 좋지만 다른 Font는 약간의 조정이 필요할 수 있습니다.
일반적으로 증가시키는 것이 대부분입니다.

Line이 너무 가까우면 Text 읽기가 어려울 수 있습니다.

💡 대부분의 경우 본문 텍스트의 경우 140% (1.4 * Font size)가 뛰어난 줄 높이입니다.
당신이 무엇을하고 있는지 알지 못한다면 180 %를 넘지 마세요.

Font Weights

Light, regular, semi-bold, bold, extra-bold, heavy, black, skinny, hairline, etc..
이를 font weights, o, 또는 thickness 라고 합니다.

💡 웹 사이트의 Main typeface의 경우 Font weight가 4 개 이상인 Typefaces를 선택하세요.

profile
👋 반가워요 저는 경영학을 전공했고, 2020년부터는 컴퓨터공학도 공부하기 시작했어요. 최근에는 리액트 프로젝트를 위주로 프론트엔드에 관심이 있습니다~

0개의 댓글