Ch04_4_5_모바일디자인구성요소_typographic

5. 타이포그래피 시스템

폰트는 이미지와 유사한 역할을 한다.

• 그림처럼 동일한 문장이라도 어떤 폰트를 사용하느냐에 따라 그 느낌이 확연히 달라지는데
• 이처럼 사용자는 알게 모르게 폰트에 대한 느낌을 갖게 되므로  폰트가 전달하는 감정은 아주 중요하다.

그래서 기업에서는 자사 브랜드 폰트를 만들어 사용하기도 합니다.

• 인쇄물에 사용할 때는 아무 문제가 없지만, 디지털 환경에서는 조금 다르다.
• 자체 브랜드 폰트 또는 콘셉트에 맞는 유료 혹은 무료 폰트를 사용하기로 했더라도 디지털 환경에서는 부득이하게 시스템 폰트를 사용해야 하는 경우가 많다.
• 원하는 폰트를 강제로 임베드Embed하는 방식으로 사용할 수도 있지만, 그렇게 하면 시스템이 무거워지고 유료 폰트의 경우 별도의 비용이 발생하므로 운영체제에서 제공하는 폰트를 그대로 사용하는 것이 좋다.

---

UI디자인을 하실 때 서체의 기본 사이즈만 알아도 디자인 가이드를 준수한 화면으로 보실 수 있습니다.

 

폰트는 크게 세리프Serif 폰트와 산세리프Sans-serif 폰트로 나눌 수 있다.

• 문자의 시작이나 끝부분 에 작은 모양의 삐침이나 장식이 있는 서체를 세리프 폰트라고 한다.
• 웹이나 모바일에서는 가장자리 부분의 번짐 현상 때문에 세리프 폰트를 사용하지 않는 것이 좋지만, 웹 사이트의 콘셉트에 따 라 사용해야 하는 경우도 있다. 그런 경우에는 폰트 자체로 사용하기보다는 주로 이미지 처리를 한다.

세리프의 없음을 표현하는 산세리프는 

• 웹이나 모바일에서는 가독성을 위해 산세리프 폰트를 사용할 것을 권장한다.

• 같은 폰트라도 획의 두께에 따라 무게감이 달라질 수 있다. [그림 4-52]의 이미지는 두께에 변화를 주어 무게감을 다르게 한 문자 스타일의 예이다

 

---

iOS는 SF서체- 한글 (산돌고딕지원),

Android는 Roboto를 시스템 폰트로 사용하고 있습니다. (삼성: 삼성고딕)

디자인 할 때도 해당 서체를 사용하여 개발자에게 가이드를 전달합니다.

• 보통, 같은 사이즈라고 했을 때 iOS보다 안드로이드 기본 시스템 서체 자체의 크기가 크기 때문에, 안드로이드에서는 한 사이즈 작게 가이드가 제시되고 있습니다.
• iOS의 시스템 폰트는 San Francisco Pro이며, SF UI Display와 SF Compact Display로 구 분해사용된다. SF UI Display는 iOS, macOS, tvOS의 시스템 글꼴로 사용되며, SF Compact Display는 watchOS의 시스템 폰트이다.
• iOS의 시스템 폰트는 다른 폰트로 대체되지 않으며, 윈도우에서는 사용할 수 없다. 대신 윈도우 호환 버전인 ttf 파일로 사용할 수 있다.

---

폰트

글자의 모음으로, 각 글자의 고유한 모양에는 여러 문자에 걸쳐 공유된 패턴이 있다.
모바일 화면 디자인을 체계적으로 하려면 폰트에 대해서도 잘 알고 있어야 한다.

폰트는 디지털 기기 에서도 인쇄 디자인의 원칙을 준수하는 것이 좋다.  앞으로 설명할 문자 영역은 나중에 개발자에게 전달할 결과물에서 반드시 준수해야 한다.

폰트사이즈

웹 브라우저는 루트 요소 크기를 기준으로 REM(루트 em 크기)을 계산합니다.
최신 웹 브라우저의 기본값은 16px이므로 변환은 SP_SIZE/16 = rem입니다.

---

가장 기본적으로 알고 있어야 하는 원리는 기준선이다.

가장 기본적으로 알고 있어야 하는 원리는 기준선이다. 기준선의 위치는 [그림 4-57]과 같다. 머티리얼 디자인에서 기준선은 텍스트와 요소 사이의 수직 거리를 측정할 때 중요한 사양이므로 꼭 기억해야 한다.

그리드와 해상도가 짝수라는 것과 연결되어, 안드로이드의 서체 사이즈 또한 짝수로 가이드 되어 있습니다.

• iOS의 서체 중 본문에서 사용되는 서체의 크기는 17pt입니다.
• Android의 서체 중 본문에서 사용되는 서체의 크기는 16sp입니다.

SP는 스케일 가능한 폰트의 단위이며, 사용자가 폰트의 사이즈를 키워서 사용하거나 서체를 변경해서 사용할 수 있도록 해 주는 단위입니다.

텍스트가 잘 읽히도록 하려면 가독성을 고려해 배치해야 한다

---

Type scale generator

• Google 글꼴을 기반으로 하는 Type scale generator는 폰트 타입 및 해당 코드를 만드는 도구입니다.
• 선택한 글꼴은 가독성을 위해 머터리얼 타이포그래피 안내에 따라 크기가 자동으로 조정되고 최적화됩니다.

• 모든 헤드라인, 자막, 본문 및 캡션에 Roboto 서체를 사용하여 통합된 타이포그래피 환경을 만듭니다.
• 계층은 글꼴 무게(라이트, 중간, 레귤러), 크기, 문자 간격 및 대소문자의 차이를 통해 전달됩니다.
• 웹 브라우저는 루트 요소 크기를 기준으로 REM(루트 em 크기)을 계산합니다. 최신 웹 브라우저의 기본값은 16px이므로 변환은 SP_SIZE/16 = rem입니다.

https://m2.material.io/design/typography/the-type-system.html#type-scale

https://fonts.google.com/

Material Design

Google Fonts

---

Headlines

• 헤드라인의 범위는 1에서 6까지입니다.
• 헤드라인은 화면에서 가장 큰 텍스트로, 짧고 중요한 텍스트 또는 숫자를 위해 지정
• display, handwritten, or script style. 변형을 통해 글꼴을 선택

Subtitle

• 헤드라인보다 작다.
• 길이가 짧은 중간 강조 텍스트
• 세리프나 산세리프 서체가 적합

• Body

• 본문 텍스트는 1-2 범위 작은 텍스트 크기에 적합
• 세리프나 산세리프 서체가 적합

 

---

추가적으로 Icon font - 폰트처럼 아이콘을 사용할 수 있게 ...

참고사이트 : 폰트 어썸 - 대표적인 아이콘 폰트 제공사이트

https://fontawesome.com/

Font Awesome

---

구글 머터리얼 폰트 사용하기

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

폰트 CSS 삽입하기

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장을 하여 CSS파일을 새로 생성하거나 기존에 있는 CSS파일을 열어서 @font-face를 아래와 같이 등록합니다.

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(path/to/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(path/to/MaterialIcons-Regular.woff2) format('woff2'),
    url(path/to/MaterialIcons-Regular.woff) format('woff'),
    url(path/to/MaterialIcons-Regular.ttf) format('truetype');
}

해당 아이콘을 적용할 기본 material-icons CLASS를 생성해야 합니다.

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;  /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;

/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

구글 머티리얼 아이콘의 class 사용

<i class="material-icons">face</i>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
	<title>icon font</title>
</head>
<body>

<span class="material-symbols-outlined">
home
</span>
<span class="material-symbols-outlined">
assistant_navigation
</span>
</body>
</html>