타이포그래픽
1. 타이포 종류
산세리프 : 고딕체 (산스: 없다, 세리프: 삐침, 장식 -> 장식적이지 않은 폰트) e.g. arial, helvetica
세리프: 명조체 (글자 끝에 꺾임이 있는 것들, 전통적, 신뢰감 있는 폰트) e.g. gerogia
2. 타이포그래피 공식 7가지
- 최소한의 폰트 종류를 사용한다. -> 여러 종류보다는 폰트 패밀리(weigh 값으로 묶어둔)를 사용해주세요.
- 가독성을 높이는 행간(ling height), 실무에서는 보통 1.5~1.75 사용 (폰트가 필기체나 꾸밈 요소가 많으면 좀 다름)
- 자간(letter spacing, 글자 사이의 간격), 실무에서는 -1~-2%로 사용, 0은 잘 하지 않고 글자가 약간 좁아지면 오히려 가독성이 높아짐 (일반적으로 폰트가 크면 자간을 좁히고, 작으면 넓힘, 단위는 px 혹은 %)
- 한 줄에 적당한 글자 수 (영어 본문은 40-60, 한글은 60자 넘지 않도록 / 짧은 줄은 둘다 20-40)
- 배경과 충분히 구별되는 글자 색 (실무에서는 글자 명암비 4.5:1, 큰 글자의 경우 3 이상의 명암비 추천) 명암비 확인
Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색
Contrast-Finder는 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아줍니다. 그래서 색의 명암비와 관련된 웹 접근성(a11y) 테스트를 충족시키는 데 도움을 드립니다. Contras
app.contrast-finder.org
- 계층 구조를 활용한 타이포그래피 -> 위계, 계층구조: 제목/부제목/인용문 등 다양한 형식 존재, 두께, 색상, 간격으로 계층구조 만듦
- 성격에 맞는 폰트 선택 (스타일)
웹폰트(web font)란?
- 사용자 기기 설치 여부와 상관 없이, 웹에서 동일한 글꼴을 보여주기 위해 서버에서 불러와 사용하는 폰트!!
TTF/OTF/WOFF?
- TTF : 로딩 속도가 빨라서 문서에 많이 쓰임, 가벼움, 점이 더 많음, 저해상도
- OTF : TTF의 확장형? 디자인 포현력이 높아 그래픽 작업에 사용됨, 매끄럽고 고해상도 좀 더 무거움 -> 웬만하면 이걸로 사용
: 어도비가 자랑하는 고품질 외곽선 기술(PostScript)을 그 안에 밀어 넣은 것이 바로 OTF입니다.
개발자에게 폰트 제공해줄때 구글로 해주면 편함, dafont는 영문 폰트 많은데 라이센스 확인 필수
서체 추천 : pretendard, IBM Plax Sans, 나눔스퀘어네오, G마켓 산스 / Monserrat (variable이 잘 되어 있음), Lato, Open Sans, Poppins
컬러 (hue)
- 명도 : 색의 밝고 어두운 정도
- 채도 : 색이 얼마나 선명하고 강한지 (원색 자체에 횟빛이 묻었는지 덜 묻었는지) -> 중요한 CTA버튼, 경고 버튼은 채도 높게, 배경이나 비활성 상태에서는 채도 낮게
브랜드 컬러는 정서와 관련이 있다.
색상 조화의 법칙
- 보색 (색상환 circle에서 마주보는 반대 색, 주목성 향상, 강렬한 대비)
- 유사색 (색상환에서 인접한 2-3색, 조화롭고 안정적, 배경톤을 맞출 때 사용)
- 삼각색 (색상환에서 120% 각의 3색, 안정적이긴 한데 잘 써야 됨.... 젤 어려워 보인다)
컬러 강조와 어포던스(affordance, 행동 유도성)
- 행동적으로 누르고 싶게 만드는 것들 (알림 배지 - 컬러 어포던스 사례, 미는 쪽에는 손잡이 없이 네모, 당기는 쪽엔 손잡이 - 물리 어포던스)
시스템 컬러 (system color)
- 사용자의 행동과 상태를 명확하게 전달하기 위한 '기능적' 색상, (성공 - 그린, 정보 - 블루, 실패 - 빨강 등)
- 컬러팔레트 사이트 2일차 참고
시각적 위계(강조)를 만드는 4가지 방법
- 조형 (점,선,면) : 시각적 위계를 이루는 기본 단위, 이 세가지를 교차해 사용하기도 함
- 크기를 이용 : 요소간 크기 차이를 명확하게 하기
- 색을 이용 : 요소간 색의 대비가 클 떄 (강조가 필요한 요소에), 그렇지 않을 때는 색 대비를 줄이기
- 공간감을 이용 : 원근감 효과로 시선을 끔
- 형태감을 이용 : 선, 면, 그림자, '스큐어모픽', 글래스모피즘(아이폰 최근 업뎃), FAB나 카드 UI처럼 강조가 필요한 요소에 사용