출현과 함께 개인용 컴퓨터그리고 최초의 전자 출판 시스템인 타이포그래피에 구조적 변화가 일어났고, 그 결과는 이제야 눈에 띄게 되었습니다. 이것은 타이포그래피의 첫 번째 글로벌 변화가 아니며 다른 변화도 있었습니다. 산업계의 기계가 장인을 물리쳤던 시절을 기억하는 것만으로도 충분합니다. 글꼴의 아름다움보다 대량생산과 수익이 더 중요해졌습니다. 품질보다 양이 더 중요했습니다.

위대한 거장은 새로운 글꼴 생성을 중단했으며 이미 존재했던 글꼴은 책 인쇄에 적합했습니다. 장인은 아무리 전문적이라 할지라도 가만히 있으면서 기술 과정의 일부가 되었습니다.

그러나 산업주의가 승리했다고 해서 인쇄술의 출현으로 거장들이 사라진 것은 아니다. 이 두 세계는 계속해서 서로 독립적으로 존재했습니다. 프린터는 장인의 재능을 인식했으며 결과적으로 발전을 멈출 수 없다는 것을 이해했습니다. 이것은 타이포그래피의 두 번째 변화였으며 그 결과 "영혼", 말하자면 인간성의 일부를 잃었습니다. 하지만 최근에 무슨 일이 일어났는지 이해하려면 500년 전으로 시간을 거슬러 올라가 모든 것이 어디서 시작되었는지 알아내야 합니다.

첫 번째 전환

새로운 것과 오래된 것 사이의 첫 번째 갈등은 최초의 인쇄기가 발명된 이후에 발생했습니다. 제작자인 Johannes Guttenberg는 이 기계를 사용하여 시간당 최대 240페이지의 인쇄 속도로 다양한 구성을 만들 수 있었습니다. 그것은 혁명이었습니다.

이전에는 모든 책이 전적으로 손으로 만들어졌습니다. 과거의 책은 손으로 쓰고 복잡한 디자인과 디자인으로 장식되었습니다. 복사하는 과정은 매우 길었지만 결과적으로 어떤 책, 심지어 사본도 예술 작품이었습니다.

물론 최초의 인쇄된 책은 손으로 쓴 책과 비교할 수 없었습니다. 특별히 아름답지는 않았지만 더 작고 더 저렴했습니다. 그리고 가장 중요한 점은 개별 문자와 전체 글꼴 모음을 대체할 수 있는 기능 덕분에 라틴어뿐만 아니라 다른 유럽 언어로도 책을 인쇄할 수 있게 되었다는 것입니다.

사람들은 이러한 변화를 환영할 뿐입니다. 그들은 자신들이 이해할 수 있는 언어로 된 책과 가지고 다닐 수 있는 책이 필요했습니다. 그들은 지식에 대한 갈증을 갖고 있었고 인쇄된 책은 그것을 해소해 주었습니다.

그러나 첫 번째 전환의 결과로 이 책은 인간성을 많이 잃었습니다. 주요 공정은 기계가 대신했지만 장인은 여전히 ​​수요가 많았습니다. 글자 하나하나를 손으로 새겼고, 디자인과 삽화도 사람이 직접 만든 것입니다. 그러나 책 제작 과정에서 장인정신이 사라지기까지는 그리 오랜 시간이 걸리지 않을 것입니다.

디지털 시대

첫 번째 전환으로 인해 손으로 쓴 책이 파괴되었습니다. 산업화는 마침내 인쇄의 인간성을 박탈했고, 모든 것이 기계화되었으며, 장인들은 일자리를 잃었습니다. 그러나 세 번째 전환은 마침내 타이포그래피를 예술로 완성했습니다. 요즘 대부분의 헤드셋은 놀라울 정도로 기능이 없습니다. 컴퓨터에 있는 글꼴 모음일 뿐입니다. 이 글꼴이나 해당 글꼴의 역사를 아는 사람은 거의 없습니다. 아무도 이것에 관심이 없습니다. 적합한 스타일을 찾기 위해 1분 안에 수백 개의 글꼴을 스크롤하지만 그 밖의 모든 것은 그다지 중요하지 않습니다.

_______________________

“완전히 컴퓨터화된 세상에서 글꼴의 확산과 다양한 변형은 새로운 레벨디자이너 Massimo Vignelli는 우리 문화를 직접적으로 위협하는 시각적 오염을 말합니다. "수천 개의 글꼴 중에서 몇 가지 기본 글꼴만 필요합니다. 다른 모든 글꼴은 쓰레기이기 때문입니다."
_______________________

어떤 면에서는 그가 옳습니다. 타이포그래피는 단순한 글꼴 그 이상입니다. 이것은 아름다운 글자일 뿐만 아니라 뭔가 다른 것, 우리에게 느낌을 주는 것입니다. 본질적으로 타이포그래피는 메시지입니다. 러시아의 유명한 타이포그래퍼 라자르 리시츠키(Lazar Lissitzky)에 따르면, 타이포그래피는 화자가 말하는 것과 동일한 아이디어를 독자에게 시각적으로 전달해야 합니다.”

누군가가 첨필로 양피지에 글을 쓴 것은 오랜만입니다. 인쇄 잉크 냄새가 나는 거친 종이는 사라졌습니다. 광택 인쇄 시장은 미세한 규모로 축소되었습니다. 오늘날 우리는 인쇄되지 않고 타이핑된 텍스트를 읽으며, 종이에서는 전혀 읽지 않습니다. 그리고 분명히 타이포그래피는 또 다른 전환을 앞두고 있습니다. 그것이 어떤 모습일지는 아무도 모르지만, 분명히 종이 이후에는 우리에게 익숙한 디스플레이가 쓸모 없게 될 것입니다. 다음 혁명이 언제 일어날지는 말하기 어렵지만 새로운 전환반드시 그럴 것입니다.

이 모든 것에서 가장 슬픈 점은 사람들이 완벽함을 추구하다 자기 자신의 일부를 잃어버렸다는 것입니다. 오늘날에는 서예 기술이 필요한 사람이 거의 없습니다. 시간이 오래 걸리고 주의와 인내가 필요합니다. 오늘날 이것은 의미가 없습니다. 결국 모든 취향에 맞는 헤드셋이 있습니다. 이름, 크기, 스타일 등 좀비와 같은 글꼴을 선택합니다. 메시지? 메시지? 컴퓨터 글꼴 뒤에는 메시지도 없고, 이야기도 없고, 아무것도 없습니다.

과거에 대한 향수

오늘날 많은 디자이너들은 텍스트에 필요한 개성을 부여하는 새로운 글꼴의 필요성을 느끼고 있습니다. 타이포그래피를 사용하는 방법에는 여러 가지가 있으며, 각 방법은 동일한 목표, 즉 디지털 서체의 비인격성을 벗어나는 것을 추구합니다. 색상 대비, 볼륨 환상, 음수 공간, 즉 표준 글꼴을 약간 덜 표준적인 글꼴로 바꿀 수 있는 모든 것이 사용됩니다.

이와 관련하여 우리는 잃어버린 글꼴의 진정성을 되찾고자 하는 디자이너의 욕구를 보여주는 세 가지 성장 추세에 주목할 수 있습니다. 타이포그래피에는 세 가지 주요 트렌드가 있지만 문자 그대로 모든 곳에 나타나기 때문에 눈치채지 않기가 어렵습니다. 우리는 복고풍, 수채화, 모자와 같은 스타일에 대해 이야기하고 있습니다.

빈티지 그런지 타이포그래피

타이포그래피에 관한 오래된 기사를 수정했습니다. 아직 못 보신 분들을 위해 읽어보시면 도움이 될 것입니다.

타이포그래피- 웹 디자인의 가장 중요한 측면 중 하나입니다. 웹 디자인의 도움으로 기본 정보가 전송되기 때문입니다. 불행하게도 많은 디자이너와 고객은 프로젝트에 "검증된" 글꼴 한두 개를 선택하는 대담한 실험을 두려워합니다.

그래서 이 글은 타이포그래피의 바다에서 길을 잃은 사람들에게 바칩니다. 타이포그래피의 기본, 글꼴의 종류, 글꼴의 구조에 대해 이야기해보겠습니다.

서체와 글꼴 - 차이점은 무엇입니까?

많은 사람들이 "서체"와 "글꼴"이라는 단어를 같은 의미로 사용합니다. 사실 이것은 똑같은 것이 아닙니다. 이제 그 이유를 설명하겠습니다.

헤드폰작성/인쇄할 수 있는 스타일이 유사한 문자 세트입니다. 숫자, 문자, 기호입니다. 폰트- 이는 크기, 스타일 등 여러 요소에 의해 결정되는 보다 좁은 개념입니다. 일반적으로 Arial은 서체이고 Arial Bold는 글꼴입니다.

분류

글꼴은 세리프(serif), 산세리프(sans-serif), 필기체(스크립트), 디스플레이(display) 등 여러 그룹으로 나눌 수 있습니다. 그러나 다른 유형의 분류가 있습니다.

세리프 글꼴, Antiqua(Serif)

각 글자에 작은 세리프가 있기 때문에 이런 이름이 붙었습니다. 웹 디자인에서 큰 텍스트 블록을 인쇄할 경우 읽기 어려운 것으로 간주되므로 권장하지 않습니다. 이러한 글꼴은 일반적으로 제목에 사용됩니다.

Serif 글꼴에는 꽤 많은 하위 유형이 있습니다. 예를 들어, 구식(“오래된 스타일” – 그들은 인본주의자라고도 불립니다. 인본주의적인 세리프체) - 이 분류의 첫 번째 글꼴은 1400년대에 사용되었습니다. 그들의 구별되는 특징- 기호의 비스듬한 부분이 얇아진다. 글꼴의 예로는 Adobe Jenson, Centaur 및 Goudy Old Style이 있습니다.

과도기적 세리프- 1700년대에 사용되었습니다. 여기에는 Times New Roman, Baskerville, Caslon, Georgia 및 Bookman과 같은 글꼴이 포함됩니다. 글자의 굵은 부분과 얇은 부분의 차이는 Old Style보다 눈에 띄지만 Modern보다 눈에 띄지 않습니다.

모던한 세리프 (새로운 스타일의 앤티크)- 1700년대 이후에 사용되었으며 글자의 굵은 부분과 얇은 부분의 대비가 강합니다. 여기에는 Didot 및 Bodoni와 같은 글꼴이 포함됩니다.

그리고 마지막으로 , 슬랩 세리프(슬래브 글꼴)- 일반적으로 모든 선의 두께가 동일하고 끝 부분에 큰 세리프가 있습니다.

잘린 글꼴, 그로테스크(Sans Serif)

세리프체는 세리프체가 없기 때문에 세리프체라고 불립니다.) 그것들은 더욱 현대적으로 보이며 18세기에 사용되기 시작했습니다.

산세리프 글꼴의 4가지 주요 유형은 다음과 같습니다. 그로테스크(Old Grotesque), 네오그로테스크(New Grotesque), 휴머니스트(Humanistic), 기하학적(Geometric).
오래된 그로테스크- 첫 번째 글꼴은 세리프 글꼴과 유사하지만 세리프가 없습니다.
예를 들어 프랭클린 고딕(Franklin Gothic)과 악치덴제(Akzidenze)

새로운 그로테스크기존의 그로테스크에 비해 단순화된 모습을 가지고 있습니다. 오늘날 가장 인기 있는 글꼴 중 상당수는 MS Sans Serif, Arial, Helvetica 및 Univers와 같은 새로운 산세리프체입니다.

인문주의자- 다른 모든 산세리프 글꼴보다 붓글씨가 더 많습니다(즉, 선 두께가 변경됨). 예를 들어 Gill Sans, Frutiger, Tahoma, Verdana, Optima 및 Lucide Grande가 포함되며 사이트 본문을 채우는 데 자주 사용됩니다.

기하학일반적인 숫자를 기준으로 합니다. 예를 들어 "O"는 원 등입니다. 가장 현대적인 산세리프 글꼴로 간주됩니다. 예 - ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

필기(대본)

손글씨체는 손글씨를 기본으로 합니다. 이러한 글꼴에는 공식 글꼴과 캐주얼 글꼴의 두 가지 종류가 있습니다. 공식적인 것들은 손으로 쓴 것으로 보이며 17세기와 18세기에 나온 것입니다. 일부 글꼴은 George Snell 및 George Bickham과 같은 유명 예술가의 손글씨를 기반으로 합니다. 최신 글꼴의 예로 Kuenstler Script를 사용할 수 있습니다. 아름답고 우아하지만 페이지 본문에는 적합하지 않습니다.

캐주얼 글꼴은 보다 현대적인 버전으로 20세기에 탄생했습니다. 덜 형식적이며 종종 굵은 획과 브러시 획 효과가 있습니다. 이러한 글꼴에는 Mistral 및 Brush Script가 포함됩니다.

글꼴 표시

표시 글꼴 범주에는 일반적으로 텍스트 작성에 적합하지 않은 글꼴이 포함됩니다. 대부분 악센트로 사용됩니다. 인터넷 페이지에 나타나기 시작했지만 일반적으로 인쇄에 사용됩니다. 예를 들어, 디스플레이 중에서 첫 번째 인쇄기의 원래 글꼴인 블랙레터를 찾을 수 있습니다.

알파벳이 아닌 글꼴(Dingbats)

알파벳이 아닌 글꼴- 문자가 전혀 포함되어 있지 않지만 기호와 장식이 포함된 글꼴입니다.

비례 대 고정폭

비례 글꼴에서 문자는 자연 철자법에 필요한 만큼의 공간을 차지합니다. 예를 들어 Times New Roman은 비례 글꼴입니다. 그러나 고정폭 글꼴은 모든 문자의 너비가 동일합니다. 이러한 글꼴에는 Courier New 등이 포함됩니다.

분위기

글꼴의 분위기는 주어진 상황에서 글꼴을 사용하는 것이 적절한지 여부에 큰 영향을 미칩니다. 대조도 자주 사용됩니다. 비즈니스 스타일은 비공식적, 가볍고 극적인 것과 결합됩니다. 예를 들어 Times New Roman은 엄격한 글꼴이며 다음과 같은 용도로 자주 사용되는 글꼴입니다. 비즈니스 서신. 그러나 예를 들어 Helvetica는 일반적으로 주변 글꼴에 따라 분위기가 달라집니다.

두께와 스타일

글꼴의 두께는 다음과 같습니다. 가벼움, 얇음, 보통, 중간, 굵게, 무거움 또는 검은색.

기울임꼴, 기울임꼴, 작은 대문자의 세 가지 글꼴 스타일이 있습니다. 작은 대문자는 일반적으로 제목에 사용됩니다.

이탤릭체와 경사체는 서로 다른 스타일이지만 서로 바꿔 사용할 수 있습니다. Oblique는 일반 글꼴의 기울어진 버전입니다. 그것을 얻으려면 Photoshop의 Free Transform-distort 기능을 사용하십시오. 그러나 기울임꼴은 기울어진 글꼴 버전을 담당하는 별도의 문자 집합입니다.

글꼴 구조

각 문자에는 다른 글꼴과 결합하는 방법을 결정하는 데 사용할 수 있는 특정 특성 세트가 있습니다. 주요 내용은 다음과 같습니다.

글꼴 라인(기준선)- 텍스트가 위치하는 가상의 선입니다. 때때로 둥근 글꼴이 글꼴 줄에서 약간 멀어집니다.

평균선는 대부분의 소문자의 높이를 나타내며 일반적으로 문자 "x"의 높이로 결정됩니다. 이것이 x 높이의 개념이 나오는 곳입니다.

대문자의 윗줄(Cap)- 키 대문자"ㅏ".

위 그림은 모든 문자의 세 가지 공통 부분을 보여줍니다.

메인 스트로크, 스템- 기울어진 기호를 포함하여 각 기호의 주요 수직.

크로스바(바)- 글꼴의 가로 부분

타원형(그릇)- 글꼴의 둥근 부분.

어퍼 익스텐션(어센더)- “d”, “h”, “b” 등 글자가 튀어나온 부분.

디센더- "p", "q", "f" 등의 문자에서 아래쪽으로 튀어나온 부분

세리프- 세리프체의 특징) 일부 글꼴에서는 더 뚜렷하고 다른 글꼴에서는 덜 뚜렷합니다.

구멍- "A", "c" 또는 "m"과 같은 열린 문자를 위한 공백을 나타냅니다.

귀이는 위 예의 문자 "g"와 같이 기호에 장식적으로 추가된 것입니다.

연결스트로크(헤어라인)세리프체에서 가장 얇은 부분입니다.

크로스바 - 수평선, 기호 "A"와 "H"에서와 같이.

드롭(터미널)- 일부 글꼴 문자 디자인에서 획의 원형 또는 타원형(물방울 모양) 끝입니다.

고리일부 소문자 "g" 문자에만 나타나며 완전히 닫힐 수도 있고 부분적으로 닫힐 수도 있습니다.

박차- "G"와 같은 일부 글자에 작은 닉이 있습니다.

연결(링크)상단을 연결하고 하단 부분문자 "g".

척추- 문자 "s"가 갖는 중앙 곡선.

꼬리문자(Tail)- 예를 들어 문자 "R" 또는 "Q"에 장식선이 있습니다.

끝 요소(터미널, 최종)- 세리프 없이 끝나는 획

어깨- 메인 스트로크에서 연장되는 둥근 선입니다. (솔직히 말하면 많은 러시아 사이트에서는 이 개념에 대해 완전히 다른 정의를 제공합니다.)

저자로부터:안녕하세요, 친구들! 우리는 전문적인 웹 디자인의 복잡성을 계속 탐구하고 있으며 오늘은 매우 뜨거운 주제인 웹 타이포그래피를 가지고 있습니다. 불행하게도 많은 개발자들은 이 영역의 기본과 규칙조차 모르고 있습니다. 어쩌면 그들은 귀찮게 하지 않고 시간을 낭비하고 싶지 않을 수도 있고, 그 의미를 완전히 이해하지 못할 수도 있습니다. 일반적으로 제 목표는 웹 디자인의 타이포그래피가 기본의 기초이며 이것이 없으면 앞으로 나아가기가 매우 어려울 것임을 여러분에게 전달하는 것입니다.

타이포그래피와 메시지

모든 인터넷 자원의 목적은 정보 메시지를 전달하는 것입니다. 타겟 고객. 귀하의 웹사이트 방문자는 무엇에 가장 먼저 주의를 기울일까요? 물론, 텍스트에! (물론 무작위 광고와 어리석은 배너로 막히지 않은 경우). 프로젝트의 성공은 궁극적으로 텍스트에 달려 있으며 오직 텍스트에만 달려 있습니다.

웹 디자인에 있어서 타이포그래피가 실제로 어떤 영향을 미치는지 알아봅시다.

첫째, 웹 리소스의 이미지입니다. 고품질의 개발은 육안으로 볼 수 있으며, 사이트에 얼마나 오래 머물고 싶은지 추정하기 위해 대규모 전문가가 될 필요는 없습니다. 비뚤어지고 읽을 수 없는 텍스트는 방문자가 링크를 입력한 후 10~15초 후에 떠나는 첫 번째 이유입니다.

둘째, 웹 리소스의 고유성입니다. 오늘날 인터넷 공간의 진보적인 발전 속도에서 완전히 독특한 콘텐츠를 찾는 것은 단순히 비현실적인 작업이라는 사실을 고려하면, 귀하의 임무는 이 콘텐츠를 고유하게 제시하는 것입니다. 경쟁 사이트의 싸움에서는 항상 방치하지 않는 사람이 승리한다 간단한 규칙그러나 반대로 이를 효과적으로 적용하여 최대의 이익을 얻습니다.

웹 디자인의 타이포그래피 기초

웹 디자인의 글꼴

타이포그래피 웹 디자인완전히 자연의 법칙과 규칙을 가지고 있습니다. 글꼴부터 시작해 보겠습니다. 올바른 선택글꼴은 개발 컨셉을 크게 결정하고 리소스에 대한 전반적인 인식에 영향을 미칩니다.

아주 최근에도 그 당시에 대해서는 알려진 바가 거의 없지만 디자이너는 운영 체제와 함께 제공되는 글꼴만 사용할 수 있었습니다. 모든 훌륭한 버전은 이미지나 플래시에 지나지 않았습니다. 해결 방법이 있었지만 많은 문제가 발생했습니다.

@font-face CSS 속성의 도입으로 디자이너의 손이 자유로워졌습니다. 임의의 글꼴 파일에 대한 링크를 등록했는데 이제 해당 링크가 이미 사이트 페이지에서 사용되고 있습니다. 개발자 측에서는 이 주제에 대해 약간의 불만이 있었지만 이는 완전히 해결 가능한 문제로 판명되었습니다.

모든 글꼴이 유능한 웹 디자인에 적합한 것은 아닙니다. 주로 화면을 읽을 수 없고 보기가 어렵기 때문입니다. 일부 글꼴은 너무 무거워서 리소스 속도가 느려집니다. 이에 주의하세요. 더 추가하겠습니다 기술적 특징글꼴 작업 시: 글꼴 표시 다른 브라우저-파일이나 심지어 온 가족을 처리하는 데 문제가 있습니다.

매크로 및 마이크로 타이포그래피

아마도 이 용어의 이름에서 이미 이해하셨을 것입니다.

매크로 수준 - 빌드 일반 구조텍스트는 디자인과 관련된 콘텐츠의 배치를 결정합니다.

미시적 수준 - 가장 작은 세부사항, 공백, 간격, 들여쓰기 등에 주의를 기울입니다.

매크로 타이포그래피의 작업은 전역적입니다. 즉, 텍스트 블록을 생생하고 활성화하면서도 동시에 조화롭고 통합적으로 만드는 것입니다. 마이크로타이포그래피에는 가독성을 보장하는 더 간단하지만 덜 중요한 작업이 있습니다. 인터넷에는 이러한 문제에 대한 성공 사례와 실패 사례가 많이 있습니다.

전체적인 구성의 구성은 우선 공간에 대한 이해에 있습니다. 웹 디자이너는 전체 그림을 보아야 하지만 동시에 세부 사항까지 유능하게 분해해야 합니다. 여기에는 제목, 단락, 요소 간 수직 거리, 레지스터, 두께 등 중요하지 않은 요소가 없습니다.

웹 디자인용 글꼴을 상대 단위(% 또는 "em")로 지정하는 것이 좋습니다. 이렇게 하면 콘텐츠의 적응성과 유연성이 향상됩니다. 화면 크기가 변경될 때 블록이 이동하지만 글꼴은 안정적으로 유지되는 비반응형 컨테이너에 더 친숙한 "px" 픽셀을 사용하는 것이 합리적입니다.

텍스트 장식

타이포그래피의 중요한 부분은 컴퓨터 기호 조판입니다. 여기에는 구두점 배치, 괄호, 하이픈 및 대시, 마침표, 공백 등이 포함됩니다.

언뜻보기에 이러한 오류는 내용이나 내용의 고유성에 특별한 위협을 가하지 않지만 기억하십시오. 자존심이 강한 리소스는 텍스트의 기본 오류를 허용하지 않습니다. 이미지에 대해 기억하십시오. 사소한 일이 없습니다!

이제 레이아웃에 대해 알아보십시오. 여기에는 다음과 같은 규칙이 있습니다.

텍스트 블록은 페이지 너비의 40~50%로 제한되어야 합니다.

단락 사이에는 1.5 간격이 있어야 합니다.

배경과 텍스트의 대비는 75~90% 이내여야 합니다.

눈에 편안한 글꼴은 12~16px이지만 가장 작은 블록이라도 10px 이상이어야 합니다.

줄 간격은 글꼴 크기를 기준으로 유지되며 백분율로 측정됩니다. 이상적으로는 140~150%이면 충분합니다.

텍스트를 가운데 정렬하거나 양쪽 정렬하는 것은 매우 나쁜 형식으로 간주됩니다. 단어 사이의 울퉁불퉁한 공백과 문단의 울퉁불퉁한 가장자리는 인식을 저하시키고 대개 짜증나게 만듭니다.

CSS 스타일

CSS 스타일은 웹 디자인에서 글꼴 작업을 위한 도구입니다. 개발부터 CSS 스타일모든 훈련 과정이 시작됩니다. 그들은 무엇을 위해 필요합니까? 리소스의 모든 타이포그래피를 요약하자면! CSS는 페이지와 블록을 하나의 전체로 가져오고 기본 코스와의 편차를 제어합니다. 아시다시피 하나의 아이디어만으로는 충분하지 않으며 이를 구현하려면 지식과 기술이 필요합니다.

웹 디자인의 95%가 타이포그래피라는 멋진 기사를 읽은 적이 있습니다. 믿거나 말거나 모두가 스스로 결정할 것입니다. 하지만 읽을 수 없는 텍스트는 목적이 없는 산물이다. 제가 드리는 조언은 정보 전달의 품질에 즉시 주의를 기울이고 지체하지 말라는 것입니다. 그게 전부입니다. 업데이트를 구독하면 가장 흥미로운 소식을 놓치지 않을 것입니다! 안녕!

발생할 수 있는 혼란을 없애기 위해서는 일부 핵심 용어의 의미를 명확히 하는 것이 중요합니다. 첫 번째 중요한 세트 키워드"글꼴"과 "서체"의 개념을 정의합니다.

글꼴은 특정 크기와 디자인의 문자 집합입니다. 서체는 마찬가지로 글꼴 스타일군을 정의하는데 여기서 핵심 단어는 스타일로, 서로 다른 글꼴을 그룹이나군으로 구분합니다. 예를 들어 세리프체, 산세리프체, 필기체, 디스플레이, 고정 폭 등이 될 수 있습니다. 서체는 공통 실행 스타일로 통합된 다양한 스타일과 크기의 글꼴 세트라고 말할 수 있습니다. 보시다시피 글꼴은 더 ​​좁은 개념입니다.

웹 페이지 레이아웃을 만들 때 글꼴 선택은 매우 중요합니다. 당연히 표준 글꼴을 사용하는 것이 가장 좋습니다. 윈도우 세트아니면 맥. 그러나 때로는 이 세트만으로는 디자이너의 아이디어를 구현하기에 충분하지 않아 모든 부담이 레이아웃 디자이너의 어깨에 지게 됩니다. 다행스럽게도, 구글 웹 글꼴이 문제에 대한 매우 우아한 솔루션을 제공합니다.

"가중치" 및 커닝과 같은 용어도 있습니다. 모두 다음을 사용하여 변경할 수 있습니다. CSS 도구단락, 제목 또는 기타 텍스트 요소에 적용할 수 있습니다. 글꼴의 "두께" 속성에 따라 글씨를 쓸 때 선의 두께 정도가 결정됩니다. 100부터 900까지의 일련의 값으로, 각 숫자는 스타일의 대담함에 해당하는 가중치를 나타냅니다. 일반 글꼴 "normal"은 숫자 400에 해당하고 굵은 "bold" 글꼴은 700에 해당합니다. 커닝은 모양에 따라 문자 사이의 간격이 변경되는 것입니다. 이는 기호를 올바르게 배치하고 기호 사이의 거리를 조정하여 조화를 이루는 과정입니다. 많은 사람들이 커닝에 별로 관심을 두지 않지만, 아주 좋은 결과를 얻는 데는 작은 것들이 도움이 됩니다.

규범 위반

새로운 글꼴을 만들 필요성에 대해 논의하는 것은 상당히 합리적입니다. 뒤에 최근에많은 웹사이트가 오래되었습니다. 그들은 우리가 이미 꽤 지쳤던 표준 글꼴을 사용합니다.

오늘날에는 수백 가지의 글꼴이 있지만 서로 다릅니다. OS자체 패키지를 제공합니다. 그리고 이 패키지에는 몇 가지 글꼴만 포함되어 있습니다. 다른 사람이 귀하의 시스템에 갖고 있지 않은 글꼴을 선택하면 해당 글꼴이 기본 글꼴로 대체됩니다. 이러한 이유로 기본 글꼴 사용을 권장합니다. 그러나 때로는 기본 글꼴이 디자이너의 상상력을 완전히 포착하지 못할 수도 있습니다. 따라서 디자인에 특수 글꼴이 필요하다고 강하게 생각한다면 특수 글꼴을 이미지로 변환하여 웹 사이트에 업로드할 수 있습니다. 제목, 헤더 또는 메뉴 그래픽을 만들고 사용하십시오.

제목이 사이트의 주제와 일치하는지 확인하세요. 여기에는 다양한 색상, 밑줄, 배경 아이콘 또는 그래픽 텍스트가 포함될 수 있습니다. 궁극적으로 결정은 귀하의 것입니다.

또한 사이트의 모든 텍스트 링크에 ​​동일한 글꼴이 있는지 확인해야 합니다. 다양한 글꼴과 디자인의 링크를 사용하면 사용자가 탐색하는 데 상당한 어려움을 겪게 됩니다.

올바른 글꼴 선택

또한 다양한 글꼴이 독자의 기분에 다양한 영향을 미칠 수 있다는 점에 유의해야 합니다. 일반적으로 인쇄물에는 세리프 글꼴이 더 적합합니다. 세리프는 문자 사이에 공간을 만들고 한 문자를 다른 문자와 분리하는 데 도움이 됩니다. 종종 세리프 글꼴은 개인적인 느낌을 제공하며 존중, 지성 및 전문성을 전달합니다.

산세리프 글꼴은 웹 페이지에 가장 적합합니다. 화면 해상도가 낮으면 세리프가 흐릿해 보이고 인식하기 어려워집니다. 산세리프 글꼴은 합리성, 스타일리시함, 젊음, 현대성을 표현하는 경향이 있습니다.

예를 들어, 세리프체를 선택하면 전문성과 권위 있는 정보를 얻을 수 있습니다. 이는 New York Times와 같은 주류 언론 매체에서 종종 볼 수 있습니다. 소규모 블로그의 경우 줄 높이가 큰 산세리프 글꼴을 사용할 수 있습니다. 이를 통해 사용자는 블로그 텍스트를 빠르게 볼 수 있습니다.

방문자에게 어떤 정보를 전달하려고 하는지 항상 생각해야 합니다. 글꼴을 선택할 때 행복한 메시지에는 가볍고 바람이 잘 통하며 부드러운 글꼴 모양이 포함되어야 하며, 할로윈과 같은 일부 어두운 테마가 포함된 메시지에는 가장자리가 단단한 글꼴이 더 잘 포함되어야 한다는 점을 기억해야 합니다.

읽기 쉬움

타이포그래피, 그리고 종종 읽기 어려운 타이포그래피는 눈에 매우 짜증스러울 수 있습니다. 물론, 나이트클럽 프로모션과 같이 Funky 또는 기타 읽기 어려운 글꼴을 사용할 수 있는 몇 가지 예외가 있습니다.

그러나 예를 들어 Soda, Bored 또는 Akka를 사용하고 싶다면 이 아이디어를 포기하는 것이 좋습니다. 욕구가 여전히 충분히 강하다면 이러한 글꼴을 자제해서 사용해야 합니다. 예를 들어 제목으로. 하지만 그러면 본문이 더 읽기 쉬워야 합니다. 이는 귀하의 사이트에 추진력을 만드는 데 도움이 될 수 있습니다. 그리고 이러한 글꼴의 사용은 디자인의 장점이지 단점이 아니라는 점을 기억해야 합니다.

정보 내용

디자인은 메시지를 보완해야 합니다. 사용자는 디자이너가 정확히 무엇을 염두에 두고 있었는지 알아낼 필요가 없습니다. 잘못된 타이포그래피 선택은 회사와 서비스에 대한 사용자의 오해를 불러일으킬 수 있습니다.

비즈니스 프로젝트를 디자인할 때는 주로 전통적인 부드러운 글꼴을 사용해야 합니다. 공식 디자인이 없는 경우에도 이 점을 고려해야 합니다. 특히 사람들이 귀하의 사이트를 진지하게 받아들이기를 원한다면 더욱 그렇습니다.

배치 및 치수

효과적인 디자인을 위해서는 텍스트를 어느 위치에 배치해야 하는지, 텍스트 크기는 얼마인지가 매우 중요합니다. 정보를 읽거나 웹사이트에서 엄청난 양의 단어를 보기 위해 눈을 긴장시키고 싶어하는 사람은 아무도 없습니다. 좋은 디자인의 목표는 균형을 찾는 것입니다. 그리고 이를 위한 첫 번째 단계는 어떤 정보가 더 중요할지 파악하는 것입니다.

일반적으로 주의를 기울이고 싶은 단어는 조금 더 수행해야 합니다. 또는 그 반대의 경우도 마찬가지입니다. 작은 항목은 더 작아야 합니다. 그것은 모두 중요성에 달려 있습니다. 즉, 단어의 계층 구조를 만들어야 합니다.

글꼴 배치에 관해서는 균형을 유지하도록 노력하십시오. 텍스트의 일부를 네 모서리에 흩뿌릴 필요가 없습니다. 이는 사용자에게 상당한 방해가 될 수 있습니다.

색상

이것은 가장 쉬운 측면 중 하나입니다. 텍스트가 배경보다 눈에 띄고 읽기 쉬운 색상을 선택해야 합니다.

당신의 도우미는 대비되는 색상뿐만 아니라 스트로크(Stroke) 및 글로우(Glow)와 같은 효과의 사용도 가능합니다. 이렇게 하면 사이트를 더욱 매력적이고 읽기 쉽게 만드는 데 도움이 됩니다. 사람들이 멈춰서 보게 만들고, 정보가 디자인의 지배적인 부분이 되도록 색상을 선택해야 합니다.

결론

Photoshop에서 글꼴을 사용하는 것은 웹 페이지에서 글꼴을 사용하는 것과 크게 다릅니다. 이는 일부 디자이너가 타이포그래피 작업에 어려움을 겪는 이유를 설명합니다. 웹에서의 타이포그래피는 상당히 광범위한 주제이며 많은 연구가 필요합니다. 디자인의 분위기와 미학에 어울리는 타이포그래피 사용에 대한 접근 방식을 찾는 것이 매우 중요하다는 점을 항상 기억해야 합니다. 믹스 앤 매치를 두려워하지 마세요 다양한 방식글꼴이 좋은지 확인하세요.

친구!

이 기사에서는 초보 디자이너의 가장 흔한 실수를 계속해서 분석하겠습니다.

오늘은 글꼴 사용에 대해 이야기하겠습니다. 초보자의 작업과 전문가의 작업을 어떻게 구별할 수 있는지 아시나요? 일반적으로 초보자는 자신이 배운 모든 것을 자신의 작업에서 보여 주려고 노력합니다. 이는 동일한 작업에서 다양한 색상, 다양한 효과, 그리고 물론 수많은 글꼴을 풍부하게 사용하는 것으로 나타납니다. 반면, 전문 디자이너는 일반적으로 하나의 프로젝트 내에서 하나 또는 최대 두 개의 글꼴과 제한된 색상 팔레트를 사용합니다. 그리고 그래픽 효과 없이는 절대 할 수 없다면 사용을 최소한으로 줄이려고 노력합니다.

따라서 좋은 디자인의 첫 번째 규칙이 건축이라면 모듈형 그리드(기사 참조) 두 번째 규칙은 글꼴 수를 제한하는 것입니다!

최소한의 글꼴 수로 디자인의 규정 준수 및 일관성 향상. 작업에 다양한 스타일이 포함되어 있지 않고 모든 종류의 색상과 글꼴이 풍부할수록 작업이 더 의미 있고 전문적으로 보입니다.

대부분의 경우 디자이너는 프로젝트에 대해 하나의 글꼴을 선택합니다. 또한 선택한 글꼴의 특성은 창의적인 아이디어나 디자인의 분위기와 일치해야 합니다. 예를 들어, 우리가 다음과 같은 책자를 만든다면 휴대폰 3세대라면 가볍고 현대적인 산세리프 글꼴이 우리에게 가장 적합할 것입니다. 그러나 Hermitage에서 열린 인상파 전시회를 주제로 한 소책자는 고전적인 "안정적인" 세리프 글꼴에 더 적합할 것입니다. 일반적으로 디자이너의 작업에서 성공적인 글꼴 선택은 매우 중요합니다. 글꼴의 성격과 프로젝트의 아이디어 및 성격 간의 불일치로 인해 전체 작업이 망가질 수 있기 때문입니다.

때로는 추가 글꼴을 사용해야 할 때도 있습니다. 두 개의 글꼴로 작업할 때 첫 번째 글꼴은 작품의 분위기와 성격을 강조하고 개성을 부여하는 경우가 많은 것 같습니다. 이 글꼴은 제목과 부제목에 사용됩니다. 때때로 디자이너는 이러한 목적으로 특이한 글꼴을 사용합니다. 이는 독창성을 위해 수행되는 것이 아니라 더 친숙한 두 번째 글꼴과 관련하여 대비를 높여 텍스트의 특정 부분을 강조하기 위한 것입니다.

한 작품에 제목이 그리 많지 않기 때문에 특히 제목이 본문보다 훨씬 크기 때문에 대조의 원리가 완벽하게 작동합니다.

일반적으로 두 번째 글꼴은 눈에 더 친숙하며 그 임무는 시청자의 관심을 끄는 것이 아니라 순전히 유익한 기능을 수행하는 것입니다. 읽기 쉽고 눈이 피로하지 않아야 합니다. 초보자는 너무 화려하고 읽기 어려운 글꼴로 큰 텍스트 조각을 만드는 심각한 실수를 저지르는 경우가 많습니다. 나는 또한 소위 "손으로 쓴" 글꼴의 대부분을 그러한 글꼴로 포함합니다. 이러한 글꼴은 작은 인사말 카드에는 적합하지만 작업에는 적합하지 않습니다. 큰 금액텍스트.

글꼴을 잘 활용한 예는 다음과 같습니다.

보시다시피 여기에는 두 가지 글꼴만 사용됩니다. 하나는 제목용이고 다른 하나는 본문용입니다. 이 작품은 우아하고 일관성이 있어 보입니다.

글꼴을 잘못 사용하는 경우는 다음과 같습니다.

여기서는 이 디자인의 부조화와 불일치를 느낄 수 있도록 의도적으로 특이한 글꼴을 사용했습니다. 작업에 너무 많은 글꼴을 사용하지 마십시오! 8가지의 서로 다른 글꼴이 섞여 있는 작업, 특히 글꼴이 너무 화려하고 읽기 어려운 작업보다 더 나쁜 것은 없습니다.

다음은 그러한 작업의 예입니다.

이것은 내 상상의 산물이 아닙니다. 나는 그런 작품을 많이 보았고 원칙적으로 초보 디자이너 나 아마추어가 만든 작품이었습니다.

디자인 교과서를 보면 제목에 산세리프 글꼴을 사용하고 본문 텍스트에 세리프 글꼴을 사용하라는 권장 사항을 찾을 수 있습니다.

그러나 이 규칙은 너무 일반적이어서 실제로는 이를 우회해야 하는 경우가 많습니다.
그럼 마지막으로 조언을 하나 더 드리겠습니다. 타이틀 폰트가 모던해 보인다면 산세리프체를 메인 폰트로 선택하는 것이 좋습니다. 첫 번째 글꼴이 구식이라면 기본 글꼴은 세리프여야 합니다.

글꼴 사용에 대한 주제는 무궁무진하므로 하나의 작은 기사에서 모든 것을 이야기하는 것은 불가능합니다. 가능할 때마다 글꼴 작업에 대한 지식을 여러분과 공유하겠습니다. 그건 그렇고, 내 인디자인 교육 과정, 저는 이 중요한 주제에 큰 관심을 기울이고 있습니다.