텍스트 계층구조와 타이포그래피 예시
Text Hierarchy(텍스트 계층구조)는 주로 Headings, Subheadings, Lead, Body, Small로 구성되며, Global typography sets에서 define한다.
- Global typography: The sets defined here can be used from other global options, and element options. Each of the options within these sets can be individually overridden in options using the sets.
- Body Typography: These settings control the typography for all body text.는 Global typography에서 설정한 값 그대로 적용하면 된다.
- Heading Typography: These settings control the typography for all H1~H6 headings.
그런데 Heading Typography의 경우 H1,2는 headings세팅, h3,4는 subheadings세팅, h5,6은 lead 세팅으로 가져가던지, 아니면 가변형 폰트값(em)으로 갈거면 그냥 headings세팅을 h2 기준으로 설정해두고 h1~6 일괄 적용후에 variant값으로 비율조정해도 된다.
small은 body typography 하위분류로 그림같은거 부연설명이나 각주용도로 사용하면 된다.
px: 절대 단위로, 고정된 크기를 제공합니다. 모든 장치에서 동일한 크기로 유지됩니다.em: 상대 단위로, 부모 요소의 폰트 크기에 따라 달라집니다. 상대적인 크기를 지정할 때 유용하며, 반응형 디자인에 적합합니다.
em과 px는 웹 디자인에서 폰트 사이즈를 지정할 때 자주 사용되는 단위입니다. 각 단위의 차이를 이해하면 더 유연하고 반응형 디자인을 만들 수 있습니다.
px (픽셀)
- 절대 단위입니다. 즉, 픽셀 단위는 고정된 크기입니다.
1px은 화면의 1픽셀 크기입니다.- 모든 장치에서 동일한 크기를 유지합니다.
- 예:
font-size: 16px;는 모든 브라우저와 모든 화면에서 항상 16픽셀 크기로 표시됩니다.
em
- 상대 단위입니다.
em단위는 부모 요소의 폰트 크기에 상대적입니다. 1em은 부모 요소의 폰트 크기와 동일합니다.- 예를 들어, 부모 요소의 폰트 크기가
16px이면,1em은16px입니다. 2em은 부모 요소 폰트 크기의 두 배, 즉32px가 됩니다.- 예: 만약 부모 요소의 폰트 크기가
20px이면, 자식 요소의font-size: 1.5em;은30px입니다.
이렇게 em 단위를 사용하면 폰트 크기가 부모 요소의 폰트 크기에 따라 상대적으로 조정되므로, 반응형 웹 디자인을 더욱 유연하게 만들 수 있습니다.
타이포그래피를 설정할 때 각 요소에 적합한 스타일을 지정하는 것은 웹 디자인에서 중요한 부분입니다. headings, subheadings, lead, body, small 등의 요소는 웹 페이지의 계층적 구조와 가독성을 유지하는 데 필수적입니다.
1. Headings (헤딩)
헤딩은 페이지에서 가장 중요한 제목을 표시하며, 계층 구조를 만들어 정보를 명확하게 전달합니다.
- H1: 페이지의 주제나 제목을 나타냅니다.
- H2: 주요 섹션의 제목입니다.
- H3: H2의 하위 제목입니다.
2. Subheadings (서브헤딩)
서브헤딩은 일반적으로 주요 헤딩의 하위 제목으로 사용됩니다. 예를 들어, H2 아래에 H3를 사용할 수 있습니다.
3. Lead (리드)
리드는 주로 중요한 내용을 강조하는 첫 번째 문장이나 단락입니다. 일반 본문보다 더 두드러지게 표시됩니다.
4. Body (본문)
본문은 페이지의 주요 내용을 담고 있는 텍스트입니다. 가독성이 중요하므로 적절한 크기와 라인 높이를 설정합니다.
5. Small (작은 텍스트)
작은 텍스트는 보통 부가 정보나 보조 정보를 표시할 때 사용됩니다.
예시
아래는 주어진 텍스트 계층구조에 맞춰 Headings, Subheadings, Lead, Body, Small의 타이포그래피 설정을 적용한 예시입니다. 이 예시는 Noto Sans KR 폰트를 사용하며, 각 텍스트 요소에 맞춰 폰트 크기, 라인 높이, 자간, 마진 등을 설정하였습니다.
이 HTML 예제는 주어진 타이포그래피 설정을 lorem ipsum 텍스트와 함께 적용한 것입니다. 이를 통해 설정된 폰트 사이즈, 라인 높이, 자간, 마진 등이 실제 웹 페이지에서 어떻게 보이는지 확인할 수 있습니다. 필요에 따라 이 설정을 조정하여 웹 페이지의 디자인과 가독성을 최적화할 수 있습니다.
설명
- Global Typography
- Headings, Subheadings, Lead, Body, Small 모두 Noto Sans KR 폰트를 사용하며, 기본 설정이 적용됩니다.
- Body Typography는 기본 폰트 크기, 라인 높이, 자간 설정이 적용됩니다.
- 폰트 크기는
em단위를 사용하여 상대적으로 설정했습니다. - 라인 높이는 폰트 크기의 1.4배로 설정하여 가독성을 높였습니다.
- 자간은 기본적으로
0.03125em(0.5px)으로 설정하여 일관성을 유지했습니다. - HTML <p> 태그, <ol>, <ul>, .. : 네이버블로그 (naver.com)
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Morbi in purus non urna bibendum ultricies.
- Integer nec odio. Praesent libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em; /* 16px */
line-height: 1.5em; /* 24px */
letter-spacing: 0.015em; /* 0.24px */
}
h1, .post-title {
font-size: 2.25em; /* 36px */
line-height: 1.4em; /* 50.4px */
letter-spacing: 0.03125em; /* 1.125px */
margin-top: 1.39em; /* 50px */
margin-bottom: 0.69em; /* 25px */
}
h2 {
font-size: 1.75em; /* 28px */
line-height: 1.4em; /* 39.2px */
letter-spacing: 0.03125em; /* 0.875px */
margin-top: 1.43em; /* 40px */
margin-bottom: 0.71em; /* 20px */
}
h3, .subheading {
font-size: 1.5em; /* 24px */
line-height: 1.4em; /* 33.6px */
letter-spacing: 0.03125em; /* 0.75px */
margin-top: 1.25em; /* 30px */
margin-bottom: 0.63em; /* 15px */
font-weight: bold;
}
h4 {
font-size: 1.25em; /* 20px */
line-height: 1.4em; /* 28px */
letter-spacing: 0.03125em; /* 0.625px */
margin-top: 1.5em; /* 30px */
margin-bottom: 0.75em; /* 15px */
}
h5, .lead {
font-size: 1.125em; /* 18px */
line-height: 1.4em; /* 25.2px */
letter-spacing: 0.03125em; /* 0.5625px */
margin-top: 1.39em; /* 25px */
margin-bottom: 0.56em; /* 10px */
}
h6 {
font-size: 1em; /* 16px */
line-height: 1.4em; /* 22.4px */
letter-spacing: 0.03125em; /* 0.5px */
margin-top: 1.5625em; /* 25px */
margin-bottom: 0.625em; /* 10px */
}
# p, ul, li {
# margin-bottom: 1.25em; /* 20px */
# }
.post-title {
font-size: 1.75em; /* 28px */
line-height: 1.4em; /* 39.2px */
letter-spacing: 0.03125em; /* 0.5px */
}
.post-title-extras {
font-size: 0.875em; /* 14px */
line-height: 1.4em; /* 19.6px */
letter-spacing: 0.03125em; /* 0.5px */
color: #777;
margin-top: 1.25em; /* 20px */
margin-bottom: 0.625em; /* 10px */
}
.small {
font-size: 0.875em; /* 14px */
line-height: 1.4em; /* 19.6px */
letter-spacing: 0.03125em; /* 0.4375px */
}
</style>
</head>
<body>
<h1>Lorem Ipsum Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.</p>
<h2>Lorem Ipsum Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt suscipit magna, quis tincidunt arcu ultrices a.</p>
<h3>Lorem Ipsum Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus urna id nunc placerat, sit amet convallis elit scelerisque.</p>
<h4>Lorem Ipsum Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec semper urna, sit amet ullamcorper arcu.</p>
<h5>Lorem Ipsum Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in purus non urna bibendum ultricies.</p>
<h6>Lorem Ipsum Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat sapien eu tortor tristique, ac scelerisque mi bibendum.</p>
<div class="post-title">Lorem Ipsum Post Title</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Morbi in purus non urna bibendum ultricies.</li>
<li>Integer nec odio. Praesent libero.</li>
</ul>
<div class="post-title-extras">Comments, Related Posts or Projects, Author Titles</div>
<div class="subheading">Lorem Ipsum Subheading</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="lead">Lorem Ipsum Lead Text</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</small>
</body>
</html>
test