반응형 웹 타이포그래피

"절대 표지로 책을 판단하지 마십시오"라고 되어 있지만 연구에 따르면 온라인 사용자가 웹사이트에 머물지 말아야 할지 결정하는 데 걸리는 시간은 50밀리초입니다.

웹 신뢰성을 연구한 Stanford의 또 다른 연구에 따르면 사용자의 75%가 웹사이트 디자인을 기반으로 회사의 신뢰성을 판단한다고 인정했습니다. 훌륭한 웹 타이포그래피는 더 많은 비즈니스 문의 및 후속 전환을 생성하는 관문입니다.

정보가 매력적이고 효과적으로 표시되어야 함은 물론입니다. 그러나 문제는 모바일 장치가 매우 다양하므로 타이포그래피가 이러한 모든 플랫폼을 준수해야 한다는 것입니다.

그렇다면 웹 타이포그래피를 최대한 활용하는 방법은 무엇일까요?

1. 글꼴의 신중한 사용은 타이포그래피가 반응적이면서도 효과적임을 보장합니다.

글꼴 기능이 도입된 이후로 웹 디자이너들은 디자인에 다양한 글꼴을 사용할 수 있는 자유를 환영했습니다. 이는 웹에 적합한 색상만 사용되던 이전 시대와 극명한 대조를 이룹니다.

많은 글꼴을 마음대로 사용할 수 있으므로 디자이너는 글꼴을 사용하는 올바른 방법을 알아야 합니다. 반응형 웹 디자인은 대부분의 웹사이트에서 사용되고 있으며, 타이포그래피의 유희의 한계를 정하고 있으며, 이는 현재 다양한 종류의 디바이스와 각각의 화면 크기에 따라 디자인되고 있습니다. 따라서 웹 디자이너는 반응형 웹 디자인 시스템에서 여러 글꼴을 결합할 때 주의해야 합니다. 웹사이트에 너무 많은 서체를 사용하지 마십시오. 오히려 세 세트로 유지하십시오. 보다 깨끗하고 효과적인 웹 디자인을 보장합니다. 동시에 매우 인기 있는 글꼴도 사용하지 마십시오. 귀하의 페이지가 다른 페이지보다 우위에 있지 않을 수 있습니다.

사례 연구 : vox.com을 확인하십시오. 이 사이트는 두 개의 Sans-Serif 글꼴을 결합하여 손쉽게 수행합니다. 그들은 내부적으로 사이트를 통해 산재된 Harriet을 제외하고 모든 헤드라인에 Balto를 사용하고 본문 텍스트에 Alright Sans를 사용합니다. 결과 외관은 깨끗하고 우아합니다.

반대로 엔젤파이어 사이트를 확인해보세요. 이 사이트에는 여러 글꼴이 포함되어 있으며 초라하고 비전문적으로 보입니다.

2. 헤드라인 강조

웹 타이포그래피 연구에 따르면 웹사이트의 타이포그래피는 헤드라인을 돋보이게 합니다. 이것은 웹 방문자가 귀하의 사이트에서 더 많은 시간을 보내는 것으로 해석됩니다. 이를 달성하려면 글리프와 합자를 사용하여 헤드라인에 독특한 모양을 부여하십시오.

합자는 서로 연결된 것처럼 보이는 문자입니다. 예를 들어, 물고기라는 단어의 첫 부분을 구성하는 문자 f와 i는 글꼴에서 'fi'로 결합됩니다. 브라우저의 글꼴 기능 설정을 통해 또는 "텍스트 렌더링 - 가독성 최적화" 기능을 사용하여 합자를 쉽게 추가할 수 있습니다. Firefox에는 이미 기본 합자가 있습니다. 특정 글꼴 유형에서 합자의 특정 조합을 사용하면 웹 디자인에 아름다움과 스타일을 더할 수 있습니다. 페이지 레이아웃 소프트웨어의 텍스트, 유형 또는 개방형 유형 메뉴에서 합자를 켜거나 끌 수 있습니다. 소프트웨어는 연결된 문자가 함께 오는 합자의 자동 삽입을 보장합니다.

사례 연구 : 이 웹사이트를 확인하면 합자가 얼마나 우아한지 쉽게 알 수 있습니다. 아름답게 제작된 이러한 헤드라인을 웹사이트에 추가하면 확실히 외관이 개선되고 시청자에게 더 나은 사용자 경험을 제공할 수 있습니다.

3. 다양한 크기와 색상의 글꼴을 적절하게 사용하여 웹사이트가 청중과 대화할 수 있도록 합니다.

위의 그림에서 알 수 있듯이 데스크탑은 물론이고 모바일 화면에서도 선명하게 읽고 볼 수 있는 글꼴을 선택해야 합니다. 글꼴이 인쇄 매체에 표시되는 스타일은 디지털 매체에 표시되는 방법과 다릅니다. 글꼴 패밀리, 스타일 및 효과를 이해해야 합니다. 웹 글꼴에 대한 사양은 W3C의 CSS 사양에 나와 있으며 Serif, Sans-Serif, Monospace, Fantasy 및 Cursive는 글꼴 모음입니다.

둘째, 웹사이트의 테마나 카테고리에 따라 서체를 선택합니다. 이렇게 하면 웹 페이지가 대상 청중과 대화하고 원하는 결과를 얻을 수 있습니다. Serif 글꼴은 또한 텍스트의 가독성을 높이는 데 사용할 수 있으며, 이는 음성의 영향을 더욱 선명하게 하는 데 도움이 됩니다. 여기서 문제는 Serif의 이 속성이 고해상도 화면에서는 잘 작동하지만 저해상도 화면에서는 바람직하지 않은 결과를 초래할 수 있다는 것입니다. 짧은 헤드라인에는 예술적인 글꼴을 사용하고 본문 텍스트에는 더 부드러운 글꼴을 사용하는 것이 좋습니다.

4. 반응형 타이포그래피에는 측정값을 조절하는 것이 중요합니다.

웹 페이지의 줄 길이는 변조되어야 합니다. 글꼴의 측정값이나 줄 길이를 조절하면 타이포그래피의 반응성에 기여합니다. 반응형 디자인에는 다양한 화면 크기의 요구 사항에 따라 글꼴의 반응형 변경이 포함됩니다. 따라서 이것은 필수입니다.

"측정" 또는 "줄 길이"라는 용어는 가독성 또는 사람들이 웹에서 텍스트를 읽는 방식과 관련이 있습니다. 글꼴의 줄 길이를 늘리거나 줄이는 것은 반응형 웹 타이포그래피를 생성하는 한 가지 방법입니다. 이상적인 줄 길이 또는 치수는 공백과 구두점을 포함하여 인쇄 또는 웹 페이지당 줄당 45-75자입니다. 한 줄에 45-85자까지 확장할 수 있습니다. 이것은 사람들이 텍스트를 읽는 방식과 그에 상응하는 눈의 움직임에 대한 연구에서 파생되었습니다. 이를 바탕으로 일부 전문가들은 눈의 읽는 동작이 좌우 수평 방향을 따르기 때문에 웹 콘텐츠에 적합한 왼쪽 정렬 텍스트를 추천한다.

사례 연구 : 웹 사이트 제품군은 한 줄에 약 75자로 문자를 제한합니다. 보시다시피 우아하게 보이며 읽는 동안 시청자의 관심을 유지할 수 있습니다.

반면에 gatesnfences 웹사이트는 한 줄에 120자 이상입니다. 결과적으로 보기에 불쾌하고 내용을 읽지 못하게 합니다.

5. 다양한 글꼴 크기를 사용하면 화면에서 다양한 거리에서 가독성이 향상됩니다. 이것은 반응형 타이포그래피의 요구 사항입니다.

글꼴을 보고 읽을 수 있는 글꼴 크기를 선택합니다. 이것은 디자이너에게 다소 어려울 수 있는 "이상적인 측정"에 대한 타협과 함께 올 수 있습니다. 까다로운 부분은 "이상적인 측정"이 글꼴 크기 감소 또는 글꼴 크기 증가와 함께 제공되어 텍스트를 읽을 수 없게 만들 수 있다는 것입니다. 결론은 콘텐츠는 시청자가 편안하게 읽을 수 있어야 한다는 것입니다. 따라서 반응형 타이포그래피의 핵심 요소 중 하나는 서로 다른 읽기 거리에 대해 서로 다른 글꼴 크기가 사용되도록 하는 것입니다. 서로 다른 읽기 거리에서 감지되는 글꼴 크기를 계산하는 방법이 있으며 이를 수행하기 위해 크기 계산기를 사용할 수 있습니다.

사례 연구 : 웹사이트 moonbase를 확인하세요. 이것은 고객이 웹사이트를 디자인하고 비즈니스를 브랜드화하는 데 도움이 되는 웹사이트입니다. 이미지 중앙에 있는 텍스트는 눈에 띄고 웹사이트가 무엇인지에 대한 의미를 전달합니다. 우리는 그것을 한 눈에 볼 수 있습니다. 이것은 사용자의 주의를 끌고 표준 글꼴 크기로 작성된 나머지 웹사이트로 이동하게 합니다.

6. 반응형 타이포그래피는 웹 브라우저가 다양한 글꼴을 지원할 수 있어야 합니다.

특정 사용자 정의 글꼴로 웹 사이트를 디자인할 때 브라우저가 해당 글꼴의 로드 및 표시를 지원할 수 있는지 확인해야 합니다. 코드에 오류가 없고 명확하더라도 브라우저 비호환성 문제로 인해 노력이 방해될 수 있습니다. 또한 글꼴 파일이 저장된 형식이 웹 페이지에서 사용하려는 글꼴과 호환되는지 확인해야 합니다. 비호환성 문제는 글꼴 로드에 영향을 미치므로 웹 페이지 표시에 영향을 줄 수 있습니다.

사례 연구 : 위에서 우리는 표준 글꼴을 사용하거나 "글꼴 스택"을 사용해야 한다고 추론할 수 있습니다. 첫 번째 단계는 글꼴이 '웹에 안전한지' 여부를 확인하기 위한 "글꼴 테스트"입니다. 기본적으로 브라우저는 각 글꼴 시퀀스를 첫 번째 글꼴 선택, 두 번째 글꼴 선택, 세 번째 글꼴 선택 등으로 봅니다. 브라우저가 시퀀스에서 글꼴을 찾을 수 없는 경우 사용된 글꼴 분류에 따라 기본 Serif, Sans Serif 또는 Monospace로 되돌아갑니다.

예를 들어, 운영 체제의 많은 부분에 Century Gothic 글꼴이 있습니다. 따라서 Century Gothic을 첫 번째 글꼴로 선택한 다음 Arial, Helvetica 및 마지막으로 Sans-Serif 일반 분류로 이어지는 글꼴 스택을 만들 수 있습니다. CSS에서 제목에 여러 단어가 포함된 글꼴은 따옴표로 묶어야 합니다. 예를 들어 font-family: "Century Gothic", Arial, Helvetica, Sans-Serif.

이것은 브라우저가 Century Gothic 글꼴을 먼저 찾도록 지시합니다. 시스템의 많은 부분이 이 글꼴을 사용하기 때문에 대부분의 시청자는 Century Gothic을 사용하여 표시된 사이트를 볼 수 있습니다. Century Gothic이 없는 시청자의 경우 브라우저는 먼저 Arial, 다음으로 Helvetica, 마지막으로 Sans-Serif 대안으로 대체됩니다.

7. 글꼴의 물리적 특성과 관련된 요소는 디자인을 위한 글꼴 사용의 유연성에 영향을 미칠 수 있습니다.

측정, 줄 간격, 글꼴 크기와 관련하여 상당한 유연성이 있고 레이아웃에 맞게 이러한 변형을 만들 수 있지만 반응형 타이포그래피는 글리프 자체에 영향을 미치는 요소에 의해 제한될 수 있습니다. 이들은 무게, 너비, 획 대비, 하강 및 광학 크기입니다. 이러한 매개변수의 변경은 사이트에 영향을 줄 수 있습니다. 디자이너가 설정한 물리적 매개변수 내에서 글꼴 패밀리 간의 수학적 보간을 통해 다양한 종류의 글꼴 스타일을 설계하여 이러한 제한을 극복하는 데 도움이 되는 도구가 있습니다.

이러한 도구의 두 가지 예는 Superpolator 또는 FlowType.js입니다. 화면 크기가 줄어들수록 축척 간의 상대적인 비례 차이가 커집니다. 따라서 화면의 크기와 상대적인 크기의 균형이 이루어져야 합니다. 이를 염두에 두고 몇 가지 척도가 고안되었으며 더 영향력 있는 웹사이트를 디자인하는 데 사용할 수 있습니다. 비율은 헤드라인 글꼴이 본문 텍스트보다 크거나 작은 횟수를 나타냅니다. 이것이 반응형 타이포그래피가 필요한 이유입니다. 디자이너는 페이지의 모든 타이포그래피 요소에 대한 모든 기본 스타일을 재설정하는 문제를 겪을 수 없기 때문에 중단점에서 축소되도록 자체 조정되는 타이포그래피가 필요합니다.

사례 연구 : 흐름 유형을 확인하십시오. 슬라이더를 드래그하면 Superpolator 및 FlowType.js와 같은 도구 덕분에 반응형 타이포그래피가 수행하는 작업을 확인할 수 있습니다.

반응형 타이포그래피는 연습으로 완성됩니다. 미디어 쿼리를 사용하는 방법과 테스트할 다양한 화면 크기의 장치 세트에 대한 지식이 있으면 이를 마스터할 수 있습니다. 최고의 타이포그래피, 더 많은 조회수, 더 많은 리드를 전환하기 위해 수행해야 할 작업을 알고 있으므로 위의 원칙을 구현하여 실제 현실로 구체화할 수 있습니다.