반응형 타이포그래피 크기 조정 및 배율에 대한 2023 가이드

 반응형 타이포그래피 크기 조정 및 배율에 대한 2023 가이드

John Morrison

반응형 타이포그래피 크기 조정 및 배율에 대한 2023년 가이드

웹사이트 디자인의 진정한 반응성은 각 장치에 맞게 확장되는 프레임워크 이상이며 타이포그래피도 최적의 가독성에 맞게 조정되어야 합니다.

반응형 타이포그래피가 조정되어 웹사이트에서 텍스트 요소의 크기와 배율도 변경됩니다. 이것이 기술적인 대답이지만 텍스트 요소의 크기를 변경하는 것만으로는 항상 충분하지 않기 때문에 똑같이 중요한 더 큰 디자인 접근 방식이 있습니다.

반응형 타이포그래피 권장사항, 몇 가지 가이드라인, 어떤 크기로든 훌륭한 서체를 만드는 데 도움이 되는 몇 가지 도구에 대해 자세히 살펴보겠습니다.

디자인 리소스 살펴보기

반응형 타이포그래피 입문서

견고한 반응형 타이포그래피 계획은 모든 장치에서 콘텐츠를 읽을 수 있도록 합니다. 모든 장치에서 모든 것을 렌더링하는 데 도움이 되는 상호 작용, 크기 및 확장에 대한 일련의 규칙을 개발했는지 확인합니다.

좋은 점은 대부분의 웹사이트에서 데스크탑과 이동하는. (일반적인 웹 브라우징을 위한 전반적인 태블릿 사용량은 지난 몇 년 동안 급격하게 감소했습니다.)

와이드 스크린에서 멋지게 보이는 글꼴과 배율은 세로 방향의 핸드헬드 스크린 크기에서는 제대로 렌더링되지 않을 수 있습니다.

이제 여기 도전이 있습니다. 와이드 스크린에서 잘 보이는 글꼴과 배율이 세로 방향의 스크린에서는 제대로 렌더링되지 않을 수 있습니다.휴대용 화면 크기. 글꼴 선택과 웹 사이트 계획 방법을 결정할 수 있습니다. (그렇지 않으면 데스크톱과 모바일 간에 서체를 전환해야 할 수 있습니다. 이는 권장되지 않습니다.)

또한보십시오: 복사하여 붙여넣을 수 있는 5가지 간단하고 실용적인 CSS 목록 스타일

디자인을 계획할 때 이 전체 프레임워크의 일부로 서체 요소에 대해 생각하는 것이 중요합니다. 나중에 이상하게 반응하는 타이포그래피 문제에 걸리지 마세요. (예를 들어 매우 넓은 글꼴은 모바일 화면에서 고유한 가독성 문제를 나타낼 수 있습니다.)

반응형 타이포그래피 디자인 고려 사항은 다음과 같습니다.

  • 타이포그래피 선택: 멋진 글꼴로 시작하고 먼저 작은 화면에서 잘 읽습니다. 그런 다음 더 큰 화면에서 테스트해 보세요.
  • 유형 옵션 제한: 팔레트가 작을수록 관리하기 쉽고 로드 시간이 덜 가중됩니다.
  • 다음과 같은 경우에 대비해 대비책을 고려하세요. 원하는 글꼴이 로드되지 않으면(장치가 마음에 들지 않거나 CDN 서버가 다운되었을 수 있음) 매우 일반적인 대체 선택을 허용하십시오. (Arial은 산세리프 서체에 대한 대체 선택으로 널리 사용됩니다.)
  • 내용에 따라 디자인 크기 및 배율: 읽기 쉬운 타이포그래피는 글꼴 선택만큼 다른 내용에 따라 달라질 수 있습니다. 텍스트 요소의 크기와 크기는 한 번에 렌더링되는 텍스트의 양과 화면의 콘텐츠 유형에 따라 종종 다릅니다.
  • 라인 높이에 주의: 라인 사이에 약간의 추가 공간이 향상될 수 있습니다.모바일 장치의 가독성. 너무 많은 공간과 너무 적은 공간 사이에는 미묘한 균형이 있습니다. 더 작은 크기의 경우 150% 또는 1.5em의 줄 높이가 좋은 시작점이 될 수 있습니다.
  • 글꼴 범주: 디자이너는 세리프체, 실험적 글꼴 등 더 많은 글꼴 변형을 일반 관행. 이는 사용자가 어두운 모드를 더 많이 사용할 수 있는 작은 화면이나 화면에서 몇 가지 문제를 제시할 수 있습니다. 이 방법을 사용하는 경우 가독성을 보장하기 위해 조기에 유형 선택을 테스트하십시오.

반응형 유형 크기 조정이 픽셀을 넘어선다

대부분의 디자이너는 절대 숫자 단위로 작업하는 것을 피하고 백분율 또는 전각 및 렘을 선호합니다.

반응형 디자인을 위한 문자를 만들려면 크기와 배율에 대해 많은 생각이 필요합니다. 모든 디자이너는 사용하려는 크기 단위 유형에 대해 서로 다른 의견을 가질 수 있습니다.

가장 많이 사용되는 크기 단위는 다음과 같습니다.

  • 픽셀: 디지털 글꼴 크기에 대한 일반적인 표기법입니다. 절대적인 숫자
  • 포인트: 온라인에서는 덜 일반적인 크기 조정을 위해 인쇄에서 이월됨
  • Ems: 상위 글꼴 크기에 상대적인 크기 조정
  • Rems: 루트 스타일을 상속하는 크기 조정
  • 백분율: 상위 스타일의 백분율 변경을 기반으로 한 크기 조정

대부분의 디자이너는 절대 수치 단위로 작업하는 것을 피하고 백분율 또는 전각 및 렘을 선호합니다. 이 모델을 사용하면 기본 크기(예: 본문 텍스트)로 시작하여 거기에서 크기를 조정합니다.

그것수학을 더 쉽게 만들 수 있고(1rem은 약 10px) 기본 글꼴 크기를 변경하는 것만으로 전면적인 조정이 가능합니다.

기본 크기는 어떻게 되나요?

본문 텍스트는 일반적으로 16px~18px 또는 1.6rem~1.8rem(모바일의 경우 14px~16px)입니다. 그런 다음 원하는 척도를 사용하여 그에 따라 모든 크기를 조정할 수 있습니다.

데스크톱 및 모바일용 본문 또는 기타 기본 글꼴 크기의 크기를 조정하면 나머지는 저울이 알아서 처리합니다.

적절한 배율 찾기

글꼴 배율은 기본 또는 기본 글꼴에 뿌리를 둔 글꼴의 크거나 작은 정도를 결정합니다. 이 방법을 사용하면 기본 크기는 퍼센트를 좋아하는 경우 100%이고 선호하는 단위인 경우 1em입니다.

그런 다음 척도를 선택하고 그 척도가 H1에서 H6까지의 CSS 위치와 어떻게 관련되는지 등을 선택합니다.

문자 크기에 임의로 값을 할당하는 것보다 수학적으로 훨씬 쉽게 계산할 수 있는 독특한 느낌과 조화를 만드는 몇 가지 일반적인 타이포그래피 스케일이 있습니다.

High Contrast Type Scales

대형 화면에 적합한 이 스케일은 크기에 따라 편차가 큽니다. H1과 본문 텍스트 베이스는 크기의 차이로 인해 많은 드라마를 만들 것입니다.

이 척도에는 다음이 포함됩니다(숫자는 변경 비율).

  • 증가 4도, 1.414
  • 완전 5도, 1.500
  • 황금 비율, 1.618

Medium Contrast Type Scales

대부분의 유형 척도가 여기에 속하며대부분의 화면 크기에 대한 안전 영역. 텍스트 콘텐츠가 많은 디자인에 적합합니다.

이 척도에는 다음이 포함됩니다.

  • 마이너 3도, 1.200
  • 메이저 3도, 1.250
  • 완전 4도, 1.333

Low Contrast Type Scales

식별자로 사용되는 작은 유형의 요소에는 가장 작은 변수가 가장 적합합니다. 대시보드 기반 앱, 전자상거래 목록 또는 그리드 기반 요소에서 이러한 유형의 척도를 볼 수 있습니다.

이 척도에는 다음이 포함됩니다.

  • 마이너 세컨드, 1.067
  • Major Second, 1.125

타이포그래피 스케일을 만들 때 직접 수학을 하고 싶지 않거나 sizes.

  • 비주얼 스케일 계산기(위에 표시됨)
  • 순수 CSS의 반응형 글꼴
  • MDN 글꼴 크기 속성
  • 활자 스케일 계산기
  • 간단한 반응형 글꼴 크기 계산기

본질적인 타이포그래피 미리보기

웹 타이포그래피 측면에서 다음으로 생각할 것은 고유한 유형입니다. 올해 초 CSS-Tricks의 Scott Kellum은 이를 "웹에서 텍스트 스타일링의 미래"라고 불렀습니다.

간단한 설명에서 본질적인 타이포그래피는 고유한 텍스트 스타일을 잃습니다. 대신 영역에 대한 텍스트의 비율을 기반으로 스타일을 정의합니다. 그 이유는 유연성을 높이고 더 간단한 코드를 작성하기 위함입니다.

결과는 텍스트가 "자체 조정"됩니다.그것이 살고 있고 뷰포트에 연결되어 있지 않은 컨테이너에. 전체 디자인에 적용되는 척도 내에서 소수의 사전 설정 크기보다 훨씬 더 많은 것을 가질 수 있습니다. 편차는 거의 무한해집니다.

Typetura 도구를 사용하여 사용해 볼 수 있습니다.

또한보십시오: 50개 이상의 최고의 수채화 배경 텍스처

결론

타이포그래피 디자인은 모든 웹 프로젝트에서 가장 중요한 요소가 될 수 있습니다. 텍스트가 어떻게 렌더링되고 모든 크기에서 어떻게 읽힐지 생각함으로써 모두를 위한 보다 가치 있고 액세스 가능한 웹 경험을 만들고 있습니다.

타이포그래피에 대한 견고한 기초와 디자인과 상호 작용하는 방식에 관계없이 웹 사이트 방문자를 위해 조정하는 방법에 대한 이해에서 시작됩니다.

John Morrison

John Morrison은 노련한 디자이너이자 디자인 업계에서 다년간의 경험을 쌓은 다작 작가입니다. 지식을 공유하고 다른 사람으로부터 배우는 것에 대한 열정으로 John은 업계 최고의 디자인 블로거 중 한 명으로 명성을 쌓았습니다. 그는 동료 디자이너에게 영감을 주고 교육하는 것을 목표로 최신 디자인 트렌드, 기술 및 도구에 대해 연구하고 실험하고 글을 쓰는 데 시간을 보냅니다. 디자인 세계에서 길을 잃지 않을 때 John은 하이킹, 독서, 가족과의 시간 보내기를 즐깁니다.