어떻게 UI 디자인에서 Typography를 사용할까?

안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.



실용 팁 및 유용한 정보

소개

타이포그래피는 UI 디자인에서 가장 어려운 부분이라고 말할 수 있습니다. 그것은 매우 다양한 형태로 우리와 함께합니다. 덕분에 우리는 계속 유지하기 어려운 많은 규칙, 관행 및 이론을 가지고 있습니다. 이 글에서는 프로젝트에서 사용할 수있는 몇 가지 실용적인 팁과 트릭을 소개합니다.

이론 이상의 실용 사례

타이포그래피는 이론적인 부분으로 당신을 괴롭히지 않을 것입니다에 대해 이야기하는 매력적인 주제입니다. 문자 해부학과 합자에 대해 이야기하기보다는 연습으로 곧바로 뛰어 들어갈 것입니다.
원한다면 Buuut ...

사용자에 대해 생각해보십시오.

우리는 미학 외에도 사용자가 있다는 것을 기억해야 합니다. 당신은 고해상도 플래그십 디바이스뿐만 아니라 조금 더 디자인하고 있습니다 ...
presentation
사용하게 될 글꼴은 유연해야 합니다. 귀하의 글꼴은 다양한 weights, 다양한 특수 기호를 제공해야 하며 Retina를 포함하여 다른 곳에서도 매우 잘 렌더링 해야 합니다. 이러한 측면에 주의를 기울여 사용자가 당신의 무지로 고통받지 않도록 하는 것이 중요합니다. 좋은 타이포그래피는 독자에게 "투명한 수정" 같지만, 나쁜 화면에서는 독자가 비명을 지르게 됩니다.
글자를 잘 읽을 수 있도록 만드는 것들에 대한 이해가 UI 용 글꼴을 선택할 때 우리가 고려해야 할 것들 보다 전반적으로 더 잘 보여줍니다.

Legibility ; 가독성

가독성은 특정 서체에서 한 문자를 다른 문자와 구별하는 것이 얼마나 쉬운지를 측정 한 것입니다. 그것은 서체, 글자 및 세부 사항에 초점을 맞춘 마이크로 타이포그래피입니다. 당연히 이것은 가장 필수적인 요소 중 하나입니다. 모든 서체가 읽기 쉽도록 기본 디자인 기능으로 만들어지는 것은 아닙니다. 가장 일반적인 문제는 대문자 I과 소문자 l의 구별이 부족하다는 것입니다. 사람들은 작은 디스플레이에서 그것을 읽는 데 어려움을 겪을 것이므로 이런 종류의 글꼴을 피할 필요가 있습니다.

X-height

우리가 읽은 글자의 95 %는 소문자입니다. 대문자와 소문자의 문자 비율이 클수록 더 읽기 쉬운 서체가 됩니다.
presentation

Counters

또한 우리 글자 안에는 공백이 있습니다. 예를 들어 "o" "u" "d"를 보십시오. 이러한 공간을 카운터라고 하며 typographic 전문가는 그중 많은 것이 글자를 쉽게 인식하는 데 도움이 된다고생각합니다.
presentation

Weight

더 가벼운 서체는 일반적으로 더 무거운 유형의 weights보다 읽기 쉽습니다. 카운터와 관련이 있으며 수정되지 않은 문자 모양을 허용합니다.
presentation
어느 것이 더 읽기 쉬울까요?
최고의 character stroke thickness는 x-height의 약 18 %입니다.

Wide proportion ; 와이드 비율

Height에 대한 character의 Width는 비율로 설명됩니다. 일반적으로 더 나은 문자 인식을 위해 압축 된 문자 위에 넓은 문자를 사용하고 더 나은 가독성을 위해 넓은 문자를 필요로합니다.
presentation
처음에는 차이가 미묘합니다.

Letter spacing

문자 간격을 계산할 수 있는 궁극적인 방법은 없지만 대부분 문자 크기가 커질수록 필요한 문자 간격은 줄어듭니다. 서체가 너무 열리며 수동으로 간격을 조정해야 합니다. UI 디자인의 경우 일반적으로 헤더에 적용됩니다.
presentation
다시 말하지만, 그것은 작은 차이입니다.

Readability

Readability 이란 전반적인 독서 경험을 말합니다. 텍스트 레이아웃을 스캔하고 머리글, 소제목, 단락 및 블록을 쉽게 구별할 수 있습니다. 매크로 타이포그래피는 텍스트를 더 시각적으로 호소력 있게 만들어서 읽기를 더 독려하는 것입니다. 그것은 콘트라스트, 색상, 크기, 구성 및 작은 세부 묘사의 기술로 더 나은 독서 경험을 제공합니다.

Serif vs Sans Serif

역사는 우리에게 Serifs가 읽기 쉽다는 것을 알려줍니다. 그들은 오랫동안 인쇄물에 사용되었고 큰 텍스트 블록에 대한 독서 경험을 향상시킵니다. Serif는 텍스트 위에 눈이 더 쉽게 흐르게 합니다.
이야기는 웹과 모바일에서 다릅니다. 읽을 수 있고 시각적 디자인의 현재 상태가 더 간단한 문자 양식을 선호하는 여러 sans-serifs가 있습니다. 웹 및 특히 모바일에서 우리는 훨씬 더 많은 sans-serifs를 봅니다. 또한 디스플레이는 종이가 아니며 일반적으로 웹에서 긴 텍스트를 읽지 않습니다. 특히 앱에서.
presentation
한 줄의 serif는 트위터 앱에는 필요 없지만 Medium에서는 의미가 있습니다.
그것은 모두 당신의 프로젝트와 사용자가 당신의 콘텐츠를 어떻게 사용할지에 따라 다릅니다. 예를 들어 medium에 대해서는 세리프 (serif)가 있습니다. 좋은 디자인 접근법입니다.

Line height

선두에 올 때 황금 비율을 사용하는 것을 강력 추천합니다.
당신의 글자 크기에 1.618을 곱하면 완벽한 라인 높이를 얻을 수 있습니다.
작은 계산해보기 - http://jsbin.com/todidu/1/
경험이 있다면 직접이 결과를 조정할 수 있습니다. 물론이 규칙에 대한 예외가 있으며 반드시 필요한 경우에는 언제든지 위반할 수 있습니다.
presentation
사소한 차이는 있지만 가독성에 큰 영향을 미칩니다.

Text block width

그것은 얇은 얼음을 밟는 것과 같습니다. 텍스트 블록이 너무 넓 으면 눈이 다음 텍스트 줄을 찾는 데 어려움을 겪습니다. 라인이 너무 좀 으면 눈은 라인에서 라인으로 건너뛰어 읽기 리듬이 깨집니다.
우리의 잠재의식은 다음 라인으로 점프할 때 활기를 띠게 됩니다.(그렇게 자주 있지만 않는 한)
독자들에게 활력을 주고 그들과 계속 연결되고 싶다면, 여러분의 문자열은 50에서 75자 사이여야 합니다.
presentation

Colors

이것은 물론 프로젝트에 달려 있지만 공유하고 싶은 트릭이 하나 있습니다. 순수한 회색 색상 (또는 검은색)을 사용하는 대신 주 색상을 선택하고 여기 어딘가에서 작업하십시오 :
presentation

분홍색 삼각형을 보십시오.
공통된 #CCC를 사용하는 것보다 더 매력적이고 독창적입니다. 작은 디테일들은 당신의 시각을 더 즐겁게 만들 것입니다.

White space : 여백

이것은 많은 책과 훌륭한 출판물이 있는 광대 한 주제이지만 타이포그래피에 관해서는 이것을 기억할 필요가 있습니다 :
여백의 기본 역할은 방문자가 한꺼번에 볼 수 있는 텍스트의 양을 줄이는 것입니다.
이렇게 하면 우리 레이아웃이 스캔 가능 해지고 콘텐츠로 인해 과부하가 걸리지 않습니다. 공백은 레이아웃을 통해 우리의 눈을 안내하고 질서, 정교함 및 우아함을 만듭니다.
presentation
Luxy — Tablet by Nguyen Le

Hierarchy : 계층

계층 구조는 내용을 읽는 방법을 정의합니다. header와 subheading, body text를 구분하는 방법을 알려줍니다. 다른 대비, 텍스트 크기, 패딩, 여백 등을 사용하여 이를 달성할 수 있습니다. 좋은 가독성을 얻기 위해서는 마스터해야 할 중요한 기술입니다.
presentation
세부 사항에 주의하십시오. 날짜 텍스트 색상은 설명과 다르지만 차이점은 처음에는 보기 힘듭니다. Event_Discovery_App by Jakub Antalík

Separators

콘텐츠를 섹션으로 나누는 좋은 방법은 separator를 사용하는 것입니다. 가장 인기 있는 것은 단순한 선입니다. 그것은 미묘한 도구이지만 여전히 가독성에 큰 역할을 합니다.
또 다른 방법은 지금 인기 있는 카드를 사용하는 것입니다. 콘텐츠 간에 관련되지 않으면 실제로 유용합니다. 모바일 및 큰 thumbs에 적합하지만 레이아웃 스캔 가능성도 향상시킵니다.
presentation
두 가지 예가 있습니다. nearby attractions by me

Repetition and rhythm : 반복과 리듬

이것은 UI 디자인에서 가장 시간이 많이 걸리는 부분입니다 (적어도 나에겐...). 반복되는 요소는 단일성을 제공합니다. 반복은 positioning, text size, colors, padding, margins, use of rules, background and boxes 일 수 있습니다. 예를 들어 나는 보통 padding / margins 크기를 5로 반올림하므로 좀 더 일관성 있게 보입니다 (이는 제 규칙 중 하나입니다). 반복은 리듬을 만들어냅니다.
presentation
avsc by me

Conclusion

타이포그래피를 배우는 것은 전체적으로 힙하고, 화려한 단어들이며, 당신의 기술 발전에 만족감을 주는 모습을 가진 멋진 여행입니다. 기술은 매체에 실린 기사를 읽는 데서 오는 것이 아니라, 배우고 연습하는 데서 나온다. 그래서 여러분의 스케치(미안.. PhotoShop 공룡..)를 열고 멋진 것을 만들어 보세요.
"예술의 위대함은 평범함이 아니라 독특함을 발견하는 것이다."- Isaac Basvenis Singer (1904-1991)
추신. 이 주제는 Viki G가 내 마지막에 대한 의견으로 가져 왔습니다.
presentation
www.dribbble.com/acreno

번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역 글입니다.
원본 링크입니다.
🇹🇼 Chinese(Traditional) translation by Lin Simon — 如何在介面中設計排版