웹사이트에서 사용할 수 있는 5가지 웹 안전 글꼴

웹사이트 소유자라면 HTML 글꼴이 웹사이트에서 중요한 역할을 한다는 것을 알아야 합니다. 모든 웹사이트에는 한 가지 형식 또는 다른 형식의 텍스트 콘텐츠가 있습니다. 올바르게 선택한 경우 좋은 글꼴은 페이지의 미학을 향상시키고 콘텐츠 가독성에 긍정적인 영향을 미칠 수 있습니다. 모든 비즈니스를 시작하는 데 가장 중요한 측면. 잘못된 글꼴은 제품군의 성능에 부정적인 영향을 미치며 웹 안전 글꼴을 사용하는지 여부에 따라 달라집니다.

웹 안전 글꼴이란 무엇입니까?

글꼴은 장치에 설치된 경우에만 모든 브라우저나 장치(모바일, 태블릿 등)에서 읽을 수 있고 동일하게 보입니다. 웹 안전 글꼴은 일반적으로 컴퓨터, 모바일, 게임 콘솔, 태블릿 및 스마트 TV와 같은 모든 장치에 미리 설치된 글꼴입니다.

추천: 모든 훌륭한 디자이너에게 필요한 20가지 멋진 로고 디자인 글꼴.

웹 안전 글꼴이 중요한 이유는 무엇입니까?

완벽한 세상에서는 웹 사이트에 원하는 글꼴을 선택할 수 있습니다. 그러나 운영 체제에 따라 장치에는 사전 설치된 글꼴 선택 항목이 함께 제공됩니다. 문제는 일반적으로 사용하는 시스템에 따라 디자인이 다르다는 사실에 있습니다. Windows에서 작동하는 장치에는 하나의 그룹이 있을 수 있고 MacOS에는 또 다른 그룹이 있을 수 있으며 Google의 Android에는 또 다른 버전이 있습니다.

웹 사이트를 불러올 때 뷰포트에 표시되는 글꼴이 반드시 디자이너가 의도한 글꼴이 아닐 수도 있습니다. 의미: 디자이너가 상대적으로 모호한 글꼴을 사용한다고 가정해 보겠습니다. 해당 글꼴을 설치하지 않은 경우 웹 사이트는 시스템 정의 일반 글꼴로 되돌아가고 사용자는 글꼴을 인식하지 못할 수도 있습니다.

웹 안전 글꼴은 모든 시스템에 존재하는 글꼴 모음이며 디자이너로서 장치에 필요한 글꼴이 없는 경우 대체할 글꼴을 지정할 수 있는 기능을 제공합니다. 이를 통해 다양한 장치에서 웹 사이트를 동일하게 보이게 할 수 있습니다.

5가지 글꼴 패밀리는 무엇입니까?

타이포그래피에서 모든 글꼴은 디자인 유사성에 따라 다섯 가지 글꼴 패밀리 중 하나로 분류됩니다. 다음과 같습니다.

1. 필기체(예: Zapf-Chancery)

Cursive 글꼴 계열은 일반적으로 흐르는 방식으로 결합된 문자로 사람의 손글씨를 모방합니다. 그것은 종종 서예와 빠른 글쓰기를 가진 사람들과 관련이 있습니다.

2. 판타지(예: 스타워즈)

Fantasy 글꼴 패밀리의 글꼴은 일반적으로 각 문자에 장식 요소가 있지만 여전히 문자를 나타냅니다. 많은 허구의 책과 영화의 제목은 콘텐츠의 뉘앙스를 강화하기 위해 이 계열의 글꼴을 사용합니다.

3. 세리프(예: Times New Roman)

Serif 글꼴 패밀리의 가장 눈에 띄는 특징은 문자나 기호의 큰 획 끝에 있는 작은 선입니다. 그것은 우아함과 형식의 감각을 만듭니다. 여러 웹사이트에서 본문 텍스트로 광범위하게 사용됩니다.

4. 산세리프(예: Helvetica)

Serif 계열의 글꼴과 달리 Sans-serif 계열의 글꼴에는 모든 문자에 작은 선이 붙어 있지 않습니다. 이 패밀리에 속하는 대부분의 글꼴은 획 너비가 비슷하여 미니멀하고 현대적입니다.

5. 모노스페이스(예: Courier)

Monospace 글꼴 패밀리에서 각 문자와 기호는 가로로 정확히 같은 공간을 차지합니다. 따라서 일관되고 구별하기 쉽기 때문에 타자기와 함께 자주 사용되며 최근에는 컴퓨터 터미널과 함께 사용됩니다.

당신은 좋아할지도 모른다: 당신이 시도해야 할 11가지 멋진 Photoshop 글꼴(무료!).

인기 있는 웹 글꼴:

이제 글꼴에 대한 통찰력을 얻었으므로 웹 사이트에 추가할 수 있는 5가지 인기 있는 웹 안전 글꼴은 다음과 같습니다.

1. 굴림

온라인 및 인쇄 미디어에서 가장 널리 사용되는 산세리프 글꼴 중 하나입니다. 사실상의 표준입니다. OpenType 버전 3.0에서는 다음과 같이 설명합니다.

“현대적인 산세리프 디자인인 Arial은 이전 디자인보다 더 많은 인본주의적 특성을 포함하고 있으므로 20세기의 지난 수십 년의 분위기와 더 잘 어울립니다. 곡선의 전체적인 처리는 대부분의 인더스트리얼 스타일의 산세리프 서체보다 더 부드럽고 풍부합니다. 터미널 스트로크는 대각선으로 절단되어 얼굴이 덜 기계적으로 보이도록 도와줍니다. Arial은 보고서, 프리젠테이션, 잡지 등의 텍스트 설정과 신문, 광고 및 판촉용으로 똑같이 성공적으로 사용할 수 있는 매우 다재다능한 서체 제품군입니다.”

Google 문서의 기본 글꼴이기도 합니다.

2. 타임즈 뉴로만

Times New Roman은 Serif 글꼴 패밀리의 이전 Times 글꼴 변형입니다. 1931년 영국 신문 'The Times'의 의뢰로 인쇄 장비 회사인 Monotype의 예술 고문 Stanley Morison이 디자인했으며 Time 광고 부서의 레터링 부서에서 Victor Lardent와 협력했습니다. 역대 가장 인기 있는 글꼴 중 하나로 부상했으며 대부분의 기기에 사전 설치되어 있습니다.

The Roman in Times New Roman의 이름은 디자인할 Times New Roman 글꼴 패밀리의 첫 번째 부분인 로마 스타일에 대한 참조입니다. 그것은 15세기 말과 16세기 초 이탈리아 인쇄에 기원을 두고 있으며, 그 디자인은 로마나 로마인들과 관련이 없습니다.

3. 헬베티카

Helvetica 또는 Neue Haas Grotesk는 Sans-serif 글꼴 제품군에서 널리 사용되는 글꼴입니다. 1957년 스위스 글꼴 디자이너 Max Miedinger가 Eduard Hoffmann의 조언을 받아 개발했습니다. 네오 그로테스크한 ​​디자인으로 높은 x높이, 가로선과 세로선의 획의 끝맺음, 유난히도 촘촘한 글자 간격 등이 결합되어 견고하고 조밀한 느낌을 준다. 원래는 선명도가 뛰어나고 형태에 고유한 의미가 없으며 다양한 간판에 사용할 수 있는 중립 글꼴로 사용하도록 설계되었으며 이름은 Neue Haas Grotesk(New Haas Grotesque)입니다. Linotype에서 빠르게 라이선스를 취득하고 1960년에 Helvetica로 이름을 변경했습니다. , 라틴어는 스위스어입니다. 중립성으로 디자이너들에게 많은 사랑을 받고 있으며 지프, 가와사키, 모토로라, BMW 등 유명 브랜드에서도 애용하고 있습니다.

4. 택배

Courier 글꼴은 Serif 글꼴 패밀리에 속하는 글꼴입니다. 원래 IBM의 타자기를 위해 Howard "Bud" Kettler가 디자인한 이 글꼴은 컴퓨터 글꼴로 사용하도록 조정되었으며 거의 ​​모든 컴퓨터에 글꼴이 설치되어 있습니다. Monospace 조판으로 인해 1990년대에 전자 및 컴퓨터 산업에서 다시 사용되었습니다.

업계 표준에 따르면 모든 시나리오는 12포인트 Courier로 작성되었습니다. 미국 국무부는 2004년 1월까지 모든 문서의 표준 글꼴로 이 글꼴을 사용했습니다. 디지털 산업에서 사용이 증가함에 따라 Courier는 더 큰 문장 부호, 유사한 문자 간의 더 강력한 구분(예: 숫자 0 / 대문자 O 및 숫자 1 / 소문자 L) 등을 사용하여 화면 가독성을 높일 수 있습니다.

5. 칼리브리

Calibri 글꼴은 2002-2004년 Lucas de Groot가 디자인한 Sans-serif 글꼴 패밀리의 구성원입니다. 2007년에 Microsoft Office 2007 및 Windows Vista와 함께 번들로 공개되었습니다. Office 2007부터 MS Word의 기본 글꼴로 Times New Roman을, MS Powerpoint, MS Excel, Microsoft Outlook 및 WordPad의 기본 글꼴로 Arial을 대체했습니다. Microsoft의 ClearType 텍스트 렌더링 시스템과 함께 작동하여 액정 디스플레이(LCD)에서 텍스트를 더 선명하게 읽을 수 있도록 설계된 ClearType 글꼴 컬렉션의 일부입니다.

체크아웃할 글꼴 도구

웹 사이트에서 사용하기 전에 다양한 글꼴을 테스트하는 데 사용할 수 있는 온라인 도구가 많이 있습니다. 사용 가능한 글꼴 유형을 탐색하고 싶거나 사용할 글꼴을 선택하는 데 어려움이 있는 경우 이러한 도구가 큰 도움이 됩니다.

글꼴 쌍

Font Pair는 타이포그래피와 관련된 리소스가 많은 틈새 웹사이트입니다. 글꼴에 대한 다양한 eBook, 가이드, 리뷰, 비디오 및 플러그인 권장 사항이 있습니다. 그들은 Google에서 사용할 수 있는 가장 인기 있는 글꼴 전용 섹션과 어떤 글꼴이 가장 잘 어울리는지 심층적으로 비교합니다.

워드마크.잇

Wordmark.it는 특정 글꼴 또는 여러 글꼴을 함께 사용하면 텍스트가 어떻게 보이는지 빠르게 미리 볼 수 있습니다. 막대에 텍스트를 입력하면 다양한 글꼴로 어떻게 보이는지 보여줍니다.

왓더폰트

WhatTheFont는 Reverse Image Search가 무엇인지 이미지에 문자로 보내는 것입니다. 본 글꼴을 식별하는 데 도움이 됩니다. 글꼴의 이미지를 업로드하면 데이터베이스와 일치하고 가장 일치하는 것으로 생각되는 것을 제공합니다. 또한 활성 포럼으로 이동하여 글꼴 식별 또는 일반적인 타이포그래피 쿼리에 대한 도움을 받을 수 있습니다.

당신은 또한 좋아할 수 있습니다: 귀하의 WordPress 사이트 테마에 사용자 정의 글꼴을 추가하는 3 가지 방법.

내 웹사이트에 웹 안전 글꼴을 추가하는 방법은 무엇입니까?

웹 안전 글꼴을 선택했으므로 이제 적용할 차례입니다. 프로그래밍 경험이 거의 없는 경우 다음 단계에 따라 웹 페이지에 웹 안전 글꼴을 추가하십시오.

1. header.php 파일을 엽니다.

2. 폰트 소스/표준 코드를 복사합니다. 일반적으로 Google을 통해 찾을 수 있습니다.

3. 헤더 파일 상단에 코드를 붙여넣습니다.

4. style.css를 로드하고 글꼴 코드를 입력하여 선택한 글꼴 텍스트를 변경합니다.

마지막으로 스타일 시트는 다음과 같아야 합니다.

 이 기사는 Abhyank Srinet이 작성했습니다. Abhyank는 ESCP 유럽에서 경영학 석사 학위를 받았으며 계측 및 제어를 전문으로 하는 공학 학위를 받았습니다. 디지털 환경에 대한 그의 관심은 초기 경력 석사 학위에 대한 양질의 정보를 전파하는 데 중점을 둔 애플리케이션 컨설팅(MiM-Essay)을 위한 온라인 스타트업을 만들도록 동기를 부여했습니다.