웹사이트 글꼴 크기 감지기

브라우저에서 복사한 CSS 규칙이나 computed style JSON을 붙여 넣어 웹페이지의 글꼴 크기를 확인하세요. rem, em, %, pt, px 값을 실용적인 픽셀 표로 변환하고 line-height, font-weight, color도 함께 보여줍니다.

인터랙티브 도구

CSS 또는 브라우저 출력에서 글꼴 크기 확인

이 도구는 실제 웹사이트 타이포그래피 점검을 위해 만들었습니다. CSS 블록, inline style, 브라우저 스니펫으로 복사한 JSON을 붙여 넣어 분석합니다. 비공개 페이지를 가져오거나 보안을 우회하지 않습니다.

rem, em, %, pt, px 크기를 비교 가능한 픽셀 값으로 변환합니다.
selector, line-height, font-weight, color를 각 결과 옆에 유지합니다.
직접 확인할 수 있는 페이지의 CSS와 computed-style JSON에 대응합니다.
이미지 기반 글꼴 감지와 라이브 CSS 크기 확인을 분리합니다.

CSS, 인라인 스타일 또는 브라우저 JSON 붙여넣기

기준 px

감지 규칙 0

크기 범위 -

가장 흔함 -

선택자	선언 크기	계산 px	줄 높이	굵기	색상

글꼴 크기 감지기 사용 방법

1단계

스타일 샘플 수집

점검할 사이트를 열고 DevTools에서 CSS 규칙, inline style, computed style 값을 복사합니다. 라이브 데이터가 필요하면 확인 가능한 페이지에서 스니펫을 실행한 뒤 JSON을 붙여 넣으세요.

2단계

기준 px 설정

대부분의 사이트는 16px을 기준으로 하지만 디자인 시스템에 따라 다를 수 있습니다. rem, em, % 변환이 현실적이도록 기준값을 설정하세요.

3단계

타이포그래피 표 비교

selector, 선언 크기, 계산된 px, line-height, 굵기, 색상을 함께 확인해 제목, 버튼, 본문 크기의 불일치를 찾습니다.

웹사이트 글꼴 크기 체커가 유용한 경우

랜딩 페이지 타이포그래피 점검

히어로 제목, 버튼, 카드, 자주 묻는 질문 텍스트가 일관된 크기 체계를 따르는지 확인합니다.

CSS 단위를 픽셀로 변환

rem, em, %, px가 섞인 값을 하나의 비교 가능한 px 보기로 정리합니다.

반응형 글꼴 샘플 검토

데스크톱과 모바일 CSS를 따로 붙여 넣어 breakpoint별 크기 변화를 비교합니다.

크기와 굵기와 색상 함께 확인

가독성은 크기만으로 결정되지 않습니다. 행간, 굵기, 색상을 함께 보면 원인을 더 쉽게 찾을 수 있습니다.

글꼴 크기 감지기 vs 이미지 글꼴 검색 vs 브라우저 개발자 도구

CSS