텍스트 계층구조와 타이포그래피
타이포그래피 세팅
여기서는 설정한 기본 글로벌 타이포그래피 옵션을 바디와 헤딩 타이포그래피가 상속하고, 각각 조금씩 변형된 구체적인 설정을 하도록 구성해 보았습니다. 아래 설정을 적용하면 각 요소가 적절한 위계와 비율을 유지하면서, 전체적인 가독성을 높일 수 있습니다.
Global Typography 설정
- Headings:
Noto Sans KR, Semi-Bold 600, 36px (2.25em), Line Height 1.2, Letter Spacing 0.02em - Subheadings:
Noto Sans KR, Medium 500, 24px (1.5em), Line Height 1.3, Letter Spacing 0.02em - Lead:
Noto Sans KR, Medium 500, 18px (1.125em), Line Height 1.4, Letter Spacing 0.02em - Body:
Noto Sans KR, Normal 400, 16px (1rem), Line Height 1.93, Letter Spacing 0px - Small:
Noto Serif KR, Book 300, 14px (0.875em), Line Height 1.5, Letter Spacing 0.01em
Body Typography 설정 (상속)
- Font Family:
Noto Sans KR - 폰트 크기: 1rem
- Line Height: 1.93
- Letter Spacing: 0px
Heading Typography 설정 (h1~h6, 상속 + 변형)
h1 Heading
- Font Family:
Noto Sans KR - Font Size: 36px (2.25em)
- Line Height: 1.2
- Letter Spacing: 0.02em
- Margin Top: 1.2em
- Margin Bottom: 0.8em
h2 Heading
- Font Family:
Noto Sans KR - Font Size: 28px (1.75em)
- Line Height: 1.3
- Letter Spacing: 0.02em
- Margin Top: 1.2em
- Margin Bottom: 0.8em
h3 Heading
- Font Family:
Noto Sans KR - Font Size: 24px (1.5em)
- Line Height: 1.4
- Letter Spacing: 0.015em
- Margin Top: 1.1em
- Margin Bottom: 0.7em
h4 Heading
- Font Family:
Noto Sans KR - Font Size: 20px (1.25em)
- Line Height: 1.4
- Letter Spacing: 0.015em
- Margin Top: 1.25em
- Margin Bottom: 0.75em
h5 Heading
- Font Family:
Noto Sans KR - Font Size: 18px (1.125em)
- Line Height: 1.5
- Letter Spacing: 0.015em
- Margin Top: 1.2em
- Margin Bottom: 0.7em
h6 Heading
- Font Family:
Noto Sans KR - Font Size: 16px (1em)
- Line Height: 1.5
- Letter Spacing: 0.01em
- Margin Top: 1.15em
- Margin Bottom: 0.7em
Post Title Typography
- Post Title:
Noto Sans KR, 21px (1.3125em), Line Height 1.3, Letter Spacing 0.01em - Post Title Extras:
Noto Sans KR, 21px (1.3125em), Line Height 1.3, Letter Spacing 0.01em
이렇게 조정하면 타이포그래피 설정이 전체적으로 일관성을 유지하면서도 각 요소가 명확하게 강조됩니다.
구텐베르크 에디터에서 스타일을 테스트할 수 있도록, 블록 스타일로 쉽게 확인 가능한 lorem ipsum 텍스트와 요소들을 나열해 볼게요. 헤딩, 링크, 리스트, 강조 텍스트, 인용문, 테이블 등을 포함해서 블록 스타일로 넣으면 바로 적용된 스타일을 볼 수 있습니다.
Lorem Ipsum Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.
Lorem Ipsum Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt suscipit magna, quis tincidunt arcu ultrices a.
Lorem Ipsum Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus urna id nunc placerat, sit amet convallis elit scelerisque.
Lorem Ipsum Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec semper urna, sit amet ullamcorper arcu.
Lorem Ipsum Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in purus non urna bibendum ultricies.
Lorem Ipsum Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat sapien eu tortor tristique, ac scelerisque mi bibendum.
링크 예시
링크 텍스트 예시 – #1e262f (Color 8)
링크 호버시 #6796bf (Color 4)
굵은 텍스트와 기울임 텍스트
Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. This is bold text and this is italic text.
Unordered List Example
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Ordered List Example
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Blockquote Example
“This is a blockquote example. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.”
Table Example
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
이 글 공유하기:
