잠시만요... 글꼴과 서체는 같은 것이 아닌가요?
프로젝트에 사용할 글꼴을 선택하는 방법이 궁금하신가요? 서체는 어떻습니까? 잠깐만요... 차이점이 뭐죠? 이러한 용어는 실수로 계속해서 사용됩니다. 소음을 극복하는 데 도움이 되도록 여기에 간략한 개요가 있습니다.
서체 대 글꼴
세상에서 가장 혼란스러운 활자 용어부터 시작하겠습니다...
서체는 글꼴 패밀리를 나타냅니다. Arial, Times New Roman 및 Helvetica는 모두 서체의 예입니다. 서체의 특정 스타일을 언급할 때 글꼴에 대해 말하는 것입니다. 예를 들어 Helvetica Light, Helvetica Oblique 및 Helvetica Bold는 모두 Helvetica 글꼴의 예입니다.
- Typeface = Helvetica
- Font = Helvetica Bold Italic
아주 옛날에는 금속으로 된 글자를 잉크로 말아서 종이에 눌러 인쇄했습니다. Helvetica를 사용하려면 모든 크기, 무게 및 스타일의 Helvetica가 포함된 거대한 금속 문자 상자가 있어야 했습니다. 이제 우리는 마법 같은 컴퓨터 기계를 가지고 있기 때문에 모든 종류의 다양한 글꼴을 선택하기만 하면 사용할 수 있습니다. 한편 요하네스 구텐베르크의 유령은 숨을 죽이고 우리를 저주하고 있습니다.
{{lead-magnet}}
서체의 4가지(주요) 유형
지금까지 가장 확실하게 들어본 글꼴 패밀리(서체라고도 함)의 주요 범주는 serif, sans입니다.세리프, 스크립트 및 장식. 당신이 그것에 대해 슈퍼 괴짜를 얻고 싶다면 해당 범주 내에 많은 유형의 가족이 있으며 fonts.com에서 모두 확인할 수 있습니다.
Serif - Serif 글꼴 가족이 번성했습니다 또는 문자 부분 끝에 붙는 악센트(일명 세리프). 이들은 일반적으로 비디오보다는 인쇄물에 더 많이 사용됩니다.
![](/wp-content/uploads/history/195/wei1p1dpcl.gif)
Sans-Serif - Sans-Serif 서체는 문자 끝에 작은 악센트나 꼬리가 없습니다. . 이러한 글꼴은 일반적으로 MoGraph에서 읽기가 더 쉽습니다. 참고: "Sans"는 "without"의 또 다른 단어입니다. 지금은 커피를 마시지 않고 최대한 빨리 그 상황을 바로잡아야 할 것입니다.
![](/wp-content/uploads/history/195/wei1p1dpcl-1.gif)
스크립트 - 스크립트 글꼴은 필기체처럼 보입니다. 1990년 이후에 태어났다면 그게 뭔지 모를 수도 있지만 괜찮습니다. 스크립트는 손글씨처럼 보이는 서체라고 생각하면 됩니다.
![](/wp-content/uploads/history/195/wei1p1dpcl-2.gif)
장식 - 장식 범주는 기본적으로 처음 세 범주에 속하지 않는 다른 모든 서체를 포착합니다. 이상해 질 수 있습니다...
![](/wp-content/uploads/history/195/wei1p1dpcl-3.gif)
유형 분석
글꼴 자체를 변경하지 않고 변경할 수 있는 유형의 일부 속성이 있습니다. 다음은 기본 사항에 대한 간략한 설명입니다.
커닝
커닝은 두 글자 사이의 가로 공간입니다. 이것은 일반적으로 소문자 옆의 대문자로 인해 발생하는 문제를 조정하기 위해 단일 문자 쌍에 수행됩니다.또한 keming이라는 나쁜 커닝의 예를 다루는 멋진 reddit도 있습니다(알겠습니다. r과 n이 너무 가깝기 때문에...) 다음은 커닝의 예입니다. 2>자간은 커닝과 비슷하지만 모든 문자 사이의 가로 간격에 영향을 미칩니다.
![](/wp-content/uploads/history/195/wei1p1dpcl-5.gif)
LEADING
마지막으로 행간('레딩'으로 발음)은 텍스트 줄 사이의 간격에 영향을 줍니다.
너드 팩트! 오래된 금속 활자 인쇄 시대에는 인쇄기에서 텍스트 줄을 서로 간격을 두기 위해 납 조각(식수에 포함된 독성 물질)을 사용했습니다.
![](/wp-content/uploads/history/195/wei1p1dpcl-6.gif)
프로젝트에서 이러한 유형 수정자를 조정하면 유형 록 스타가 될 것입니다. MoGraph 세계의 활자 록 스타에 대해 몇 가지 타이포그래피 이름을 적어 보겠습니다.
타이포그래피 영감
SAUL 및 ELAINE BASS
Saul Bass를 몰라 영감을 얻을 시간입니다. 그는 기본적으로 우리가 알고 있는 영화 제목의 할아버지입니다. 원래 영화 포스터 작업을 하는 그래픽 디자이너였던 그는 영화의 분위기를 소개하기 위해 메인 타이틀을 만든 최초의 사람 중 한 명이 되었습니다. 황금팔을 가진 사나이 , 살인의 해부 , 사이코 , 북북서에서 북으로 .
이것들은 멋진 모션 디자인일 뿐만 아니라 After Effects 이전의 세상에서 진지한 사랑의 노동이기도 합니다. 확인Art of the Title에서 그의 작품이 남긴 놀라운 유산.
카일 쿠퍼
당신의 뇌를 폭발시킨 첫 번째 영화 제목을 기억하십니까? 꽤 많은 모션 덕후들에게 그것은 Se7en 의 제목이었습니다. 모르셨다면 지금 바로 시청하세요...
당황? 그래 좋아. Se7en은 (1995년식 방식으로) 가장 키네틱 유형입니다.
이를 담당하는 사람은 에이전시 Imaginary Forces의 공동 설립자이자 유일한 Kyle Cooper입니다. 역대 가장 좋아하는 영화 제목 10개를 선택하세요. 그의 이름이 적어도 그 중 하나에 있을 가능성이 있습니다.
아직 영감을 받지 못하셨나요? 키네틱 유형의 놀라운 예가 많이 있습니다. 지금은 그대로 두어 유형을 선택하는 몇 가지 기술을 사용하여 더러워질 수 있도록 하겠습니다.
Mograph 의 유형 선택
유형은 통신입니다. 활자는 단어의 의미를 전달하지만 활자의 시각적 스타일은 단순히 단어 자체보다 훨씬 더 많은 것을 전달합니다.
프로젝트에 적합한 서체와 글꼴을 찾는 것은 주관적인 과정입니다. 색상 팔레트를 선택하는 것과 비슷합니다.
무엇을 말하고 싶은지 생각한 다음 어떻게 말하고 싶은지 생각해 보세요.강력한 표현인가요? 미묘한 디테일? 지시? 메시지가 끈질기나요? 서둘러? 무서운? 로맨틱?
글꼴, 계층 구조, 배율, 톤 및 색상을 선택하여 보는 사람의 마음에 감정과 아이디어를 만들 수 있습니다. 제일중요한 것은 의미를 이해하는 것입니다. 우리는 디자인 부트캠프에서 서체와 레이아웃에 대해 많이 이야기합니다.
일부 일반화할 수는 있지만 실제로는 개인 디자인 선택에 달려 있습니다. 구성의 핵심 단어와 선택한 글꼴이 어떻게 개성과 대비를 만들 수 있는지 생각해 보십시오. MK12의 이 작품은 이야기를 전달하는 키네틱 타이포그래피의 훌륭한 예입니다.
애니메이션과 마찬가지로 키네틱 타이포그래피를 마스터하려면 시간과 연습이 필요합니다.
글꼴 찾기
무료 글꼴과 유료 글꼴을 모두 찾을 수 있는 곳이 많이 있습니다. 다음은 우리가 가장 좋아하는 몇 가지입니다.
- Fonts.com - 월 $9.99
- TypeKit - Creative Cloud에 포함되거나 추가되는 다양한 레벨(여기서는 TypeKit을 꽤 많이 사용합니다. at School of Motion)
- DaFont - 다양한 공짜
애니메이션 유형
이 사실을 아직 모르신다면 이 다음 부분을 읽은 후 나에게 키스하고 싶을 수도 있습니다... 이것은 매우 멋진 시간 절약 장치입니다.
암스테르담에 있는 Animography라는 작은 회사는 우리 MoGraph 덕후들이 구매하고 사용할 수 있는 애니메이션 서체를 만들기 위해 열심히 일하고 있습니다. MoGraph 균열에서 After Effects 텍스트 애니메이션 사전 설정을 생각하십시오. 나중에 감사해도 됩니다.
Animography에서 확인하고 그곳에 있는 동안 전체 라이브러리를 탐색하세요. 순수한 MoGraph 골드입니다.
더 많은 것이 있습니다.출처는...
멋진 유형 조합
School of Motion 팀에 가장 좋아하는 유형 조합을 공유해 달라고 요청했습니다. 다음은 즐겨찾기 중 일부입니다. 다음 프로젝트에서 자유롭게 사용하십시오.
![](/wp-content/uploads/history/195/wei1p1dpcl.jpeg)
새로운 타이포그래피 지식에 행운을 빕니다. 하지만 활자에 있어서 가장 중요한 것은...
Comic Sans는 절대 쓰지마세요...절대.
![](/wp-content/uploads/history/195/wei1p1dpcl-7.gif)