우리는 매일 글꼴을 디자인하고 작업합니다. 그러나 우리는 그들의 존재에 대해 진지한 관심을 기울이지 않았습니다. 우리는 그것들을 잘 사용하지도 않았고 심지어 남용하지도 않았습니다. 이 모든 것은 우리가 그들을 이해하지 못하기 때문입니다. 글꼴은 타이포그래피의 중요한 요소 중 하나이며 디자인에서 가장 심오한 주제 중 하나이기도 합니다. 이 기사에서는 이 심오한 지식에 대해 여러분과 토론해 보겠습니다.
글꼴의 종류
영어글꼴(Typeface)은 크게 여러 가지로 나누어진다. 영어글꼴을 사용할 때 반드시 알아야 할 기본지식은 다음과 같다.
1. Serif
Serif는 획의 가장자리에 장식적인 부분이다. 아래 사진에서 빨간색으로 표시된 부분이 세리프체입니다.
세리프 디자인의 본래 의도는 획의 끝부분을 더욱 명확하게 표시하고 인식률을 높이며 읽기 속도를 높이는 것입니다. 또한, 세리프체를 사용하면 좀 더 정통적인 느낌을 줄 수 있습니다. 따라서 우리가 일반적으로 사용하는 많은 영어 서적, 특히 에세이와 소설에서는 텍스트를 완성하기 위해 세리프 글꼴을 사용합니다.
웹 디자인에서 일반적으로 사용되는 셰리프에는 Times New Roman과 Georgia가 있습니다. 아래 사진의 왼쪽은 12px Times New Roman 글꼴이고, 오른쪽은 12px Georgia 글꼴입니다.
중국어에서 우리가 사용하는 Song 글꼴은 해당 serif 글꼴입니다.
2. 산세리프(Sans-serif)
세리프가 없는 글꼴을 논세리프(Non-Serif), 산세리프(Sans-serif)라고 부릅니다. 아래 그림은 산세리프체입니다.
웹 디자인에 일반적으로 사용되는 산세리프체는 상대적으로 많습니다. Arial, Verdana, Tahoma, Helivetica, Calibri 등이 있습니다. 아래 그림은 왼쪽에서 오른쪽으로 Arial, Verdana 및 Tahoma를 보여줍니다.
세리프 글꼴은 책에서는 널리 사용되지만 인터넷에서는 거의 사용되지 않는다는 점에 주목할 필요가 있습니다. 컴퓨터 화면 해상도는 책의 해상도와 비교할 수 없기 때문에 본문의 10~12px 크기의 세리프체는 컴퓨터 화면에서 읽기 어렵습니다. 아래 사진은 클리어타입을 적용하지 않은 10px Verdana와 10px Times New Roman의 비교입니다. 보시다시피 왼쪽의 베르다나는 쉽게 식별할 수 있습니다. 오른쪽의 Times New Roman은 읽기가 상당히 어렵습니다.
3. 모노스페이스 글꼴
모노스페이스 글꼴은 실제로 서양 글꼴에만 해당됩니다. 영문자의 폭이 다양하기 때문이죠. 예를 들어, i는 m보다 훨씬 좁습니다. 프로그래밍할 때 코드를 표시합니다. 문자의 너비가 동일하지 않으면 레이아웃이 보기 흉해집니다. DOS 명령줄에서 고정폭 글꼴이 사용되는 것을 볼 수 있습니다.
프로그래밍에 필요한 고정 너비 글꼴에는 다음과 같은 요구 사항이 있습니다.
1. 모든 문자는 너비가 동일해야 합니다.
2. 단순하고 명확하며 표준화된 문자 모양
3.
128 이상의 ASCII 코드로 확장된 문자 세트를 지원합니다.
(ASCII: 0× 20) 다른 문자와 동일한 너비
5. "1", "l" 및 "i"와 같은 세
문자는 구별하기 쉽습니다.
O"는 구별하기 쉽습니다.
7. 큰따옴표와 작은따옴표의 앞뒤 부분은 구별하기 쉽고 거울대칭을 이루는 것이 가장 좋습니다.
8. 구두점을 명확하게 표시합니다. 특히 중괄호, 둥근 괄호 및 대괄호를 사용합니다.
일반적인 고정 폭 글꼴에는 Courier 및 Courier New가 있습니다.
4. 캘리그래피
이름에서 알 수 있듯이 캘리그래피는 손글씨 스타일 글꼴입니다. 때로는 캘리그래피 글꼴이라고도 합니다. 대부분의 중국 서예 글꼴은 뻣뻣합니다. 개인적으로는 일본 캘리그라피 폰트를 사용하는 것을 추천합니다. 일본 서예 글꼴은 더 부드럽고 인간적입니다. 하지만 일본 캘리그라피 폰트를 사용할 때의 단점은 대부분이 중국어 번체이고 누락된 한자가 많다는 점이다.
5. 기호
Windows에서 가장 유명한 기호 본문은 Webdings입니다(아직 Windows 95에 있었을 때 많이 사용했던 것으로 기억합니다...). 다음은 Webdings 글꼴 중 일부입니다.
글꼴 스타일:
일반적인 글꼴 스타일은 Normal, Bold 및 Italic입니다.
간단히 말해서 볼드체는 글꼴이 더 어둡고 "두꺼워"진다는 것을 의미합니다. 이탤릭체는 텍스트 축을 약간 기울인다는 의미입니다. 공백 내에서 텍스트의 특정 단락을 강조하는 데 사용됩니다.
볼드체에 대해 이야기할 때 CSS의 글꼴 가중치 속성을 쉽게 생각할 수 있습니다. 우리는 일반적으로 사용하는 보통 및 굵게 외에도 글꼴 두께 속성 값에 굵게, 가벼움, 100~900 등과 같은 속성이 있다는 것을 알고 있습니다. 그렇다면 100부터 900까지의 값은 얼마일까요? 사실 100부터 900까지는 단위가 없습니다. 좋은 글꼴은 다양한 가중치에 대해 다양한 디자인을 제공합니다. 글꼴에 다양한 두께 수준에 대한 사전 내장 디자인이 있는 경우 이러한 값은 각각 각 수준에 해당합니다. 예를 들어, Zurich 글꼴에는 Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black 및 Zurich UltraBlack의 6가지 글꼴이 포함되어 있습니다. 이렇게 하면 Zurich Light는 100, 200, 300의 세 가지 값에 해당하고, Zurich Regular는 "보통"인 400에 해당하고, Zurich Medium은 500에 해당하고, "굵게"인 Zurich Bold에 해당하며, 600, 700에 해당하고, Zurich Black은 800에 해당하고, 마지막으로 Zurich UltraBlack은 900에 해당합니다.
중국어 이탤릭체는 일반적으로 인터넷에서 사용되지 않습니다. 중국어에는 획이 너무 많기 때문에 이탤릭체를 사용하면 읽기가 어렵습니다.
단위
웹 디자인에 몇 가지 단위를 사용합니다.
1. 포인트(pt, 포인트)
72포인트 = 1인치, 1인치는 72포인트입니다. 또한, 1파이카 = 12포인트
2. 픽셀(pixel, px)
픽셀은 컴퓨터 화면에서 가장 작은 이미지 단위입니다.
3. DPI, PPI
DPI의 전체 이름은 인치당 도트 수, 인치당 도트 수이고, PPI의 전체 이름은 인치당 픽셀입니다. 이는 해상도의 단위입니다. 즉, 1인치 길이에 몇 개의 포인트(픽셀)를 배열할 수 있는지를 나타냅니다. 예를 들어, 일반적으로 모니터의 크기는 72ppi 정도입니다. 즉, 1인치 길이에 72개의 도트(픽셀)가 있다는 의미입니다. dpi/ppi가 높을수록 해상도가 높아집니다. 즉, 입자가 작을수록 이미지가 더 섬세해집니다. 일반적으로 사진의 해상도는 240dpi에서 300dpi 사이이므로 사진이 화면에서 보는 것보다 훨씬 더 자세하게 보이는 이유는 무엇입니까? 잡지는 133이나 150dpi로 인쇄되고, 고품질 책은 350~400dpi로 인쇄됩니다. 가장 아름답게 인쇄된 책은 175~200dpi로 인쇄되기 때문입니다. 그렇기 때문에 동일한 물리적 크기의 텍스트를 화면에서 볼 때보다 책으로 볼 때 훨씬 더 선명하게 보입니다. 그렇기 때문에 앞서 산세리프 글꼴이 영어 도서 인쇄에 과감하게 사용될 수 있다고 언급한 것입니다.
dpi와 ppi 사이에는 본질적으로 차이가 없습니다. 실제로 차이점을 찾고 싶다면 dpi는 스캐너와 프린터를 설명하는 데 자주 사용되는 반면 ppi는 화면 해상도를 설명하는 데 자주 사용된다는 점만 다를 수 있습니다.
4. CSS에서는 ex와 x-height가
자주 사용됩니다. 1ex = 소문자 x의 높이.
5. em은
CSS에서 자주 사용됩니다. 물론, em은 소문자 m의 높이를 나타내지는 않는다(사실 소문자 m의 높이는 일반적으로 소문자 x의 높이와 같다). 1em = 글꼴 크기의 100%. 다중 단위이다.
간격
1. 줄 간격(Line-height, Leading)
줄 간격(Line-height, Leading)에 관해서는 먼저 기준선이라는 용어를 배워야 합니다. 우리가 처음 영어를 배울 때 글자를 쓸 때 사용했던 모눈 책을 기억하시나요? 가장 두꺼운 수평선이 바로 기준선입니다. 기준선은 대부분의 문자가 "앉아 있는" 글꼴의 디센더 위의 선입니다. 대부분의 글꼴에서 대문자는 항상 기준선 가까이에 배치됩니다. 중국어 글꼴은 영어 대문자와 동일합니다. 아래 그림의 빨간색 선이 기준선입니다.
그런 다음 줄 간격은 인접한 두 줄 사이의 기준선 사이의 거리를 나타냅니다. 줄 간격의 단위는 em으로, 글꼴 크기에 따라 정의되는 경우가 많습니다. 브라우저에는 기본 줄 간격에 대한 지침이 없습니다. W3C에서 제공한 권장 사항에 따르면 기본 줄 간격은 1.0em에서 1.2em 사이여야 합니다. 실제로 줄 간격을 설정할 때 줄 사이의 간격이 단어 사이의 간격보다 커야 한다는 원칙이 있습니다. 그렇지 않으면 독자가 읽을 때 쉽게 "직렬화"됩니다. 줄 간격이 충분하면 텍스트의 각 줄을 구분할 수 있어 눈으로 이전 줄이나 다음 줄을 더 쉽게 구분할 수 있습니다. 최근 몇 년 동안 대부분의 사람들은 웹, 특히 중국어 웹사이트의 텍스트 레이아웃에 1.5em 줄 간격을 선호합니다. 즉, 12px의 글꼴 크기를 사용하는 경우 디자이너는 18px 줄 간격을 선호하는 경우가 많습니다. 1.5em은 실제로 좋은 경험 가치입니다. 실제로 중국 논문의 표준은 줄 간격 1.5em을 사용하는 것입니다.
2. 글자간격(Letter-spacing, Tracking)
글자간격이란 글자그룹 사이의 거리를 말합니다. 단어 간격은 줄이나 단락의 텍스트 밀도에 영향을 미칩니다.
3. 커닝 커닝(Kerning)
커닝은 시각적인 요구에 맞춰 수행되는 기술적인 과정입니다. 간단히 말해서 두 개의 특정 문자가 정렬되면 해당 문자에 대해 고유한 단어 간격을 개별적으로 지정할 수 있습니다. 예를 들어 대문자 A 뒤에 소문자 v가 오면 두 문자 사이에 시각적으로 더 큰 간격이 생기며(실제로 단어 간격은 동일함) 일반적인 문자 간격으로는 해결할 수 없습니다. 글자 사이의 간격을 줄이면 다른 글자도 함께 흐르게 됩니다. 이때 이를 처리하기 위해서는 커닝 조정이 필요합니다. 아래 그림은 커닝을 적용한 예입니다.
문단
1. 줄 길이(측정)
줄 길이는 텍스트 문단의 너비를 의미합니다. 아래와 같이:
줄 길이와 관련하여 두 가지 가독성 문제가 있습니다.
줄 길이가 길수록 필요한 줄 간격도 커집니다. 줄 간격이 너무 작으면 독자가 읽을 때 쉽게 끊어질 수 있습니다. 줄 간격이 너무 크면 독자는 줄을 읽을 때 텍스트가 단절되는 것처럼 느낄 것입니다.
본문은 한 줄에 40~70자가 적당하다.
2. 정렬
문단 정렬에는 기본적으로 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 양쪽 정렬의 네 가지 유형이 있습니다.
왼쪽 정렬은 텍스트 내용을 설정하고 텍스트의 가로 간격을 조정하며 단락이나 기사의 텍스트를 가로 방향을 따라 왼쪽으로 정렬하는 정렬 방법을 말합니다. 왼쪽 정렬은 기사의 왼쪽에 깔끔한 가장자리를 제공합니다. 동시에 텍스트의 오른쪽이 고르지 않게 됩니다. 따라서 영어로 왼쪽 정렬을 Ragged Right라고도 하며, 이는 오른쪽이 너덜너덜한 모양을 하고 있음을 의미합니다. 오른쪽 정렬도 마찬가지입니다.
가운데 정렬은 문단이나 기사의 텍스트가 가운데를 향해 가로로 정렬되도록 텍스트 내용을 설정하고 텍스트의 가로 간격을 조정하는 정렬 방식을 말합니다. 가운데 정렬이란 글의 양쪽에 있는 텍스트를 중앙에 깔끔하게 집중시켜 전체 문단이나 글이 깔끔하게 되도록 하는 것
입니다
.페이지의 왼쪽과 오른쪽 가장자리에 균등하게 분포됩니다. Justify는 양쪽 텍스트에 깔끔한 가장자리를 제공합니다.
양쪽 끝에서 정렬을 사용한 후에는 양쪽 정렬 선이 매우 명확해지고 텍스트 블록의 "빠른" 느낌도 분명해집니다. 그러나 영어 조판에서 줄 길이가 매우 짧은 경우 정렬을 사용하면 일부 줄 사이의 간격이 너무 길어지고 일부 줄 사이의 간격이 너무 짧아질 수 있습니다. 이러한 고르지 못한 단어 간격은 매우 지저분하게 느껴질 수 있습니다. 곳곳에 패치가 있습니다.
3. 가독성
가독성은 인쇄된 텍스트를 읽는 용이성과 편안함을 나타냅니다. 사실 이것이 일반적인 디자인의 가장 근본적인 목적이다. 위에서 설명한 원칙 외에도 저는 여러분과 공유할 몇 가지 작은 가독성 원칙도 수집했습니다.
디자인에는 최대 세 가지 글꼴 크기를 사용하세요.
하나의 디자인에 최대 3개의 글꼴을 사용할 수 있습니다.
일정한 대비를 보장해야 하지만 과도한 대비는 필요하지 않습니다. 양 문자(흰색 배경에 검은색 문자)는 음 문자(검은색 배경에 흰색 문자)보다 읽기 쉽습니다. #fff 배경에서는 #333을 사용한 텍스트가 #000이라는 텍스트보다 더 편안해 보입니다.
텍스트의 배경에 주의하세요. 배경은 단순해야 합니다. 배경 소음을 피하세요.
"Less is more" 가장 적은 요소를 사용하여 가장 많은 정보를 전달합니다.
링크를 링크처럼 보이게 만드세요.
공간을 잘 활용해보세요.