웹 접근성: 접근 가능한 유동 타이포그래피

• 소개
• 모든 것 전에: 글꼴 크기: 20px - 나쁜 습관
• 액세스 가능한 유동 텍스트를 만드는 방법
• 10분 안에 알아보는 타이포그래피 구성 요소
• 영감을 받은

소개

오늘 저는 중요한 주제인 접근성에 대해 상기시켜드리고 싶습니다. 커뮤니티 중심
디지털 접근성을 더욱 쉽게 만들기 위한 노력.

이 주제의 작은 부분은 타이포그래피입니다. 텍스트는 모든 브라우저 글꼴 크기에서 보기 좋게 표시되어야 합니다.

100%	200%

이전: 글꼴 크기: 20px - 나쁜 습관

저도 알아요. 우리 모두 그렇게 했고, 인터넷상의 많은 사람들이 강좌에서 그것을 사용합니다. 그러나 그것은 나쁜 접근 방식입니다. 어떤 단위를 선택해야 할지 확실하지 않은 경우 다음과 같은 간단한 규칙이 있습니다.

px - 테두리나 그림자와 같이 변경되지 않는 고정 크기 요소입니다.

rem - 브라우저의 기본 글꼴 크기를 변경한 사용자가 액세스할 수 있도록 하는 글꼴 크기입니다.

vw / vh - 뷰포트 크기에 따라 요소 크기 조정

% - 상대 크기를 고수하는 요소 크기

접근 가능한 유동 텍스트를 만드는 방법

우리에게 필요한 것은 액세스 가능하고 공식을 만들기 위한 클램프()입니다
반응형으로 만드세요.

1. 전역 글꼴 크기를 16px로 설정했는지 확인하세요. 그리고 line-height는 1.2 이상이어야 합니다.

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

1. 저의 경우 최소 및 최대 화면 크기를 320px - 1920px로 정의하세요.

2. 최소 및 최대 화면에 표시할 텍스트 크기를 정의하세요. 내 예에는 h1 태그가 있으므로
   글꼴 크기는 그에 따라 50px 및 90px가 됩니다.

3. https://utopia.fyi/type/calculator로 이동하여 거기에 값을 입력하세요

1. CSS 생성기까지 아래로 스크롤합니다. --step-0 값이 필요합니다

   Copy
   /* @link https://utopia.fyi/type/calculator?c=320,50,1.2,1920,90,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
--step--2: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--step--1: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--step-0: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
--step-1: clamp(3.75rem, 3.0938rem + 3.2813vw, 7.0313rem);
--step-2: clamp(4.5rem, 3.6422rem + 4.2891vw, 8.7891rem);
}

1. 클램프(3.125rem, 2.625rem 2.5vw, 5.625rem)를 넣습니다. 텍스트의 글꼴 크기로.

결과 :

320px	1920px	1920px(200% zoom)

한 줄의 CSS를 사용하면 내 텍스트가 반응적이고 브라우저 크기 조정에도 액세스할 수 있음을 알 수 있습니다.

10분 안에 알아보는 타이포그래피 구성 요소

제 의도는 유연한 타이포그래피 구성 요소를 최대한 빠르고 유연하게 만드는 것이었습니다.

가장 큰 h1 텍스트를 가져왔습니다. https://utopia.fyi/type/calculator로 이동하여 8개의 축소 단계를 생성했습니다.

이것은 내 p, h1-6, 범위 및 레이블 텍스트 크기입니다

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

그런 다음 5분만 더 반응하고 짜잔:

재사용 가능한 React용 타이포그래피 구성 요소

영감을 받은 것

REM을 사용해도 웹사이트가 반응형이 되지 않습니다. 그 이유는 다음과 같습니다

유동적인 타이포그래피

위 내용은 웹 접근성: 접근 가능한 유동 타이포그래피의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!