타이포그래피는 귀하가 수행하는 모든 웹 디자인 작업의 기본 요소입니다. 우리가 고객을 위해 웹사이트를 디자인하도록 고용된 이유는 고객이 사용자에게 유용한 콘텐츠를 제공하는 경험을 제공할 수 있기 때문입니다. 견고한 타이포그래피 기반이 있으면 사용자가 효과적으로 소비할 수 있는 방식으로 콘텐츠를 표시하는 데 도움이 됩니다. 웹 사이트에는 다른 많은 디자인 요소가 있을 수 있지만 콘텐츠가 주요 고려 사항이며 디자이너로서 타이포그래피를 선택하고 사용하여 프로젝트를 향상시키는 것이 우리의 임무입니다.

타이포그래피 기초

글꼴 대 서체

타이포그래피에 대한 논의로 넘어가기 전에 "글꼴"과 "서체"라는 용어에 대해 알아보겠습니다. 서체는 문자, 숫자 및 웹 사이트에 단어를 넣을 수 있는 모든 문자와 같은 인쇄상의 기호 및 문자 집합을 나타냅니다. 알파벳의 디자인, 기본적으로 그 스타일을 구성하는 글자의 모양입니다. 헬베티카는 서체를 말합니다.

글꼴은 서체 내의 완전한 문자 집합으로 정의되며 종종 특정 크기와 스타일을 나타냅니다. Helvetica Bold 10 포인트는 글꼴을 참조하는 방법입니다. 글꼴은 서체 내의 모든 문자와 글리프를 포함하는 파일에 따라 다릅니다.

"글꼴 대 서체"라는 이 열띤 토론은 동료 디자이너들과 멋진 대화를 나누게 합니다. 당신이 타이핑하는 모든 사람들을 위해 우리는 실제로 서체에 대해 이야기하고 있지만 "웹 글꼴"은 대화에서 가장 많이 사용됩니다.

글꼴 분류

세계에서 사용 가능한 많은 서체를 접하게 되면 분류 방법에 대해 잘 알고 있어야 합니다. 가장 일반적인 방법은 세리프(serif), 산세리프(sans-serif), 스크립트, 디스플레이 등의 기술적 스타일에 따라 분류하는 것입니다. 서체는 비례 또는 고정 폭과 같은 다른 세부 사항으로도 분류됩니다. 출처에 따라 매우 구체적일 수 있습니다.

웹 안전 타이포그래피의 역사

웹 초기에는 웹 안전 옵션이 매우 제한적이었습니다. 사용자가 디자이너가 의도한 글꼴을 보려면 컴퓨터에서 사용할 수 있어야 했습니다. 이전 사이트에서 스타일시트를 열면 Arial, Georgia, Times New Roman, Trebuchet MS 및/또는 Verdana를 찾을 수 있습니다. 그것들은 사용자의 컴퓨터에 있을 가능성이 가장 높은 글꼴이었기 때문에 대다수의 사용자가 웹사이트를 의도한 대로 볼 수 있었기 때문에 "웹에 안전한" 글꼴로 간주되었습니다.

한동안 웹 사이트를 디자인해왔거나 오랫동안 웹 서핑을 해본 사람이라면 타이포그래피 옵션이 제한되었던 시절을 기억할 것입니다. 웹 서핑을 하면서 똑같은 5가지 서체를 반복해서 본 것은 그리 오래되지 않았습니다. 다른 웹 안전 옵션이 없으면 상황이 지루해 보이기 시작했고 이러한 서체는 웹에 가장 적합하지 않다고 주장할 수 있습니다(결국 인쇄에서 파생된 것입니다). 그러나 웹이 발전함에 따라 더 많은 유형 옵션을 사용할 수 있게 되었습니다.

웹 글꼴이란 무엇입니까?

타이포그래피는 매우 중요하기 때문에 큰 발전을 이루었다는 것을 축하할 때입니다. 우리는 사용할 수 있는 서체가 너무 많아 한 때 제한되었던 동일한 웹 안전 글꼴에 의존하지 않고 사용자에게 가장 적합한 글꼴을 선택할 수 있습니다.
웹 글꼴은 웹 안전 글꼴과 같이 사용자 시스템에 미리 설치되어 있지 않습니다. 우리는 사용자가 컴퓨터에 원하는 글꼴을 가지고 있다고 의존할 필요가 없습니다. 모든 사용자가 정의된 글꼴을 볼 수 있도록 포함된 소스에서 제공됩니다. 이러한 글꼴은 웹 페이지를 렌더링하는 동안 브라우저에서 다운로드한 다음 텍스트에 적용됩니다.

웹 글꼴을 사용하는 방법

@font-face 규칙

널리 지원되는 이 규칙을 통해 서버에서 글꼴을 다운로드하거나 호스팅하여 웹 페이지에서 사용할 수 있습니다. 스타일시트에서 @font-face 규칙을 선언함으로써 서체의 이름, 위치 및 글꼴 두께를 지정할 수 있습니다.

이 예는 Open Sans Regular를 추가하는 방법을 보여줍니다. 소스가 웹사이트 프로젝트에 포함된 글꼴 폴더임을 알 수 있습니다.

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
font-weight: normal;
font-style: normal;
}

위의 선언은 사용할 수 있도록 글꼴을 추가합니다. 실제로 어떻게 표시합니까?

.example{
font-family: "Open Sans Regular", Arial, sans-serif;

}

글꼴 이름이 "Open Sans Regular"로 설정되어 있는 것을 볼 수 있습니다. 이것은 어떤 이유로 글꼴이 로드되지 않는 경우를 대비하여 대체 글꼴과 함께 CSS 글꼴 스택에서 참조되는 글꼴 이름입니다. 대부분의 경우 글꼴이 제대로 로드되지만 만일을 대비하여 대체를 포함하는 것이 좋습니다.

대부분의 글꼴에는 다른 패밀리가 있으며 일부는 다른 글꼴보다 더 많습니다. 이를 활용하려면 @font-face 규칙으로 각 항목을 포함해야 합니다.

형식 및 웹 글꼴

여러 형식이 필요한 경우 웹 글꼴에 대해 조금 더 자세히 살펴보겠습니다. 이 글꼴은 자체 호스팅되며 "글꼴"이라는 폴더의 서버에 저장됩니다. 마지막 예제에서 몇 가지 새로운 라인이 추가되었음을 알 수 있습니다.

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
font-weight: normal;
font-style: normal;
}

.eot, .woff, .ttf, .truetype 및 SVG와 같은 다양한 형식을 포함해야 하는 이유가 있습니다. 다른 브라우저는 다른 글꼴 형식을 지원하므로 우리는 우리의 기반을 커버하고 다양한 브라우저에 필요할 수 있는 모든 것을 제공해야 합니다.

다음은 브라우저 목록과 지원하는 글꼴 파일 형식입니다.

• 인터넷 익스플로러 – .eot
• Mozilla Firefox – .otf 및 .ttf
• 사파리 및 오페라 – .otf, .ttf 및 .svg
• 크롬 – .ttf 및 .svg
• 모바일 사파리 – .svg

글꼴 호스팅

웹 글꼴을 사용할 때 스타일시트에는 글꼴 자체가 필요하므로 디자인에서 렌더링할 수 있습니다. 이러한 이유로 어딘가에 호스팅할 글꼴 파일이 필요합니다. 글꼴을 보관할 위치에는 두 가지 옵션이 있습니다. 글꼴을 호스팅하는 서비스를 사용하거나 실제 글꼴 파일로 자체 호스팅할 수 있습니다. 각각의 장점이 있는 프로젝트에 따라 다릅니다.

자체 호스팅 또는 Typekit과 같은 글꼴 서비스로 호스팅하는 접근 방식에 따라 CSS가 다르게 보일 것입니다. 이름처럼 Typekit으로 키트를 만듭니다. 여기에는 사용할 모든 글꼴이 포함됩니다. 이러한 파일을 참조하려면 HTML 문서의 헤드에 Javascript 스니펫을 추가합니다. 이를 통해 올바른 @font-face 규칙을 로드할 수 있습니다.

호스팅 서비스 제공업체

언급할 호스팅 서비스 제공업체가 너무 많지만 TypeKit, Fonts.com, H&Co(Hoefler and Company)가 몇 가지 옵션입니다. 기본적으로 서버에 글꼴이 있으며 계정 종류에 따라 자유롭게 사용할 수 있습니다.

이 접근 방식의 몇 가지 장점은 다음과 같습니다.

• 일반적으로 이러한 공급자는 타이포그래피 비즈니스에 있기 때문에 고품질 글꼴을 더 폭넓게 선택할 수 있습니다.
• 글꼴은 사용/설치가 쉽습니다.
• 디자인 과정에서 서체를 변경하거나 전체적으로 변경하기 쉽습니다.
• 타사 파일이기 때문에 사용자가 쉽게 캐시할 수 있습니다.
• HTTP 요청이 적을수록 성능이 향상됩니다.

Font Awesome을 사용해야 하는 이유

Font Awesome은 확장 가능한 벡터 아이콘이 포함된 강력한 아이콘 세트입니다. 그리고 놀랍게도 무료입니다. 많은 중요한 t가 있습니다 ...

사이트에 새 글꼴을 추가하는 것은 매우 쉽습니다. 예를 들어, Fonts.com은 프리미엄 플랜 멤버십과 함께 세 가지 다른 게시 옵션을 제공합니다. 제공된 스타일시트와 자체 호스팅 옵션에 연결하는 자바스크립트(Typekit도 포함) 및 비 자바스크립트 옵션이 있습니다. 무엇을 선택하느냐에 따라 CSS가 다르게 보일 것입니다.

사용 고려 사항

호스팅 글꼴을 사용하면 더 적을 수 있습니다. 너무 많이 사용하지 않는 것이 중요합니다. 그렇지 않으면 성능 문제가 발생할 수 있습니다. 동일한 글꼴의 여러 가중치는 추가 세트로 간주되므로 기본적으로 다른 글꼴을 로드하게 됩니다. 필요한 것만 포함하는 것이 좋습니다.

자체 호스팅

웹 글꼴을 자체 호스팅하는 것은 매우 쉽습니다. 웹 서버에 글꼴 파일을 포함하기만 하면 사용자가 사이트에 도착하면 자동으로 다운로드됩니다.

자체 호스팅의 몇 가지 이점은 다음과 같습니다.

• 글꼴 전달에 대한 자바스크립트 종속성이 없으며 CSS 참조만 있으면 됩니다.
• 빠른 글꼴 렌더링.
• 글꼴 호스팅 공급자의 가동 시간에 의존하지 않습니다.
• 무료 및 구매한 글꼴을 사용하면 구독료나 페이지 보기 제한이 없습니다.

사용 고려 사항

필요한 모든 형식이 있는지 확인하는 것이 중요합니다. 형식이 포함되지 않은 경우 다음 대체 글꼴로 이동합니다. 소스의 글꼴에 대한 올바른 경로가 있는지 확인하는 것이 중요합니다. 이전 예에서 본 것처럼 소스는 다음과 같습니다.

src: url("../fonts/OpenSans-Regular-webfont.eot");

좋은 웹 글꼴을 찾을 수 있는 곳

선택할 수 있는 웹 글꼴이 너무 많습니다. 우리는 이러한 모든 옵션을 갖게 되어 매우 운이 좋습니다. 완벽한 글꼴을 찾는 것이 그 어느 때보다 쉬워졌습니다.

다음은 웹 글꼴에 대한 몇 가지 훌륭한 소스입니다.

• 타이프킷
• Google 웹 글꼴
• 회플러앤컴퍼니
• Fonts.com
• 글꼴다람쥐

나만의 웹 글꼴 만들기

우연히 완벽한 글꼴을 찾을 수 없다면 언제든지 자신만의 글꼴을 만들 수 있습니다. Font Squirrel은 모든 글꼴을 포함을 위한 웹 파일 키트로 변환하는 웹폰트 생성기를 제공합니다. 이러한 호스트를 호스팅해야 한다는 점을 염두에 두십시오. 자세히 알아보려면 Font Squirrel 웹폰트 생성기를 살펴보세요. 자신만의 글꼴을 만들 때 해당 글꼴을 사용할 수 있는 권한이 있어야 합니다.
웹 글꼴은 다음 웹 프로젝트에 완벽한 글꼴을 추가할 수 있는 좋은 방법입니다. 다양한 서체 옵션과 수많은 훌륭한 소스를 통해 더 이상 기존의 웹 안전 옵션에 얽매이지 않아도 됩니다. 사용하기 쉽고 재미있게 실험할 수 있는 웹 글꼴은 웹사이트 프로젝트에 개성을 더할 수 있는 좋은 방법입니다.