[UX] 구글 머티리얼 디자인 – 3.6.머티리얼 기초(Material foundation) – 서체(Typography): 서체 시스템(The type system)
서체(Typography)는 이미지와 함께 제품을 표현하기 위해 가장 중요한 표현 요소입니다. 서체는 좁은 의미에서 흔히 글꼴 또는 폰트라고도 하며, 제품의 디자인과 콘텐츠를 표현하는 서체는 최대한 명확하고 효율적으로 사용해야 한다고 머티리얼 디자인은 명시하고 있습니다.
출처: 원문보기
1. 서체 스케일 (Type scale)
머티리얼 디자인 서체는 제품과 콘텐츠의 다양한 요구사항에 부합하는 서체 크기와 서체 스타일을 포함합니다.
아래 서체 스케일 생성기에서 서체는 13개의 서로 다른 스타일을 포함합니다. 서로 다른 스타일이란 제목(Headline), 부제목(Subtitle) 등과 같이 서체의 쓰임에 따라 크기나 굵기 등을 표현한 것을 의미합니다. 자세한 내용은 아래 크기별 서체 스케일 생성기(Type scale generator)에서 설명하겠습니다.
1.1. 서체 스케일 생성기 (Type scale generator)
구글에서 지원하는 구글 서체(Google Fonts)는 서체 생성기를 통해 다양한 서체 스타일과 이에 상응하는 스타일 코드를 CSS로 생성할 수 있습니다. 서체를 선택하면 서체 생성기는 가독성을 보장하며 머티리얼 서체 가이드라인에 따라 각 서체 유형별 최적화된 서체 스타일을 자동으로 생성합니다.
서체 생성기에서 서체 스케일 유형(Scale category)은 서체가 쓰이는 쓰임에 따른 스타일을 구분합니다. 서체 스케일 유형은 제목(Headline), 본문(Body), 버튼(Button) 등과 같이 각각의 쓰임에 따라 세부 스타일을 구분합니다. 서체 스케일 생성기에서 서체는 아래 서체 스케일 생성기의 오른쪽 드롭다운 메뉴를 통해 변경할 수 있습니다.
1.2. 서체 스케일 예시 (Example type scale)
아래의 서체 스케일 예시는 Roboto 서체를 이용해 나타낸 것으로 서체 스케일 유형(Scale category)에 따라 제목(Headlines), 부제목(Subtitles), 본문(Body), 캡션(Captions) 등, 서체 종류(Typeface)에 따라 Roboto, 서체 굵기(Weight)에 따라 Light, Medium, Regular, 서체 크기(Size)에 따라 96,60,48, 대소문자 표현(Case)에 따라 모든 문자를 대문자로 표현하는 All Caps와 앞글자만 대문자로 표현하는 일반 문장(Sentence), 자간(Letter spacing)에 따라 -1.5, -0.5 등의 정보를 포함합니다.
위 그림은 머티리얼 디자인의 서체 스케일을 나타낸 것입니다. 이중 자간(Letter spacing)은 와이어프레임 툴인 스케치(Sketch)와 호환됩니다.
스케치에서 Roboto 타입의 서체 스케일을 사용하려면 아래 자원을 다운로드 하십시오.
1.3. 서체 크기 단위 (Font size units)
안드로이드(Android), iOS, 웹(Web)에서 서체의 크기를 표현하는 단위는 아래와 같습니다. Android는 UI 크기를 지정하는 dp 단위 처럼 서체 크기를 스크린의 화소 밀도에 따라 자동으로 변환하는 sp 단위를 사용합니다. iOS는 일반적인 서체 크기를 나타내는 pt 단위를 사용합니다. Web은 rem이라는 단위를 사용하는데, 반응형 웹사이트에서 화면의 너비가 줄어들면 줄어드는 너비에 따라 글자 크기를 자동으로 조정하기 위한 단위입니다.
rem 단위는 Web에서 Android의 sp와 비슷한 효과를 낸다고 보면 됩니다. rem 단위는 웹 브라우저의 너비가 변경됨에 따라 서체의 크기를 자동으로 조정하게 됩니다. 기존에 서체 크기를 표현하는 단위로 px를 많이 사용했지만 px는 화면의 너비가 변경될때마다 그때그때 글자 크기를 조정해야 하거나 글자가 지정된 영역을 초과되는 등의 등의 발생할 수 있어서 반응형 웹을 고려한다면 px가 아닌 rem을 사용해야 합니다.
| Platform | Android | iOS | Web |
|---|---|---|---|
| Font size unit | sp | pt | rem |
| Conversion ratio | 1.0 | 1.0 | 0.0625 |
| Android | iOS | Web |
|---|---|---|
| 10sp | 10pt | 0.625rem |
| 12sp | 12pt | 0.75rem |
| 24sp | 24pt | 1.5rem |
| 60sp | 60pt | 3.75rem |
rem은 웹 브라우저에서 root element(예: body 태그)에 정의된 서체 크기를 기반으로 자동으로 계산됩니다. 예를 들어 아래와 같이 body 태그에 기준 서체 크기를 10px로 정의하고, 이하 문서에서 서체 크기를 1rem을 적용하면 자동으로 10px이 서체 크기로 지정된다는 뜻입니다.
- body {font-size:10px}
root element에서 서체 크기를 지정하지 않으면 시스템은 기준 서체 크기를 16px로 설정합니다. 이를 다시 이용하여 root element의 서체크기를 아래와 같이 정의할 수도 있습니다. 시스템에서 기준 서체 크기를 얼마로 할지 모를 경우 다음과 같이 적용할 수 있다는 것입니다.이때 기준 서체 크기는 32px(16px*2)가 됩니다.
- body {font-size:2rem}
위에서 언급했다시피 만약 root element(예: body 태그)에 별도로 서체 크기를 지정하지 않으면 시스템은 기준 서체 크기를 16px로 설정합니다.
Android의 sp는 px와 1:1 사이즈로 변환됩니다. 다시 말해 1sp는 1px가 되고, root element에 기준 서체 크기가 별도로 지정되지 않아 16px가 자동으로 설정되었다면 sp와 rem 사이의 변환 공식은 다음과 같이 표현됩니다.
- SP_SIZE/16=rem (16:1=1:x)
쉽게 말해 16px일때 1rem은 1px일때 얼마인가를 비례식으로 계산한다고 생각하면 됩니다. 이 경우, body 태그에서 별도의 기준 서체 크기를 정한다면 변환식의 16을 다른 사용자가 직접 지정한 숫자로 변경하면 수식이 완성된다는 뜻입니다. 변환식이 잘 이해가 안된다면 댓글로 남겨주십시오.
1.4. 자간 단위 (Letter spacing units)
각 플랫폼별 자간(글자 간격)을 위한 단위는 다음과 같습니다.
| Platform | Android | iOS | Web |
|---|---|---|---|
| Letter spacing unit | em | pt | rem |
| Conversion ratio | (Tracking from Sketch / font size in sp) = letter spacing | 1.0 | (Tracking from Sketch / font size in sp) = letter spacing |
일반적인 서체의 크기를 나타내는 pt는 제외하고, rem은 위에서 설명한 원리와 동일합니다.
문제는 Android의 em이라는 단위인데, 이 단위는 rem과 달리 root element에서 정의한 서체를 기준으로 적용되는 것이 아니라 해당 UI를 포함하고 있는 부모의 서체 크기에서 상대적으로 계산을 하는 단위입니다.
다음과 같이 서체를 포함하고 있는 UI 계층 구조가 있다고 생각해 보겠습니다. 안드로이드에도 UI를 출력하는 것은 아래의 html과 같은 계층 구조로 되어 있으니 개념은 동일하게 이해하면 됩니다.
| <body>body text <div>div text <p>p text </p> </div> </body> body {font-size: 2rem} div {font-size: 0.5em} p {font-size: 0.5em} |
<body>에서 기준 서체가 2rem으로 32px로 설정된 것을 알 수 있습니다. 이때, <div>는 <body>의 자식 계층에 있는 요소이고, 0.5em으로 적용되었다는 것은 부모 계층에서 정의한 요소가 있다면 해당 요소를 기준으로 상대값을 적용한다는 의미가 됩니다. 즉, <div>의 서체 크기는 32px*0.5=16px가 됩니다.
마찬가지로 <p>는 <div>의 자식 계층에 있는 것으로 em이 적용되었는데, 부모 계층인 <div>의 16px를 기준으로 다시 16px*0.5=8px가 되는 개념입니다.
em은 바로 상위 계층에 있는 부모에서 정의한 서체 크기를 기준으로 상대적 크기를 계산합니다. 즉, <p>는 <div>에서 정의한 크기를 기준으로 em을 계산하고, <div>는 <body>에서 정의한 크기를 기준으로 em을 계산한다는 의미입니다.
만약 바로 상위 부모 서체의 크기가 정의되지 않았다면 그 상위 부모의 부모를 계속 거슬러 올라가면서 서체 크기가 존재하면 해당 서체 크기를 이용하여 상대적 크기를 계산하게 됩니다. em에서 서체 크기가 지정되지 않았다는 의미는 기본값인 1em으로 적용이 되었다는 뜻이기 때문입니다. 결국 부모를 거슬러 올라가면서 서체 크기를 확인했는데도 어떤 부모도 서체 크기를 지정하지 않았다면 root element의 서체 크기인 16px를 기준으로 em값을 계산하게 될 것입니다.
| Android | iOS | Web |
|---|---|---|
| (.2 tracking / 16sp font size)=0.0125 em) | -0.1pt | (.2 tracking / 16sp font size)=0.0125 em) |
위의 자간 변환을 위한 예시는 em에 대한 개념을 충분히 설명하고 있지 못하기 때문에 위에 문자로 설명한 내용을 참고하시기 바랍니다.
2. 서체 스케일 적용하기 (Applying the type scale)
서체 스케일(Type scale)은 제목, 본문, 버튼 등과 같이 다양한 서체 스케일 유형(Scale category)에 사용되는 서체의 대소문자, 크기, 자간 등을 어떻게 적용하는지를 설명합니다.
아래 그림에서 왼쪽 그림은 각각의 서체 스케일 유형(Scale category)을 나타내고 있고, 오른쪽 그림은 각각의 서체에 대한 서체 크기와 같은 세부 스타일을 설명하고 있습니다.
즉, 위의 왼쪽 그림에서 Headlines 6에 사용된 서체는 오른쪽 그림에서 서체 종류(Typeface) Roboto, 서체 굵기(Weight) Medium, 서체 크기(Size) 20으로 적용되었다는 것으로 이해하면 됩니다.
2.1. 제목 (Headlines)
다음 내용은 서체 스케일 유형(Scale category) 중 제목(Headline)에 사용되는 서체에 대한 설명입니다. 제목(Headlines)은 1단계에서 6단계로 분류됩니다. Headline 1, Headline 2 이런식으로 제목을 적용하는 서체가 6가지로 구분된다는 의미입니다. 제목은 화면 상에서 가장 큰 문자(Text)이고, 중요하지만 글자수가 많지 않은 문자, 숫자를 표현합니다.
제목을 표현는 서체는 손글씨(Handwriting)나, 대본 원고(Script)와 같은 화려하게 표현된 서체(Expressive font) 종류(Typeface)를 선택할 수 있습니다. 이런 독특한 서체는 사람들의 이목을 집중시키는데 효과적입니다. 이와 관련된 다양한 서체 종류를 확인하기 위해서는 다음 포스팅을 참고하기 바랍니다.
위 그림은 Headline 2에 사용된 화려하게 표현된 서체(Expressive font)를 나타냅니다.
위 그림은 Headline 2에 사용된 대본 원고(Script style) 서체를 나타냅니다.
Serif나 Sans serif 서체는 Headline 6(H6)와 같이 특히 서체 크기가 작은 제목에 적용하기에 적합합니다.
위 그림은 Headline 6으로 제목 중 가장 서체 크기가 작은 곳에 sans serif 서체가 적용된 것을 나타냅니다.
제목에 사용할 서체를 확인하려면 구글이 제공하는 서체 탐색 페이지를 확인하십시오.
2.2. 부제목 (Subtitle)
다음 내용은 서체 스케일 유형(Scale category) 중 부제목(Subtitle)에 대한 설명입니다. 부제목(Subtitle)은 제목(Headline)보다 서체 크기가 작습니다. 부제목 서체는 주로 글자수가 많지 않은 경우에 사용되고, 중간정도의 강조체(medium-emphasis text)로 사용됩니다. 부제목은 Serif나 Sans serif 서체와 잘 어울립니다.
위 그림은 Subtitle 1 유형에 sans serif 서체가 적용된 것을 나타냅니다.
부제목에서의 서체 사용 시, 제목(Headline)에서처럼 손글씨나, 대본 글씨와 같은 화려하게 표현된 글씨체(Expressive fonts)는 사용하지 않습니다. 부제목은 상대적으로 서체 크기가 작아 가독성이 떨어질 수 있기 때문입니다.
부제목에 사용할 서체를 확인하려면 구글이 제공하는 서체 탐색 페이지를 확인하십시오.
2.3. 본문 (Body)
다음 내용은 서체 스케일 유형(Scale category) 중 본문(Body)에 대한 설명입니다. 본문 문자는 Body 1과 Body 2의 두 가지 유형이 존재합니다. 본문(Body)는 글자수가 많은 장문이면서 크기가 작은 경우에 적합합니다. 본문은 Serif나 sans serif 서체가 권장됩니다.
위 그림은 Body 1에 적용된 serif 서체를 나타냅니다.
위 그림은 Body 2에 적용된 serif 서체를 나타냅니다.
위 그림은 본문(Body)에서 손글씨(Handwritten)나 대본 글씨(Script style)처럼 화려하게 표현된 서체를 잘못 사용한 사례를 나타냅니다. 다시 한번 강조하지만 서체 크기가 작을수록 손글씨나 대본 글씨 같은 화려하게 표현된 서체(Expressive font) 사용은 부적절합니다.
본문에 사용할 서체를 확인하려면 구글이 제공하는 서체 탐색 페이지를 확인하십시오.
2.4. 캡션과 소제목 (Caption and overline)
다음 내용은 서체 스케일 유형(Scale category) 중 캡션과 소제목(Caption and overline)에 대한 설명입니다. 캡션(Caption)과 소제목(Overline)은 서체 크기 중 가장 작은 유형에 해당됩니다. 캡션과 소제목은 이미지를 설명하기 위해 사용되거나 제목을 간단히 요약 설명하기 위해 별도의 줄(Line)에 구성됩니다.
위 그림은 그림을 요약 설명하기 위한 캡션에 적용된 serif 서체를 나타냅니다.
위 그림은 소제목에 적용된 serif 서체를 나타냅니다. 참고로 "US > POLITICS" 부분이 소제목(Overline)이 적용된 부분입니다.
캡션과 소제목에는 손글씨, 대본 글씨 등의 화려하게 표현된 서체(Expressive fonts)를 사용하지 않습니다. 소제목은 서체 크기가 가장 작기 때문에 꾸밈이 자제된 serif 서체를 사용해서 가독성을 높이라는 의미입니다.
위 그림은 캡션에 잘못 사용한 화려하게 표현된 서체(Expressive fonts)를 나타냅니다.
본문에 사용할 서체를 확인하려면 구글이 제공하는 서체 탐색 페이지를 확인하십시오.
2.5. 버튼 (Button)
다음 내용은 서체 스케일 유형(Scale category) 중 버튼(Button)에 대한 설명입니다. 버튼은 탭(Tabs), 대화상자(Dialogs), 카드(Cards) UI 내에서 다양하게 사용됩니다. 버튼은 문자로만 표현되기도 하며, 외곽선을 갖고 명시적으로 버튼 영역을 구분하기도 합니다.
여기서의 버튼은 사용자의 상호작용(Interaction)에 따라 페이지 이동, 다이얼로그 출력, 결과 처리 등의 다양한 동작을 포함하는 개념으로 사용하고 있습니다.
버튼에 포함된 문자는 일반적으로 sans serif 서체를 사용하며, 모두 대문자로 표현합니다.
위 그림은 버튼에 포함된 문자를 모두 대문자로 표현하고, sans serif 서체로 표현한 것을 나타냅니다.
버튼 문자는 각 어절(단어)에서 첫자를 대문자로 표현할 수도 있습니다. 아래 그림에서 Read More의 R과 M을 대문자로 표현한 것을 볼 수 있습니다. 서체는 sans serif 또는 serif 서체를 사용할 수 있습니다.
위 그림은 버튼 문자에서 대소문자를 사용한 사례를 나타냅니다. 일반적으로 버튼 서체는 대소문자를 사용하는 것 자체를 금지하지 않습니다. 단, 위의 사례에서처럼 버튼과 달리 상호작용을 하지 않는 본문(Body) 문자 들과 버튼 영역이 구분이 잘 안될 수 있기 때문에 이 경우 버튼에 사용하는 문자에서 대소문자를 동시 사용하는 것에 주의를 기울이라는 것을 예로 든 것입니다.
마찬가지로 버튼 문자는 서체 크기가 작기 때문에 손글씨(Handwritten)나 대본 글씨(Script style)처럼 화려하게 표현된 서체(Expressive fonts)를 사용하지 않습니다.
위 그림은 버튼에 화려하게 표현된 서체(Expressive fonts)가 잘못 사용된 것을 나타냅니다.
본문에 사용할 서체를 확인하려면 구글이 제공하는 서체 탐색 페이지를 확인하십시오.
3. 마무리
서체는 대부분의 제품을 구성하는 주요 요소에 활용됩니다. 일부 이미지 위주의 서비스를 제외하고는 거의 대부분의 제품에서 문자를 통해 제품을 표현하며 이에 대한 규칙을 서체 시스템(The type system)에서 정의하고 있습니다.
일관성 없는 서체 사용은 디자인 일관성에 영향을 끼칠뿐만 아니라 특정 요소의 가독성에 영향을 줄 수 있습니다. 또한 버튼에 대소문자를 동시에 사용하여 다른 본문에 사용된 문자와 구분하기 어려워 사용자에게 오류를 유발할 수 있는 등의 사용성 문제를 야기하기도 합니다.
많은 제품에서 작은 글씨로 표현하는 것이 더 미려하다고 판단하여 이를 선호나는 디자이너와 더 많은 콘텐츠를 노출하고 싶어하는 사업 담당자의 이해관계가 맞아 떨어지면서 서체 시스템이 권장하는 규칙을 무시하여 제품을 개발하는 경우가 빈번히 발생합니다.
가장 바람직한 서체 크기는 위의 1.2. 서체 스케일 예시입니다. 이를 참고하고, 서체 종류(Fonts)는 각 서체 스케일 유형(Scale category)에서 권장하는 서체 종류를 선택하기 바랍니다.
다음 내용은 서체들을 분해하여 서체 종류에 따라 서체가 어떤 기준에 따라 화면상에 위치하는 것 등을 설명하는 내용을 다룰 예정입니다. 문자를 출력하다보면 서체 종류에 따라서 컨테이너의 위치 내에서 문자가 어디에 출력되는지를 정확히 예측하기 어려운데, 이와 관련된 설명이 되겠습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기