스타일 샘플 수집
점검할 사이트를 열고 DevTools에서 CSS 규칙, inline style, computed style 값을 복사합니다. 라이브 데이터가 필요하면 확인 가능한 페이지에서 스니펫을 실행한 뒤 JSON을 붙여 넣으세요.
웹사이트 글꼴 크기 감지기
브라우저에서 복사한 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 크기 확인을 분리합니다.
감지 규칙
0
크기 범위
-
가장 흔함
-
| 선택자 | 선언 크기 | 계산 px | 줄 높이 | 굵기 | 색상 |
|---|
글꼴 크기 감지기 사용 방법
기준 px 설정
대부분의 사이트는 16px을 기준으로 하지만 디자인 시스템에 따라 다를 수 있습니다. rem, em, % 변환이 현실적이도록 기준값을 설정하세요.
타이포그래피 표 비교
selector, 선언 크기, 계산된 px, line-height, 굵기, 색상을 함께 확인해 제목, 버튼, 본문 크기의 불일치를 찾습니다.
웹사이트 글꼴 크기 체커가 유용한 경우
브라우저에서 복사한 CSS 규칙이나 computed style JSON을 붙여 넣어 웹페이지의 글꼴 크기를 확인하세요. rem, em, %, pt, px 값을 실용적인 픽셀 표로 변환하고 line-height, font-weight, color도 함께 보여줍니다.
랜딩 페이지 타이포그래피 점검
히어로 제목, 버튼, 카드, FAQ 텍스트가 일관된 크기 체계를 따르는지 확인합니다.
CSS 단위를 픽셀로 변환
rem, em, %, px가 섞인 값을 하나의 비교 가능한 px 보기로 정리합니다.
반응형 글꼴 샘플 검토
데스크톱과 모바일 CSS를 따로 붙여 넣어 breakpoint별 크기 변화를 비교합니다.
크기와 굵기와 색상 함께 확인
가독성은 크기만으로 결정되지 않습니다. 행간, 굵기, 색상을 함께 보면 원인을 더 쉽게 찾을 수 있습니다.
글꼴 크기 감지기 vs Font Finder vs DevTools
이 도구는 실제 웹사이트 타이포그래피 점검을 위해 만들었습니다. CSS 블록, inline style, 브라우저 스니펫으로 복사한 JSON을 붙여 넣어 분석합니다. 비공개 페이지를 가져오거나 보안을 우회하지 않습니다.
웹사이트 글꼴 크기 감지기
이 도구는 실제 웹사이트 타이포그래피 점검을 위해 만들었습니다. CSS 블록, inline style, 브라우저 스니펫으로 복사한 JSON을 붙여 넣어 분석합니다. 비공개 페이지를 가져오거나 보안을 우회하지 않습니다.
- rem, em, %, pt, px 크기를 비교 가능한 픽셀 값으로 변환합니다.
- selector, line-height, font-weight, color를 각 결과 옆에 유지합니다.
- 직접 확인할 수 있는 페이지의 CSS와 computed-style JSON에 대응합니다.
- 이미지 기반 글꼴 감지와 라이브 CSS 크기 확인을 분리합니다.
가장 적합한 용도: CSS 또는 브라우저 출력에서 글꼴 크기 확인
Font Finder
Use image-based font detection when the text is in a screenshot, logo, or flattened image.
- Best for screenshots and logos
- Returns probable font names
- Useful when CSS is unavailable
- Less precise for CSS size
가장 적합한 용도: image font identification
DevTools
Browser DevTools gives exact values for one live element, while this page helps compare several samples in one table.
- Exact live values
- Good for debugging
- Slower for many samples
- Requires access to the page
가장 적합한 용도: single-element inspection
CSS 또는 브라우저 출력에서 글꼴 크기 확인
이 도구는 실제 웹사이트 타이포그래피 점검을 위해 만들었습니다. CSS 블록, inline style, 브라우저 스니펫으로 복사한 JSON을 붙여 넣어 분석합니다. 비공개 페이지를 가져오거나 보안을 우회하지 않습니다.
웹사이트 글꼴 크기 체커가 유용한 경우
브라우저에서 복사한 CSS 규칙이나 computed style JSON을 붙여 넣어 웹페이지의 글꼴 크기를 확인하세요. rem, em, %, pt, px 값을 실용적인 픽셀 표로 변환하고 line-height, font-weight, color도 함께 보여줍니다.
글꼴 크기 감지기 vs Font Finder vs DevTools
Use this workflow when the question is CSS size, not only the font name.
글꼴 크기 감지기 FAQ
웹사이트 글꼴 크기는 어떻게 확인하나요?
브라우저에서 텍스트를 검사하고 CSS 또는 computed style을 복사해 이 도구에 붙여 넣습니다.
아무 URL이나 자동으로 스캔할 수 있나요?
아니요. 정적 도구는 CORS, 비공개 페이지, 로그인 장벽을 우회할 수 없습니다. 접근 가능한 페이지의 스타일을 복사하세요.
선언 크기와 computed px의 차이는 무엇인가요?
선언 크기는 원래 CSS 값이고 computed px는 선택한 기준 크기로 변환한 값입니다.
rem과 em도 지원하나요?
네. 기준 px로 변환합니다. em은 부모 요소에 의존할 수 있어 정확한 값은 computed JSON을 권장합니다.
line-height, 굵기, 색상은 왜 포함하나요?
가독성은 행간, 굵기, 대비에도 영향을 받기 때문입니다.
이미지 글꼴 감지기와 어떻게 다르나요?
CSS 글꼴 크기 확인에는 이 페이지를, 스크린샷이나 로고에서 글꼴 이름을 찾을 때는 이미지 감지기를 사용하세요.