대부분의 검색엔진은 모바일 친화성에 따라 페이지의 순위를 매깁니다. 12px보다 작은 글꼴 크기는 휴대기기에서 읽기 어려운 경우가 많으며 사용자가 편안한 읽기 크기로 텍스트를 표시하려면 확대해야 할 수 있습니다.
Lighthouse 글꼴 크기 감사 실패 방법
Lighthouse는 글꼴 크기가 너무 작아 모바일에서 쉽게 읽을 수 없는 페이지를 신고합니다.
Lighthouse는 텍스트의 40% 이상이 글꼴 크기가 12px보다 작은 페이지를 신고합니다. 페이지가 감사에 실패하면 Lighthouse는 4개 열이 포함된 표에 결과를 나열합니다.
| 소스 | 읽을 수 없는 텍스트를 표시하는 CSS 규칙 세트의 소스 위치입니다. |
| 선택기 | 규칙 세트의 선택기입니다. |
| 페이지 텍스트의 비율(%) | 페이지에서 규칙 세트의 영향을 받는 텍스트의 비율입니다. |
| 글꼴 크기 | 계산된 텍스트 크기입니다. |
읽을 수 없는 글꼴을 수정하는 방법
CSS에서 글꼴 크기를 확인합니다. 페이지 텍스트의 최소 60% 에서 글꼴 크기가 12픽셀 이상이 되도록 하는 것이 좋습니다.
표시 영역 구성 누락을 해결하는 방법
Lighthouse에서 Text is illegible because of a missing viewport config를 보고하는 경우 <meta name="viewport" content="width=device-width, initial-scale=1"> 태그를 문서의 <head>에 추가합니다.
자세한 내용은 width 또는 initial-scale가 포함된 <meta name="viewport"> 태그 없음 게시물을 참고하세요.