웹 디자인에서 글꼴 처리는 아무리 강조해도 지나치지 않습니다. 결국 웹 페이지는 정보를 전달하는 데 사용되며, 정보를 전달하는 가장 고전적이고 직접적인 방법은 텍스트이므로 글꼴에 대한 기본 지식을 이해하는 것은 여전히 디자인에 매우 중요합니다. 의.
중국어와 영어의 가장 큰 차이점은 중국어에는 정사각형 문자가 있고 영어에는 병음 문자가 있다는 점입니다. 이는 글꼴 처리에 큰 영향을 미칩니다. 아래 도표를 보면 영문 폰트의 변화가 중국어 폰트에서는 약화되는 것을 알 수 있습니다.
중국인 독자로서 나는 습관적으로 사각형 모양을 독서의 단위로 받아들입니다. 사실 이것은 읽을 때 눈이 실제로 텍스트 전체 줄의 모양을 따라가기 쉽습니다. 이 예를 살펴보십시오.
이제 나는 당신에게 이야기하고 당신이 이해하도록 노력했습니다
이제 나는 당신에게 말을 걸고 당신을 이해시키려고 노력했습니다.
어느 줄이 더 읽기 쉽나요?
첫 번째 줄은 중국어의 상황과 다소 유사합니다. 차이점은 한자 하나하나가 그림과 같고 그 변화가 영어 26자보다 훨씬 풍부하다는 것입니다. 고려해야 할 몇 가지 문제는 디자이너가 아닙니다. 제가 말한 내용이 잘못된 경우 아래에 메시지를 남겨 논의해 주세요. 이러한 내용은 제가 타이포그래피를 가르칠 때 일반적인 원리로 제시하고 있습니다. 나는 또한 학생들에게 "규칙의 목적은 규칙을 깨는 것입니다. "라고 말합니다. 디자인 원칙 자체는 소위 창의성의 표현이기도 한 원칙을 깨는 것입니다. 문제는 원칙을 먼저 알고 그에 맞춰 실천해야 한다는 점이다.원칙을 숙지한 후에야 원칙을 깨뜨릴 수 있고, 원칙을 깨뜨린다고 해서 원칙이 틀렸다는 뜻은 아니다. 그러나 당신은 이러한 원칙을 독창적으로 사용하여 일부를 깨뜨렸고 동시에 깨뜨린 부분에 대해 어느 정도 보상을 하였는데, 이는 상당히 철학적인 것 같습니다.
나는 개인적으로 더 중요한 원칙은 다음과 같다고 생각합니다(영어에 적용 가능).
글꼴을 선택할 때 텍스트의 목적을 고려해야 합니다. 제목입니까, 문단입니까?
일반적으로 산세리프 글꼴은 Arial과 같은 제목으로 사용하기에 적합하고, Time New Roman과 같은 세리프 글꼴은 단락 텍스트로 사용하기에 적합합니다. 웹 디자인에는 verdana, tahoma, georgia 등 제가 강력히 추천하는 여러 글꼴이 있습니다. 실제로 Verdana와 같은 글꼴은 거의 2년 동안 세계 최고의 글꼴 디자이너에 의해 디자인되었습니다. Microsoft는 비용을 부담한 다음 IE 4를 설치하면 사용자에게 무료로 제공합니다. 위 버전의 경우 컴퓨터에 이 글꼴이 있어야 하므로 사용자에게 이 글꼴이 있는지 걱정할 필요가 없습니다. 글꼴이 화면에 표시될 때 직면할 수 있는 문제를 고려하여 설계되었으며 거의 완벽한 답변을 제공합니다. 유일한 문제는 모든 사람이 사용하기 때문에 완벽에 가까워서 사용할 때 개성이 전혀 없다는 것입니다.
글꼴 크기?
포럼에는 픽셀과 포인트 중 어느 것이 더 나은지에 대한 많은 토론이 있습니다. 여기서 반복하지 않겠습니다. CSS에는 다양한 글꼴 크기 단위가 있으며 대략 세 가지 범주가 있습니다.
절대 크기: mm, cm, in, pt, pc
상대 크기: em, ex
기기 기준: px
em과 ex에 대해 몇 마디 더 말씀드리고 싶습니다. Em은 CSS의 글꼴 크기를 나타냅니다. 예를 들어 12pt 글꼴의 경우 1em은 12pt와 같습니다.
피 {
글꼴 크기: 10pt;
텍스트 들여쓰기: 1em
}
어쩌면 동일한 효과를 얻기 위해 text-indent: 10pt를 사용할 수 있다고 말할 수도 있지만 이는 이상적인 상황에서만 가능합니다. 사용자가 브라우저의 글꼴 크기를 14pt로 설정하는 것이 더 낫다고 생각한다면 디자인한 비율입니다. 손실되므로 상대적인 크기는 웹 페이지의 확장성 디자인에 매우 유리합니다.
ex는 em과 유사하지만 동일하지는 않습니다. 위의 다이어그램으로 돌아가면 x 높이가 글꼴마다 다릅니다. ex는 글꼴의 x 높이를 기준으로 글꼴 크기를 정의합니다.
조정?
왼쪽 정렬을 사용하는 것이 가장 좋습니다. 특히 특별한 디자인 목적이 없는 한 왼쪽 및 오른쪽 정렬을 사용하지 마십시오. 왼쪽 정렬 시 오른쪽 정렬이 잘못된 것은 단지 읽기의 편의를 위한 것입니다. 시력에 변화를 주어 눈에 줄을 바꿀 시간임을 알려주세요.
줄 간격?
줄 간격은 글꼴 크기에 따라 다릅니다. 일반적으로 글꼴 크기가 작을수록 읽기 쉽도록 더 큰 줄 간격이 필요합니다. 웹 페이지에 중국어 글꼴에 대한 줄 간격 설정이 없으면 독자가 큰 문단을 읽을 때 큰 문제가 됩니다. 따라서 line-height를 적절하게 설정하는 것이 매우 필요합니다. 일반적으로 웹 디자인에서 line-height는 글꼴 크기의 1.5배에서 2배 정도가 되어야 합니다. Word 및 기타 텍스트 편집 소프트웨어에서는 일반적으로 글꼴의 120%가 기본 줄 간격으로 설정됩니다. CSS의 줄 높이 설정은 균등하게 나누어 각 줄의 위쪽과 아래쪽에 추가됩니다. 즉, 줄 높이가 20px로 설정된 경우 텍스트의 각 줄은 위쪽과 아래쪽에 10px 간격을 갖게 됩니다. 맨 아래.
단어 간격과 문자 간격?
아주 특별한 목적을 위해서는 두 가지가 중국어에서도 동일해야 합니다. 이 설정 자체는 특정 글꼴 디자인 결함을 해결하고 텍스트의 가독성을 높이기 위한 것입니다.