문서가 읽을 수 있는 글꼴 크기를 사용하지 않음

많은 검색엔진에서 페이지의 모바일 친화성을 기준으로 순위를 매깁니다. 글꼴 크기가 12px보다 작으면 모바일 기기에서 읽기 어려운 경우가 많으며, 사용자가 편안한 읽기 크기로 텍스트를 표시하기 위해 확대해야 할 수 있습니다.

Lighthouse 글꼴 크기 감사가 실패하는 방식

Lighthouse는 모바일에서 쉽게 읽을 수 없을 정도로 글꼴 크기가 작은 페이지를 신고합니다.

페이지에 읽기 어려운 글꼴 크기가 있음을 보여주는 Lighthouse 감사

Lighthouse는 텍스트의 40% 이상이 글꼴 크기 12px 미만인 페이지에 플래그를 지정합니다. 페이지가 감사에 실패하면 Lighthouse는 다음 네 개의 열이 있는 표에 결과를 나열합니다.

소스 읽을 수 없는 텍스트를 유발하는 CSS 규칙 세트의 소스 위치입니다.
Selector 규칙 세트의 선택기입니다.
페이지 텍스트 비율 규칙의 영향을 받는 페이지의 텍스트 비율입니다.
글꼴 크기 계산된 텍스트 크기입니다.

읽기 어려운 글꼴을 수정하는 방법

CSS에서 글꼴 크기를 확인합니다. 페이지 텍스트의 60% 이상에 12px 이상의 글꼴 크기를 사용하세요.

누락된 표시 영역 구성을 수정하는 방법

Lighthouse에서 Text is illegible because of a missing viewport config를 보고하는 경우 문서의 <head>에 <meta name="viewport" content="width=device-width, initial-scale=1"> 태그를 추가하세요.

자세한 내용은 width 또는 initial-scale이(가) 포함된 <meta name="viewport"> 태그가 없음 게시물을 참고하세요.

리소스

문서에서 읽기 쉬운 글꼴 크기를 사용하지 않음 감사의 소스 코드