[19.07.02] 오픈패스_7일 차_GUI

Design Foundation_Typography 

Type (서체) > Typeface(서체 + 무드) > Typography (서체 + 무드 + 그래픽)

 

타이포그래피의 목적

1. 정보 전달

2. 느낌과 경험 전달

 

reference 

*글자풍경

*에릭 슈피커만 - 타이포그래피 에세이 (서체 공부의 정석)

 

듀오톤 강의 자료 폰트 - Mark Pro 

왜 이 폰트를 사용했을까?

1. 반듯하고 클린한 느낌

2. 서체의 외형으로 인해 내용 전달에 오류가 생기지 않도록 모던한 헬베티카 류

3. 뒤에 앉은 사람도 볼 수 있도록 Bold, 자간을 넓게

4. 한 줄 타이틀의 최대 길이 고려

 

우리도 이런 지점을 고려하고 서체를 선택하는가? 라는 화두를 던진다.

 

1-d

2-b

3-c (3-f)

Snell Roundhand - Mathew Carter (1937-)

서체에 hand가 있으면 손 글씨, round가 있으면 선이 이어져 있는걸 의미한다. 

#섬세한 #가녀린

4-e (4-a)

Cooper Black- Oswald Cooper (1920)

#올드한 #클래식한 

5-f (5-c)

6-a (6-e)

 

서체를 고를 때, 이미지를 보고 visual keyword 전환 작업을 하자. 지난 수업 때 서비스 컨셉 키워드에서 전환했던 것처럼 :) 

그 작업을 한 뒤에 서체를 고르자

Typography Timeline

1. Movable Type (활자 인쇄)

활자 인쇄 시절 사용한 용어를 지금도 사용한다. 

 

Upper-case (대문자 활자 케이스)

Lower-case (소문자 활자 케이스)

 

2. Lino Type (Line of Type이 원제였음. 발음이 안좋아 빠르게 발음하다보니 Lino가 됨)

지금도 존재하는 회사. 주목해야할 기업 중 하나

활자 인쇄 자동화 기계. 독일의 유명한 발명가 집안의 아들, 발명가 Ottmar Mergenthaler (1854-1899)

활자 대량인쇄 시대가 열리면서, 지식의 대중화을 맞이했다.

 

시대를 풍미한 서체가 각 국의 지사에서 발명된 경우가 많기 때문에, 서체 공부할 때 유용하다.

서체를 구입하면 라이센스 비용이 Lino에게 돌아간다.

 

www.linotype.com

 

reference 

*Lino type : the film (다큐가 있음)

 

3. Modernism 

바우하우스 / 스위스가 주도한 모더니즘 운동으로 발생한 흐름

그 흐름 중에 탄생한 서체 Helvetica

서체 자체가 가진 느낌이 없기 때문에, 주체가 전달하고자 하는 메시지를 고스란히 전달하는 효과를 지니고 있다. 

애플 역시 Helvetica 서체를 사용했다. garamond를 think different에 사용하기도 했다.

참고로 아이팟에는 Myriad 서체를 사용했다. 

 

4. Digital Type

1984를 기준으로 디지털 서체가 등장했다. 매킨토시의 등장 :) 

Lino type의 경쟁사 Monotype가 있다. 주로 신문 인쇄 시장을 주도하려 했다.

그래서 뉴욕 타임즈가서 무료 수준으로 타임즈 서체를 만들어 주기도 했다.

 

서체의 디지털화가 진행되고 있던 시대였기 때문에, 모노타입은 디지털 서체의 크기와 자간 조절 등 서체를 디지털 환경에서 사용하기 위한 규칙들을 만들었다. 어도비와 이미 계약을 맺어놓은 상태였기 때문에, 시간이 흐른 후 라이노 타입을 인수했다.

 

Mobile

iOS

iOS, macOS, tvOS

-SF UI Text, Display

 

watch OS

- SF Compact text, display

 

*19pt 이하는 Text 20pt 이상은 Display. 그 기준 pt를 알고 있자.

 

Android

Roboto 

- 다국어 지원이 어려운 특징을 가지고 있다. 

- 서체 간 B Box 크기가 달라진다. (body box)

- 영문은 Roboto, 그 외 언어는 Noto Sans

- Noto Sans 다운할 때 CJK 버전을 받도록 하자 :) 

- decender / acender가 없는 중국어, 한국어, 일본어 특징 때문에 묶어 놨다.

- 그럼에도 불구하고 C/J/K 개별 서체 차이가 미세하게 존재한다. 

 

Typeface

초창기 해상도가 낮은 기기에서 serif가 끝이 뭉개져 보이는 문제가 있어서, 가독성이 좋지 않았다.

letina display가 등장하고 나서, 디테일이 잘 보이게 되면서 sans-serif를 선호하게 되었다. 

 

수기에서 인쇄 기술의 발전으로 Serif type style 다변화를 가져왔다.

자세한 분류 / 리서치는 자료 참고해서 알아서 진행

 

Type Properties

xyMd를 통해 x height를 보고, 본문 용으로 적합한가 판단할 수 있다.

descender line과 baseline 높이가 짧을 수록 귀여워짐

ascender line과 x-height 높이가 커질수록 날렵해보인다.

 

 Readability

Letter - Spacing (also tracking) / kerning = letter spacing, tracking 

모든 letter사이의 간격은 다 다르다.

본문은 tracking으로 control하고, kerning을 조절하지는 않는다.

 

reference

*type.method.ac

 

Line length

 

Line Height

line값은 body인가 title인가에 따라 값이 달라진다 

title은 line값을 100% - 120%을 준다.

body는 120% - 140%을 권장한다.

서체마다 다 다르다. 삼성에서는 그 폰트 사이즈마다 그 규칙을 정리해 놓았다. 

평균 값으로 133%-138%를 사용하곤 했음.

 

서체 용어로 leading이라고 부른다.

100%, 150%, 200% 

 

Paragraph spacing

css에서 p태그 사이의 높이를 의미한다.

 

Orphan, Widow

모바일에서는 대응 할 수 없다. 다만 Lable 부분의 Letter를 작성할 때는 발생하지 않아야 하므로 주의해야 한다.

 

최대 키워드가 정해져있는 상황에서

Box안에 text 넣는 상황을 가정해보자

 

1. 키워드 최대 length를 체크한다. (ex. notifications) 

단수, 복수 문제도 있어서 그 부분까지 체크해야 한다.

 

최대 키워드가 정해지지 않은 경우가 생기기도 한다. 

그 때, 오히려 기획자나 개발자가 최대 키워드를 요청하기도 한다.

그럴 때는 K 대문자 1개, k 소문자 갯수로 box를 채운다.

k가 전체 알파벳의 평균의 Length가지고 있기 때문이다. 

 

Lorem ipsum을 사용하는 이유

더미 데이터를 넣을 때는 꼭 로랭입슘을 사용하자. 디자이너가 간에 더미 데이터를 뜻하는 공통 언어이기 때문이다. 

 

Tips (reference)

1. 폰트의 비밀 2

2. 좋은 디자인을 만드는 33가지 서체

3. 글자 풍경

Layout & Grid System 

Principle In UI

1 page 1 task. the thing is how to connect with each other. 

 

Column, Gutter

Margin, Padding

 

960 Grid, 12 Column

web min grid : 12px

mobile min grid : 8 px

 

단위

물리 사이즈 / 가변 사이즈가 다르다.

21인치 동일한 모니터 2대가 있어도, 해상도(가변 사이즈)가 다를 수 있다. (1600x1200 vs 1280x1024)

 

DPI (Dots per Inch)

왜 모바일 dpi는 72dpi가 기준인가?

1 inch = 72 pixel (1 inch x 1/6 -> pica, 1 pica x 1/12 -> point, point -> pixel)

72dpi 해상도가 기준이면 pixel와 point 크기가 같다. 하지만 해상도가 달라지면 계산을 해야 한다.