# Digital Typography

## History of Typography

### Development of Type

* 문자는 정치, 경제, 기술과 함께 발전함.
* 진흙, 돌, 금속활자, 사진식자, 디지털활자. 기술에 따라 타이포그래피가 발전.
* **라스코 동굴벽화**. 무작위적인 공간 배치와 임의적인 크기. 구성과 연속성 개념이 없었음. **수메르 상형문자판**, **로제타 스톤**: 정보가 일목요연하게 정렬되어 있음.

### Category of Type

* 그림문자: 사물을 단순히 그림으로 그려 표현.
* 상형문자: 대상물의 형태를 상징하는 기호를 통해 표현.
* 표의문자: 추상적인 개념이나 사상, 행위를 상징하는 기호를 통해 표현.

### Development of Typography

* 표음문자: 기호에 음성이 대응되는 문자를 통해 기호로 음성을 표현.
* 그리스 알파벳: 페니키아에서 차용된 알파벳을 그리스인들이 변형.
* 로만 알파벳: 그리스 알파벳을 로마인들이 변형.
* 인쇄 활자: 독일 구텐베르크가 활판술을 발명해 활자 서체가 시작.

## Typography

### Black Letter & Humanistic

* Black Letter: 활판인쇄술이 발명되기 전 유명했던 서체. 밀도와 압축률이 높음. 활판 글자꼴의 기초를 형성.
* Humanistic: 인문주의 필체. 이탈리아에서 유행. 소문자의 전신이자 이탤릭체의 토대.
* 구텐베르크가 인쇄술에서 이룬 업적
  * 42 line bible 인쇄
  * 유성 잉크 체계화
  * metal type 발명
  * screw press기 체계화

### Classic Typefaces: 5 Categories

* Old style: 손글씨를 기반으로한 활자꼴. 획이 굵고 브래킷이 둔하다. Garamond.
* Transitional: 수학적 양식과 손글씨의 과도기. 기술적 정교함을 추구. 굵은 획과 가는 획의 차이가 큼. Baskerville.
* Modern: 정교한 타이포그래피의 극치. 세리프가 가늘고, 가는 획과 굵은 획이 강하게 대조. Bodoni.
* Egyptian: 실험적 시도가 이어지며 굵은 획과 가는 획의 차이가 감소. 굵은 slab-serif가 특징. 대부분 브래킷이 아예 없음. Century Expanded.
* Sans-serif: 세리프가 없는 활자꼴. 20세기 중반에 대중화. Helvetica.

### Classic Typefaces: 12 Categories

* Humanist: 초창기 인쇄물은 손글씨와 유사하도록 디자인. Centaur.
* Garald: 손글씨에서 벗어나 획의 방향, 굵기, 세리프가 균정. Garamond, Gaudy.
* Transitional: 펜글씨와 수학적 양식의 과도기. Baskerville.
* Didone: 손글씨의 잔재가 완전히 소멸. 기하학적 형태. Didot, Bodoni.
* Slab-serif: 산업혁명 시대의 산물. 굵은 세리프. Century, Memphis.
* Sans-serif: 세리프가 없는 활자꼴. Helvetica, Franklin Gothic.
* Glyphic: 돌에 새긴 형태를 모방한 활자꼴. Trajan.
* Script: 손글씨를 모방한 활자꼴. Snell Roundhand.
* Display: 독특한 형태. 펜 이외의 도구를 표현하기 위한 활자꼴. Block, Broadway.
* Black letter: 밀도가 높고 압축되어 있는 활자꼴. Textura.
* Mono-spaced: 고정폭 활자꼴. 현대 테크놀로지 톤. Courier, Consolas, OCR-A.
* Extended family: 산세리프와 세리프를 혼합한 제작 경향. Officina serif.

## Typography Anatomy

### Basic

![](https://user-images.githubusercontent.com/6410412/103221878-063c3400-4967-11eb-9aef-b8f0cd2735f2.png)

![](https://user-images.githubusercontent.com/6410412/103221876-050b0700-4967-11eb-886d-4540ad32f665.png)

### Special

![](https://user-images.githubusercontent.com/6410412/103221874-04727080-4967-11eb-9bde-761da4ac7b23.png)

* Apex: A의 꼭지점 부분.
* Bowl: 소문자를 구성하는 형태 중 둥근 폐곡선 부분. a, b, d, p, q가 볼을 가진다.
* Aperture: 둥근 모양 활자의 열린 정도.

![](https://user-images.githubusercontent.com/6410412/103221873-03d9da00-4967-11eb-84ea-4ab40cabfc19.png)

* Eye: 소문자 e의 닫힌 부분. eye가 작다는 것은 aperture가 넓다는 것을 의미.
* Terminal: 획의 끝맺음 부분. 소문자 a, c, f 등.
* Spur: 작은 돌출부분. 주로 대문자 G의 돌출부.

![](https://user-images.githubusercontent.com/6410412/103221869-01778000-4967-11eb-835c-cc53480e5e2f.png)

* Loop: 고전적 양식 소문자 g의 디센더 볼.
* Serif: 획의 끝 부분 돌출부. 붓의 흔적.
* Stress: 굵기의 변화가 만드는 축의 기울기.

![](https://user-images.githubusercontent.com/6410412/103221865-fe7c8f80-4966-11eb-9b5d-ec7e4b7acd7f.png)

* Set-width: 자폭. 조형적 의지로 변화시킨다.
* Cross bar: 대문자 A, H와 같이 두 개의 주요 획 사이에 걸친 획.
* x-Height: 소문자의 높이. 소문자 x 기준.

## Function of Typography

### What is Typography?

* 글자를 의미하는 그리스어 typo에서 온 말.
* 전통적으로 활판인쇄술, 산업혁명 이후 디자인의 한 분야가 됨.
* 활자를 기능과 미적인 면에서 효율적으로 운용하는 기술, 학문.

### Where is Typography Used?

* 인간 생활 전반에 걸침.
* 서적, 잡지, 신문, 광고, 웹, 영상 등.

### Function of Typography

* 가독성: 정확한 정보 전달.
* 시각적 효과: 조형성의 획득. 활자를 돋보이게 만든다.
* 흥미: 독자에게 흥미 유발. 커뮤니케이션의 기능을 효과적으로 수행.
* 정서적 효과: 활자의 강함, 부드러움, 섬세함 등 분위기를 통해 감정 전달.

## Space

### Letterspace

* 자간. 의도적으로 자간을 조정하는 것을 kerning이라고 한다.

### Wordspace

* 어간. 단어와 단어 사이가 지나치게 촘촘하면 단어가 서로 붙어보인다.
* 단어 사이가 너무 넓으면 문장이 해체되고, 본문이 시각적으로 약해진다.
* 적절한 어간은 가독성과 미학적인 면을 모두 만족한다.
* 본문이 끝흘리기(왼끝맞추기, 오른끝흘리기)로 조판될 때 어간이 고르다. 양끝맞추기로 조판하면 단어사이가 줄마다 달라진다.
* 글줄을 맞추기 위해 글자 사이를 넓히면 짜임새가 망가진다.

### Linespace

* 행간. 글줄사이가 넓으면 글자 크기가 작아도 식별하기 쉽다.
* x-height이 큰 활자체는 글줄이 서로 가까워보이기 때문에 더 넓어야 한다.
* 글줄사이가 너무 좁으면 같은 줄을 여러 번 읽는 실수를 한다.
* 수직 stress가 강한 활자는 수평 강세를 유지하기 위해 글줄사이를 넓혀야 한다.
* 세리프가 없는 활자체는 수평 흐름이 없어 글줄사이를 넓혀야 한다.
* 글줄사이를 조정해 원고가 필요로하는 공간을 조절할 수 있다.
* 의도적으로 행간을 조정하는 것을 leading이라고 한다.

### Line length

* 글줄길이. 길이가 짧으면 왼끝맞추기, 오른끝흘리기로 조판해야 한다.
* 독자는 본문의 어디를 읽고 있었는지 잊기 때문에 지나치게 긴 글줄은 피곤하다.
* 최적의 글줄길이는 활자가 균일히 조판되도록하며, 미학적으로 만족스럽다.

## Align

* 양끝맞추기: 보편적이고 전통적인 조판방식. 글줄 길이가 모두 같기 때문에 단어 사이가 고르지 못하다. 글줄길이가 어느정도 확보되면 그 차이가 작다.
* 왼끝맞추기: 양끝맞추기보다 시각적으로 활기있고, 단어사이가 일정하다. 오른끝의 흘려진 모양에 주의해야 한다.
* 오른끝맞추기: 캡션 등 특별한 경우, 짧은 분량의 원고에 효과적이다.
* 가운데맞추기: 공식적인 메시지를 전달. 글줄보내기를 넓게 해야 한다.
* 엇갈리기: 개성있고 독특한 디자인을 가능하게 한다.
* 런어라운드 & 컨투어: 디자이너가 본문 모양을 특정 용도에 맞게 제작.

## 참고자료

* [아주대학교, 디지털타이포그라피, 2018.](https://github.com/parksb/campus-life/tree/master/%EB%94%94%EC%A7%80%ED%84%B8%ED%83%80%EC%9D%B4%ED%8F%AC%EA%B7%B8%EB%9D%BC%ED%94%BC)