타이포그래피

Spaceship의 타이포그래피 환경은 두 가지 서체를 사용합니다: 친근하고 기술적인 Gotham Rounded와 더 단순하고 기하학적인 Proxima Nova입니다.

Hero Image

Spaceship의 타이포그래피는 자신감 있고 직설적이며, 우리의 오디언스와 친근하고 대화하는 듯한 톤을 가능하게 합니다.



주요 폰트

Gotham Rounded는 친근하면서도 세련된 서체입니다. Spaceship 로고, 제품 서브 브랜드, 팀 아이덴티티에만 독점적으로 사용됩니다. 허용되는 웨이트는 미디엄, 북, 라이트뿐입니다.









보조 폰트

Proxima Nova는 Spaceship의 그래픽 환경에서 핵심 요소입니다. 모든 커뮤니케이션의 주요 서체로 사용됩니다. 볼드, 미디엄, 레귤러, 라이트만 이 서체에서 허용되는 웨이트입니다.









스케일

타입 스케일 시스템과 필요한 크기 단계는 황금비(1:1.618)를 사용하여 구축 및 결정되었습니다. 기본 크기에서 타이포그래피 스케일 계산기로 전체 타입 스케일 세트를 만들었습니다. 황금비는 크기 간 큰 차이를 만들기 때문에, 보다 최적의 범위를 위해 보조 기준 크기(기본 크기의 2배)가 필요합니다. 아래 예시는 16px 및 32px 기준 크기를 기반으로 한 타입 스케일을 보여줍니다.









텍스트 스타일

Proxima Nova는 작은 본문 텍스트와 큰 헤드라인 모두에서 최대의 시각적 일관성을 제공합니다. 다양한 웨이트로 어떤 톤이나 메시지에도 적합합니다. 좌측 정렬이 선호되지만, 필요할 경우 중앙 정렬도 사용할 수 있습니다.




헤드라인에는 볼드 웨이트, 옵티컬 커닝, 자동 행간, 80% 단어 간격을 사용하세요.


일반적인 헤드라인에는 볼드 웨이트, 옵티컬 커닝, 자동 행간, 80% 단어 간격을 사용하세요.


짧은 서브헤드에는 미디엄 또는 레귤러 웨이트, 옵티컬 커닝, 자동 행간, 100% 단어 간격을 사용하세요. 


서브헤드에는 미디엄 또는 레귤러 웨이트, 옵티컬 커닝, 자동 행간, 100% 단어 간격을 사용하세요.


문단에는 레귤러 또는 라이트 웨이트, 메트릭스 커닝, 자동 행간, 100% 단어 간격을 사용하세요.


작은 본문 텍스트에는 레귤러 또는 라이트 웨이트, 메트릭스 커닝, 자동 행간, 100% 단어 간격을 사용하세요.







타입 계층 구조

효과적인 콘텐츠 계층 구조를 위해 타이포그래피는 헤드라인, 서브헤드, 본문 텍스트 간의 조직적 관계를 전달해야 합니다. 올바른 웨이트와 크기를 조합하면 강한 시각적 대비를 만들고 독자의 시선을 안내할 수 있습니다.









안전 여백

최대 가독성을 보장하고 다음 텍스트 블록을 위한 안전 여백을 설정하기 위해 헤드라인 행간 측정을 기준으로 행간을 참조합니다.









색상 조합

아래에 제시된 색상 조합만이 단색 배경 위의 텍스트에 허용됩니다.










배경

이미지나 컬러 배경 위에 텍스트를 사용할 때는 대비와 가독성이 핵심 요소입니다.










가이드라인

텍스트 작업 시 피해야 할 예시를 소개합니다. 




정의된 커닝, 단어 간격, 행간 값을 과도하게 변경하지 마세요.


계층 구조를 염두에 두세요: 더 강한 헤드라인, 더 가벼운 서브헤드, 본문 등.


우측 정렬 문단을 사용하지 마세요.


보조, 제품, 서브 브랜드 색상 등 다른 색상을 텍스트에 사용하지 마세요.


컬러 배경 위에는 흰색 또는 진회색 텍스트만 사용하세요.


가독성이 핵심입니다. 복잡한 이미지나 유사한 색조의 배경 위에 텍스트를 배치하지 마세요.