의 특징/무료 도구
타이포그래피 비율 실험실
조정 가능한 기본 크기, 비율, 글꼴 및 선 높이를 가진 모듈형 전기 가늠자를 미리보기하십시오. 수출입 CSS 신체 텍스트 및 6 헤드 레벨에 대한 크기.
Typography의 특징 CSS
typography.css
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }단어 수: 75상세 정보 ↑
내보내기 텍스트는 영어로 유지되며, 입력한 내용은 그대로 보존됩니다.
가입 없음. AI 크레딧 없음. 이 도구는 브라우저에서 출력을 조립합니다.
뭔가 유용한 아이디어에서.
- 01
글꼴, 기본 크기 및 모듈 비율을 선택하십시오.
- 02
헤드링 크기와 단락 간격을 검사합니다.
- 03
다운로드 CSS 현재 스케일의 변수.
약간의 맥락.
모듈형 스케일은 반복 비율로 기본 글꼴 크기를 다룹니다. 이 놀이터는 6 레벨 헤드 하이어리 플러스 바디와 작은 텍스트를 준수합니다. 크기는 시작점에 대한 명시된 픽셀 값입니다; 생산에서 사용하기 전에 응답된 행동과 급상승을 검토하십시오.
좋은 질문.
는 방법 CSS 선택된 글꼴을로드합니까?
아니요.그것은 글꼴과 공급 가을 가족을 이름. 응용 프로그램에서 선택된 글꼴을 로드 또는 셀프 호스트.
이 크기가 반응합니까?
수출은 조정 크기를 포함합니다. 실제 콘텐츠를 테스트 한 후 Breakpoints 또는 유체 유형 시스템에 적응하십시오.