우리는 매일 글꼴을 다루는 디자인입니다. 그러나 우리는 그들의 존재에 대해 진지하게 걱정하지 않았습니다. 우리는 그들을 잘 사용하지 않았거나 심지어 학대하지 않았습니다. 우리가 그들을 모르기 때문입니다. 글꼴은 조판의 중요한 요소 중 하나입니다. 이 기사에서는이 심오한 지식에 대해 이야기 해 봅시다. 글꼴 유형 영어 글꼴 (서체)은 여러 주요 범주로 나뉩니다. 이는 영어 글꼴을 사용할 때 알아야 할 기본 지식입니다. 1. 세리프 세리프는 스트로크 가장자리의 장식 부분입니다. 아래 그림의 빨간색 표시는 세리프입니다. 세리프 디자인의 원래 의도는 뇌졸중의 끝을 더 명확하게 나타내고, 인식 속도를 향상 시키며, 읽기 속도를 향상시키는 것입니다. 또한 세리프 글꼴을 사용하면 사람들이 더 정통하게 느껴집니다. 따라서 많은 공통 영어 책, 특히 논문과 소설은 세리프를 사용하여 본문을 완성합니다. 웹 디자인에서 일반적으로 사용되는 Serif는 Times New Roman과 Georgia입니다. 아래 그림의 왼쪽은 12px가있는 The Times New Roman Font이며 오른쪽은 12px가있는 Georgia입니다. 중국어에서 우리가 사용하는 노래 글꼴은 해당 세리프 글꼴입니다. 2. Sans-Serif/Sans-Serif 글꼴이 Serif가 아닌 경우 SSERIF 또는 SANS SERIF라고합니다. 다음 그림은 Sanserif입니다. 웹 디자인에는 비교적 더 일반적인 Sans Serif가 있습니다. Arial, Verdana, Tahoma, Helivetica, Calibri 등이 있습니다. 다음 수치는 Arial, Verdana 및 Tahoma 왼쪽에서 오른쪽으로입니다. Serif Fonts는 책에서 널리 사용되지만 Serif Fonts는 인터넷에서 거의 사용되지 않습니다. 컴퓨터 화면의 해상도는 책의 해상도와 비교할 수 없기 때문에 컴퓨터 화면에서 10 ~ 12px 텍스트의 세리프 글꼴을 인식하기가 어렵습니다. 아래 그림은 10px의 Verdana와 Cleartype가없는 10px의 Times New Roman을 비교 한 것입니다. 왼쪽의 Verdana를 잘 식별 할 수 있음을 알 수 있습니다. 오른쪽의 새로운 로마는 식별하기가 매우 어렵습니다. 3. 단일 공간 MONOWIDTH FONT는 실제로 서부 글꼴에만 해당됩니다. 영어 문자의 너비는 다양하기 때문입니다. 예를 들어, 나는 m보다 훨씬 좁습니다. 프로그래밍시 코드가 표시되면 문자가 너비가 같지 않으면 레이아웃이 추악합니다. DOS 명령 줄에서 Monospace 글꼴이 사용됨을 알 수 있습니다. 프로그래밍에 필요한 모노 스페이스 글꼴에는 다음과 같은 요구 사항이 있습니다. 1. 모든 문자는 너비가 같다. 2. 간결하고 명확하고 표준화 된 문자 모양; 3. ASCII 코드가 128 이상인 확장 문자 세트를지지합니다. 4. 공백 문자 (ASCII : 0 × 20)는 다른 문자와 같습니다. 5. "1", "l"및 "i"와 같은 세 문자는 구별하기 쉽습니다. 6. "0", "o"및 "o"와 같은 세 문자는 구별하기 쉽습니다. 7. 이중 인용문과 단일 따옴표의 전면 및 뒷 부분은 구별하기 쉽고 미러 크기가 큰 것을 갖는 것이 가장 좋습니다. 8. 구두점 모양, 특히 곱슬 버팀대, 둥근 교정기 및 정사각형 버팀대. 일반적인 모노 스페이스 글꼴에는 Courier, Courier New가 포함됩니다 4. 서예 이름에서 알 수 있듯이 필기는 필기 스타일의 글꼴입니다. 때때로 우리는 또한 그것을 서예 글꼴이라고 부릅니다. 대부분의 중국 서예 글꼴은 비교적 뻣뻣합니다. 나는 개인적으로 일본 서예 글꼴을 사용하는 것이 좋습니다. 일본 서예 글꼴은 더 부드럽고 인간적입니다. 그러나 일본 서예 글꼴을 사용하는 단점은 대부분 전통적이며 많은 한자가 누락된다는 것입니다. 5. 상징 Windows에서 가장 유명한 기호 바디는 웹dings입니다 (Windows 95에있을 때 사용하는 것을 좋아했습니다 ...). 다음은 몇 가지 웹번 글꼴입니다. 글꼴 스타일 일반적인 글꼴 스타일은 다음과 같이 나뉩니다. 정상, 대담한 대담한, 이탤릭체. 간단히 말해서, 대담한 것은 글꼴이 더 어둡고 "두껍게"임을 의미합니다. 이탤릭체는 문자의 축을 약간 기울이는 것을 의미합니다. 그것들은 모두 공간 내의 특정 단락을 강조하는 데 사용됩니다. Bold에 대해 이야기 할 때 CSS에서 글꼴 중량 속성을 쉽게 연결할 수 있습니다. 우리는 일반적으로 사용하는 정상 및 대담 외에도 글꼴 중량 속성 값에는 BOOLDER, LIGHTER, 100 ~ 900과 같은 속성도 있습니다. 100 ~ 900의 값은 무엇입니까? 우수한 글꼴은 다른 글꼴 무게에 대해 다른 디자인을 제공합니다. 글꼴에 미리 다른 레벨의 두께의 설계가 내장되어 있으면 이러한 값은 각각 각 레벨에 해당합니다. 예를 들어, 취리히 글꼴에는 6 가지 글꼴이 포함됩니다 : 취리히 라이트, 취리히 정규, 취리히 매체, 취리히 굵은, 취리히 블랙 및 취리히 울트라 블랙이 포함됩니다. 이런 식으로 취리히 조명은 100, 200 및 300, 취리히 규칙은 400에 해당하며, 이는 "정상", 취리히 매체는 500, 취리히 굵은 체인은 "굵은 대담한"인 600, 600에 해당합니다. 700, 취리히 블랙은 800에 해당하고 마지막으로 취리히 Ultrablack은 900에 해당합니다. 중국 이탤릭체의 경우 일반적으로 인터넷에서 사용되지 않습니다. 중국어에는 많은 스트로크가 있기 때문에 사용되는지 식별하기가 어렵습니다. 단위 일부 단위는 웹 디자인에 사용됩니다. 1. 포인트 (PT, 포인트) 72 포인트 = 1 인치, 1 인치는 72 점입니다. 또한 1 개의 픽업 (PICA) = 12 점입니다 2. 픽셀 (픽셀, PX) 픽셀은 컴퓨터 화면에서 가장 작은 이미지 장치이며 Layman의 용어로는 화면에서 가장 작은 점입니다. 3. DPI, PPI DPI의 전체 이름은 인치당 도트이고 PPI의 전체 이름은 인치당 픽셀입니다. 그들은 해상도의 단위입니다. 즉, 1 인치 길이로 얼마나 많은 포인트 (픽셀)를 배열 할 수 있습니다. 예를 들어, 일반적으로 모니터는 약 72ppi이며 길이가 1 인치이며 72 개의 점 (픽셀)을 의미합니다. DPI/PPI가 높을수록 해상도가 높을수록 입자가 작을수록 이미지가 더 섬세합니다. 일반적으로 사진의 해상도는 240dpi와 300dpi 사이입니다. 왜 사진이 화면보다 훨씬 더 상세하게 보입니까? 잡지 인쇄는 133 또는 150dpi를 사용하며 고품질 책은 350-400dpi를 사용합니다. 대부분의 아름답게 인쇄 된 책은 인쇄 할 때 175 ~ 200dpi를 사용하기 때문입니다. 그렇다면 왜 화면에서 읽는 것보다 책에서 같은 물리적 크기의 텍스트를 읽는 것이 훨씬 더 명확합니까? 즉, 우리는 앞에서 언급했는데 왜 영어 책을 인쇄하기 위해 Sans-Serif 글꼴을 대담하게 사용할 수 있습니까? DPI와 PPI 사이에는 본질적으로 차이가 없습니다. 차이를 실제로 찾고 싶다면 DPI가 종종 스캐너와 프린터를 설명하는 데 사용되는 반면 PPI는 종종 화면의 해상도를 설명하는 것입니다. 4.ex, x- 높이 종종 CSS에서 사용됩니다. 1ex = 소문자 x의 높이 x. 5.EM 종종 CSS에서 사용됩니다. 물론 EM은 소문자 M의 높이를 나타내지 않습니다 (실제로, 소문자 M의 높이는 일반적으로 소문자 x의 높이와 동일합니다). 1EM = 글꼴 크기의 100%. 다중 장치입니다. 간격 1. 선발, 선도 라인 간격 (라인 높이, 리드)과 관련하여 먼저 기준선이라는 용어를 배워야합니다. 우리가 처음 영어를 배웠을 때 우리가 편지를 쓴 라인 그리드 북을 기억하십니까? 기준선은 대부분의 글자가 "앉아있는"글꼴의 내림차순 부분 위의 직선입니다. 대부분의 글꼴, 대문자는 항상 기준선에 고정되어 있으며 기준 위에 있습니다. 중국 글꼴은 영어 대문자와 동일합니다. 아래 그림의 빨간색은 기준입니다. 그런 다음 라인 간격은 두 개의 인접 선과 기준선 사이의 거리를 나타냅니다. 라인 간격 단위는 종종 글꼴 크기에 따라 라인 간격을 정의하는 데 사용됩니다. 브라우저에는 기본 라인 간격에 대한 규칙이 없습니다. W3C가 제공 한 조언을 통해 기본 라인 간격은 1.0EM에서 1.2EM 사이 여야한다고 생각합니다. 실제로, 라인 간격을 설정할 때, 조판의 원칙이 있습니다. 즉, 라인 사이의 간격은 단어 사이의 간격보다 커야합니다. 적절한 라인 간격은 각 텍스트 라인을 분리 할 수 있으므로 눈이 이전 또는 다음 줄을 쉽게 구별 할 수 있습니다. 최근에는 대부분의 사람들은 웹에서 메인 텍스트의 레이아웃을 좋아합니다. 즉, 12px의 글꼴 크기가 사용되는 경우 디자이너는 종종 18px 라인 간격을 좋아합니다. 1.5EM은 실제로 좋은 경험 가치입니다. 실제로, 중국 신문의 사양은 또한 1.5em의 라인 간격을 사용합니다. 2. 글자 스페이스, 추적 단어 간격은 문자 그룹 사이의 거리를 나타냅니다. 문자의 간격은 한 줄이나 단락에서 텍스트의 밀도에 영향을 미칩니다. 3. 커닝 Kering은 시각적 요구로 인해 수행되는 기술 처리입니다. 간단히 말해서 두 개의 특정 문자가 배열되면 별도로 고유 한 문자 간격을 지정할 수 있습니다. 예를 들어, 자본 A에 이어 소문자 V가 뒤 따르는 경우, 두 문자 사이에 시각적으로 더 큰 간격이 나타납니다 (실제로 캐릭터 간격은 동일합니다). 일반적인 캐릭터 간격으로 해결할 수 없습니다. 그들이 축소되면 다른 글자는 공에 연결됩니다. 현재 Kerning 조정을 처리하려면 조정이 필요합니다. 다음 그림은 커닝 사용의 예를 보여줍니다. 절 1. 회장 (측정) 줄 길이는 텍스트 단락의 너비를 나타냅니다. 아래 그림과 같이 : 대통령과 관련된 두 가지 가독성 문제가 있습니다. 선 길이가 길수록 선 간격이 클수록 필요합니다. 라인 간격이 너무 작아서 독자가 최신을 읽을 때 쉽게 직렬화 할 수 있습니다. 라인 간격이 너무 커서 독자들은 선을 읽을 때 텍스트가 불연속적이라고 생각합니다. 텍스트에서는 한 줄에 40 ~ 70 글자를 갖는 것이 좋습니다. 2. 정렬 단락의 정렬에는 기본적으로 4 가지 유형이 있습니다 : 왼쪽 (왼쪽 왼쪽), 오른쪽 (오른쪽), 중앙 (중앙) 및 정당화. 왼쪽 정렬은 텍스트 내용을 설정하고 텍스트의 수평 간격을 조정하며 텍스트를 단락 또는 기사의 수평 방향으로 왼쪽으로 정렬하는 정렬 방법을 나타냅니다. 왼쪽 정렬은 기사의 왼쪽에있는 텍스트를 깔끔한 가장자리에 제공합니다. 동시에 텍스트의 오른쪽은 고르지 않습니다. 따라서 왼쪽에 대한 영어 정렬은 Ragged Right라고도합니다. 이는 오른쪽이 고르지 않은 외관을 의미합니다. 올바른 정렬은 동일합니다. 센터 정렬은 텍스트 내용을 설정하고 텍스트의 수평 간격을 조정하는 정렬 메소드를 말하며 단락 또는 기사의 텍스트를 가로 방향으로 중간으로 정렬합니다. 기사의 양쪽에있는 텍스트가 중간에 깔끔하게 집중되어 전체 단락이나 기사가 깔끔하게 배열되도록 센터를 정렬하십시오. 양쪽 끝을 정렬하면 텍스트 내용의 두쪽 끝을 설정하고 텍스트/단어의 수평 간격을 조정하여 왼쪽과 오른쪽 페이지 마진 사이에 균등하게 분포됩니다. 양쪽의 텍스트에 깔끔한 가장자리가 있도록 양쪽 끝을 정렬하십시오. 양쪽 끝을 사용하여 정렬하면 양쪽의 정렬 라인이 명확 해지고 텍스트 블록의 "빠른"느낌이 분명합니다. 그러나 영어 조판에서는 선 길이가 매우 짧을 때 두 끝을 사용하여 너무 긴 간격과 너무 짧은 간격이있는 선을 만들 수 있으므로 고르지 않은 간격은 매우 지저분합니다 어디에나 패치가 달린 옷. 3. 가독성의 용이성 문해력은 타이포그래피 텍스트 읽기의 편의성과 편안함을 설명합니다. 실제로 이것은 일반 디자인의 가장 근본적인 목적입니다. 위에서 설명한 몇 가지 원칙 외에도 가독성의 작은 원칙을 포함 시켰으며 귀하와 공유했습니다. 디자인은 최대 3 개의 글꼴 크기를 사용합니다. 하나의 디자인에는 최대 3 개의 글꼴이 사용됩니다. 특정 대비가 있어야하지만 과도한 대비는 없어야합니다. 양 텍스트 (흰색 배경의 검은 문자)는 Yin Text (검은 색 배경의 검은 문자)보다 읽기가 더 쉽습니다. #ffff의 배경에서 #333 텍스트를 사용하는 것은 #000 텍스트보다 더 편안해 보입니다. 텍스트의 배경에주의하십시오. 배경은 싱글이어야합니다. 배경 소음을 피하십시오. "Less Is More"는 최소한의 요소를 사용하여 가장 많은 정보를 전달합니다. 링크를 링크처럼 보이게하십시오. 공간을 잘 활용하십시오.