글꼴 크기・줄 간격 실시간 미리보기
font-size・line-height・letter-spacing을 슬라이더로 즉시 조정.
최적의 타이포그래피를 확인하고 CSS를 복사하세요.
↑ 텍스트를 클릭하여 직접 내용을 수정할 수 있습니다.
개요
글꼴 크기・줄 간격 실시간 미리보기 도구는 CSS의 font-size・line-height・letter-spacing・font-weight를 슬라이더로 직관적으로 조정하여, 텍스트의 모습을 실시간으로 확인할 수 있는 도구입니다.
Google Fonts의 웹 폰트(Noto Sans KR 등) 로딩을 지원하여, 실제 웹 환경과 동일하게 폰트를 적용해볼 수 있습니다. 설정이 완료되면 출력된 CSS를 원클릭으로 복사할 수 있습니다.
※ Google Fonts 파일 로딩 시에만 외부 통신이 발생하며, 입력한 텍스트나 설정값은 외부 서버로 전송되지 않습니다.
사용법
슬라이더로 조정
font-size・line-height・letter-spacing・font-weight의 각 슬라이더를 움직입니다. 프리셋부터 시작하면 더 빠르게 조정할 수 있습니다.
미리보기 확인
미리보기 영역에서 텍스트의 모습을 실시간으로 확인합니다. 텍스트를 클릭하면 내용을 직접 수정할 수도 있습니다.
CSS 복사
「CSS 복사」 버튼을 눌러 생성된 코드를 클립보드에 복사하고 프로젝트에 붙여넣습니다.
용어 사전
- font-size
- 글꼴 크기를 지정하는 CSS 속성. px, em, rem, % 등의 단위로 지정할 수 있습니다. 웹 브라우저의 기본값은 보통 16px입니다.
- line-height
- 줄 간격(줄 높이)을 지정하는 CSS 속성. 단위 없는 숫자(예: 1.75)로 지정하는 것을 권장합니다. 본문은 1.6~1.9 정도가 읽기 편합니다.
- letter-spacing
- 글자 간격(자간)을 지정하는 CSS 속성. em 단위로 지정하는 것을 권장하며, 아시아권 언어는 0.05em 내외가 자연스럽습니다.
- font-weight
- 글꼴의 굵기를 지정하는 CSS 속성. 100부터 900 사이의 100 단위 숫자, 또는 "bold", "normal" 등으로 지정합니다.
- font-family
- 사용할 글꼴(서체)을 지정하는 CSS 속성. 쉼표로 구분하여 여러 개의 폴백(대체) 폰트를 지정할 수 있습니다.
- 타이포그래피 (Typography)
- 텍스트를 보기 좋고 읽기 쉽게 시각적으로 배치하는 디자인 작업 전반을 뜻합니다.
- Google Fonts
- 구글에서 무료로 제공하는 웹 폰트 서비스. Noto Sans KR 등 다양한 언어의 고품질 폰트를 제공합니다.
- 웹 폰트 (Web Font)
- 사용자의 PC에 설치되지 않아도, 서버에서 다운로드하여 웹 페이지에 표시할 수 있는 폰트입니다.
- 가독성 (Readability)
- 텍스트가 얼마나 읽기 쉬운지를 나타내는 정도. 적절한 폰트 크기, 줄 간격, 대비(명암비)가 가독성을 높입니다.
- rem / em
- CSS의 상대적인 단위. rem은 루트 요소(html)의 글자 크기를 기준으로 하고, em은 현재 요소의 글자 크기를 기준으로 합니다.
자주 묻는 질문
- Q.기존 사이트의 폰트 미리보기와 다른 점이 있나요?
- 기존 사이트의 도구는 주로 "다양한 글꼴을 비교하고 선택"하는 것이 목적이었습니다. 이 도구는 폰트 크기, 줄 간격, 글자 간격 등의 세밀한 조정과 CSS 출력에 더 특화되어 있습니다.
- Q.Google Fonts를 불러올 때 데이터가 전송되나요?
- 폰트 파일을 가져오기 위해 구글 서버와 통신할 뿐, 입력한 텍스트 내용이나 설정값은 전혀 전송되지 않습니다.
- Q.입력한 텍스트는 서버로 전송됩니까?
- 아니요. 수정하신 텍스트 내용 등은 모두 사용자의 브라우저 내부에서만 처리됩니다.
- Q.지원 목록 외의 다른 폰트도 사용할 수 있나요?
- 기본 프리셋에는 많이 사용되는 폰트들을 제공하고 있지만, 개발자 도구를 사용하거나 향후 업데이트를 통해 폰트 이름을 직접 입력할 수도 있습니다.
- Q.슬라이더 값을 직접 숫자로 입력할 수 있나요?
- 현재는 슬라이더로만 조정 가능하지만, 제공되는 프리셋 버튼을 사용해 전형적인 값을 빠르게 설정할 수 있습니다.
- Q.스마트폰에서도 사용할 수 있나요?
- 네, 슬라이더는 터치 조작도 지원하여 모바일 환경에서도 쉽게 조작할 수 있습니다.
활용 사례
웹 디자인 타이포그래피 설계
제목, 본문, 캡션 등 다양한 텍스트 요소의 최적의 설정값을 시각적으로 확인하며 결정할 수 있습니다.
블로그 본문 가독성 최적화
본문의 줄 간격과 자간을 조정하여 장문의 글이 읽기 편하도록 최적의 비율을 찾습니다.
프레젠테이션 자료의 폰트 점검
슬라이드에서 사용할 폰트 크기와 줄 간격 조합이 화면에서 어떻게 보일지 미리 확인합니다.
CSS 타이포그래피 학습
슬라이더를 이리저리 움직이며 CSS 속성들이 디자인에 어떤 영향을 주는지 직관적으로 배울 수 있습니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.