글꼴 크기・줄 간격 실시간 미리보기
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 속성들이 디자인에 어떤 영향을 주는지 직관적으로 배울 수 있습니다.
피드백 보내기
도구를 개선하는 데 도움이 되도록 의견을 알려주세요.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.