타이포그래피 :: typography

타이포그래피

아일린 스트리즈버 (디자인하우스)

 

타이포디자인 가이드라인

 

 

본문 vs 제목

 

본문용 타이포 : 작은 사이즈에서 판독 및 가독이 편함. 간격이 넓음. 얇은 획을 포함. 

제목용 타이포 : 강한개성과 정교함을 가짐. 판독성과 가독성 무시가능. 

타이포 간격 : 답답하거나 심심하지 않다. 디자인 전반에 걸쳐 고른 간격을 가진다. 디자인의 디테일 부분에 해당한다. 

 

타이포그래픽 일러스트레이션의 혼합

영문과 국문의 혼합의 경우, 폰트크기와 높이를 맞추어야한다. 

 

세리프 vs 산세리프 (Serif, San serif)

타입 최고의 원칙은 세리프와 산세리프를 섞어서 사용하는것. 타입의 특징을 파악해서 사용한다. 

 

가벼움 vs 무거움 (Light, Heavy)

무겁거나 또는 가벼운 무게의 타이포는 강한 시각적 대비를 이룬다. 이 테크닉은 종종 세리프체 본문에서 무거운 산세리프체와 모두 대문자로 구성된 서브헤드에 많이 사용될 가능성이 높다. 

예) book체와 medium의 사용처럼 바로 다음 단계무게의 타입을 사용하는 것은 시각적으로 약한 전이를 초래. 충분히 무게감이 나는 타이포를 사용해야함.

 

큼 vs 작음 (Large, Small)

타이포의 변화를 주기에 가장 적절한 위치는 헤드라인부터 서브헤드나 본문까지 타이포의 사이즈가 바뀌는 곳으로 사이즈의 현격한 대비가 훨씬 더 강조된다. 

 

넓음 vs 좁음 (Wide, Nerrow & Regular,Condensed)

평균 폭을 가진 본문위에 확장된 폭의 헤드라인이나 이 테크닉으로 로고를 이등분하면 매우 강렬한 대비를 만들 수 있다.

 

대문자 vs 소문자 (Cap, Lowercase)

단어나 문장등의 텍스트 길이가 짧은 경우 모두 대문자로 설정하면 자칫 복잡해 보일 수 있는 어센더와 디센더가 제거되어 더욱 쉽게 읽힐 수 있다. 하지만 많이 사용하게되면 가독성에 문제가 생기므로 과한 사용은 피하는게 좋다. 우리는 글자를 전체적인 형태로 인식하기 때문이다. 

 

이탈릭체 (Italics)

강조의 가장 보편적인 형태. 캘리의 느낌을 줄 수도 있다. 헤드라인이나 본문의 단어와 문구를 약하게 강조할때 가장 효과적이다. 텍스트 톤에 큰 변화를 주지않고 독자의 관심을 끌거나 책이나 잡지의 타이틀 등에서 인용구 (다른글에서 끌어다 온 구절) ex.simple is best -Jobs- 대신 사용된다. 로마체와 동일한 이탈릭체를 사용하되 강조할 필요가 있다면 1단계보다 2단계 두껍게 하는게 효과적이다. 

오블리크체와 이탈릭체는 컴퓨터 스타일 바가 아닌 폰트메뉴에서 실행시켜야한다. 이것은 폰트의 외곡현상을 초례한다. (디테일)

 

볼드체 또는 무게 대비 (Boldface, Weight Contrast)

주로 서브헤드, 캡션, 단독으로 사용되는 단어나 문구에 적합. 톤에 있어서 시각적인 문제를 일으킬 수 있음으로 텍스트에서 최대한 자제하여 사용하거나 특별히 현격한 강조가 필요할때만 사용.적어도 2단계 이상의 무게차가 있어야함.(동일한 포인트 사이즈에서 경미한 볼드차이는 최악)

 

밑줄 (underscores)

강조를 위한 미숙한 타이포 그래피 방법이므로 자제.사용하고자 한다면 드로잉툴을 이용해 두께와 위치를 조정 후 사용웹에서의 밑줄은 하이퍼링크를 암시한다. 

 

넓은폭 vs 좁은폭 (Wide, Nerrow)

폭 대비의 사용은 현격한 대비를 초례하고 자연스러운 흐름을 방해.본문강조 테크닉으로는 기피됨.헤드라인 서브헤드 도입부, 필자명을 적는줄(by line)의 경우 효과적.

 

타이포스타일 바꾸기 (Changing Typestyle)

단어의 강조를 위해 완전히 다른 타이포를 쓰는것은 피한다.반면 서브헤드나 중요한 인용구에서의 사용은 매우 인상적일 수 있다.

 

색조 또는 음영 바꾸기 (Changing Color, Shade)

시각적 흥미와 다양성을 제공.시선을 특정지점에 고정시키는 특별한 경우 사용.본문에서는 사용금지 (특별한 경우 제외)원색의 퍼센트를 낮추어 옅은 색체로 사용하는것은 부드러운 효과에 적합. 이는 타이포의 색조와 텍스트의 구성에 생길 수 있는 혼란을 제거. (단, 가는체에 옅은색을 적용할때는 주의한다.)

텍스트에 변화를 주는 이탈릭, 볼드, 색조변화는 특정요소를 강조하는 조은 방법이다. 더 정교하고, 세련된 테크닉이 존재하며, 이러한 테크닉을 적절하고 효과적으로 사용하면 단순하지만 풍부하고 우아한 변화로 완전 새로운 멋을 낼 수 있다. 

 

대문자로 된 머리글자

단락의 첫 문장의 첫 글자. 

내린 대문자올린 대문자

만약 올린 대문자가 부정관사 A나 인칭대명사 I와 같이 한글자로 된 자가 아니라 단어의 첫 글자이르경우는 나머지 글자들이 한단어로 읽힐 수 있도록 여백조절을 잘 해야한다. 자칫하면 비 전문적으로 보일 수 있다. 대문자 소문자 상관이 없다.작은 대문자 - 처음오는 몇개의 단어, 부가적인 강조, 시각적인 매력을 추가할 때 사용겹친글자. 

 

작은 대문자

소문자 높이와 동일 대문자의 60-70%제목용으로 만든 작은 대문자는 유연성이 좋다.

 

들여쓰기 (Indent)

사고의 단위를 시각적으로 구분들여쓰기는 맞고 틀리고의 문제가 아니라 스타일의 문제이다. 

첫 행 들여쓰기과도한 들여쓰기 - 많은양의 텍스트를 사용할때내어쓰기 - 본문의 양이 줄어들 수 있다.들여쓰기 대신 여분의 행간을 삽입하여 문단 분리. - 긴텍스트 블록에 사용

 

타입사이즈

타입사이즈는 지극히 주관적인 시각적 과정이지만 이 결정을 위해 다음의 가이드라인을 참고하라.

가장먼저 고려할 점은 가독성이다. 짧은 설정에 적합하게 디자인 된 폰트를 선택한다고 가정하면 평균 9-12폰트 사이. 경우에 따라서는 14포인트 이내로 정한다. 긴 설정에 작은 폰트를 사용하면 읽기 어려워지며 12-14포인트보다 큰경우 본문의 갈이와 상관없이 보는이의 눈을 피곤하게 할것이다.타입 사이즈는 타이포 종류와 디자인에 따라 결정되는데 특히 행길이(Line Length)와 행간(Line Spacing)으로인하여 텍스트의 길이뿐만 아니라 단(column.칼럼)의 넓이에 따른 제한요소도 고려되어야 한다. 

제목용 또는 헤드라인 타입은 독자들의 시선을 잡은후 이를 본문으로 이어지도록 의도된 거시어서 사이즈 설정에 대한 제한이 매우 적거나 없기도하다. 즉 레이아웃에 적합하기만 하면 되므로 다양한 사이즈를 적용해 보고 어떤것이 가장 보기 좋은지 어떻게 해야 다른 부분과 어울리며 이를 보완할 수 있는지 알아본다.

 

행 길이 (Line Length)

포인트 사이즈에 따라 행길이 결정. 포인트가 커짐에 따라 행길이도 커져야함.글자를 인식하는게 아니라 단어 문장을 인식하기때문너무 긴 행은 다음시작행을 찾는데 힘들고 피로도가 높아진다. 

 

행간(레딩 - Leading, Line Spacing)

타입의 기준선과 기준선 까지의 행 사이 공간. (1줄, 1.5줄, 2줄...) - 보통은 포인트로 측정.본문의 양과 레이아웃에 따라 다르게 조절디자인 프로그램은 보통 포인트 사이즈의 20% 로 설정 - 키보드 단축키로 설정 가능기본적으로 최소 2포인트에서 5포인트까지 설정타입이 커지면 네거티브 공간이 넓어짐으로 작은 래딩값을 주는게 적합하다. (단, 모두 대문자라면 이 규칙을 무시할 수 있다.)오늘날에는 행간이 넓은형태로 가독성이 높아지고 여백이 많아져 시각적으로 깔끔해졌다. 

 

정렬

왼쪽 맞추기가독성이 높고 눈에 익숙하다오른쪽 여백을 남긴다.오른쪽 맞추기왼쪽에 들죽날죽한 여백이 생겨 읽기가 어렵다.특정 디자인 목표가 있을시에 사용양끝 맞추기이상적 기하핫적 형태를 맞출때양끝 맞추기를 해결하기 위해서는 (글자여백이 늘어나거나 줄어드는 현상) 텍스트 행의 길이를 좀도 길게 하거나 폰트를 작게 한다. 가운데 맞추기제목, 헤드라인, 서브헤드, 초대장, 공고문 및 시와 같은 짧은 분량의 텍스트대칭성과 우아함. 양이 많으면 가독성이 떨어짐랩 어라운드 (wrap around type), run around, text wrap일러스트 사진 및 그래픽적 요소의 윤곽을 둘러싸는것.왼쪽, 오른쪽, 양쪽 모두 가능.

 

 

타이포디자인 프로세스

1. 먼저 생각한다.(레퍼런스를 찾아보기)

2. 생각한 모든것을 스케치.(레퍼런스를 융합해서 자신의 스타일을 적용한다)

3. 우선순위 정하기. (강약조절을위한 크기나 위치 배분에 활용)

4. 여러가지 아이디어 도출. 

5. 컴퓨터 작업을 하기전에 모든 조사를 완료.

 내용과 철자, 정확한 구두점을 편집. (워드작업)헤드라인등 주요 요소들을 위해서 적어도 3-5가지정도의 스타일 러프 스케치를 준비한다. (핸드드로잉, 콜라주, 오르펀 타입:오래된간판,잡지와 포장지,우편물,클럽홍보물 등에서 볼 수있는 타이포 등 비디지털 상태의 타이포그래피를 활용한다. 5개-10개의 아이디어를 준비하여 벽에 붙이고 뒤로 물러서서 관찰한다. 적절한 아이디어가 없으면 좀더 스케치한다. 

6. 대략적으로 러프하게 모든 구성요소를 갖춘 몇개의 샘플 디자인을 만든다. 

벽에 부착 후 객관적인 평가를 한다. 부족해 보이는 샘플을 제거한다.특이사항을 작성한다. 선택디자인은 가장 답변하기 쉬워야한다. 본연의 문제점을 해결하고 잘 기술해야한다. 적절한 계층구조에 따라 잘 읽혀야한다. 기능적인 면에서도 성공적이어야 한다. 

7. 디자인을 자주 프린트해서 벽에 붙이고 평가를 하면서 미비한 요소의 해결책을 낸다.

8. 최종 디자인이 본래 작성한 우순위에 맞는지 확인한다.