- ํ์ ํ์ด์ค(Typeface) ์ ํ๊ธฐ
- ์ฌ๋ฌ ๊ฐ์ ํ์ ํ์ด์ค๋ฅผ ํจ๊ป ์ฌ์ฉํ๊ธฐ
- ์ค๋์ด(Line Height): ์ ์, ์น์ ๊ทผ์ฑ, 4ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ
- ํฐํธ ์ฌ์ด์ฆ(Font Size): ์น์ ๊ทผ์ฑ, Type Scales
- ํฐํธ ์ฌ์ด์ฆ์ ์ค๋์ด๋ฅผ ๊ทธ๋ฆฌ๋ ์์คํ ์ ๋ง์ถ๊ธฐ
- ํฐํธ ๊ตต๊ธฐ(Font Weight)
- ์๊ฐ(Letter Spacing)
- ์ค ๊ธธ์ด(Paragraph Width)
- ํฐํธ ์คํ์ผ(Font Style)
ํ์ ํ์ด์ค(Typeface)๋ฅผ ์ ํ๋ ๊ฒ์ผ๋ก ํ์ดํฌ๊ทธ๋ํผ(Typography) ๊ตฌ์ถ์ ์์ํฉ๋๋ค. ํ์ ํ์ด์ค๋ ํํ ๋งํ๋ ํฐํธ(์์ฒด)๋ฅผ ์๋ฏธํฉ๋๋ค. ๋ณดํต 1 ~ 2 ๊ฐ์ ํ์ ํ์ด์ค๋ฅผ ์ ์ ํ ํ ํฌ๊ธฐ, ๊ตต๊ธฐ ๋ฑ์ ํ์ฅํ์ฌ ํ์ดํฌ๊ทธ๋ํผ ์์คํ ์ ๊ตฌ์ถํ๊ณ ์, ํ์ ํ์ด์ค๋ ๋ธ๋๋์ ํค์ค๋งค๋์ ๊ฐ๋ ์ฑ์ ๊ณ ๋ คํ์ฌ ์ ์ ํด์ผํฉ๋๋ค. Wikipedia List of typefaces์์ ์กด์ฌํ๋ ๊ฑฐ์ ๋ชจ๋ ํ์ ํ์ด์ค ๋ชฉ๋ก์ ํ์ธํ ์ ์์ต๋๋ค.
๋ค์์ ํ์ ํ์ด์ค ์ ํ์ ๋์์ฃผ๋ ๋๊ตฌ๋ค์ ๋๋ค.
๋ง๊ณ ๋ง์ ํ์
ํ์ด์ค ์ค ์ด๋ค ๊ฒ์ ์ ํํด์ผํ ๊น์? ๋ณดํต Serif
์ Sans Serif
์ค์์ ์ฌ์ฉํ Primary ํฐํธ ๊ณ์ด์ ์ ํ๋ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค. Serif
(์ธ๋ฆฌํ)๋ ์ธ์๋ H๋ I ๊ฐ์ ํ์์์ ์๋ยท์์ ๊ฐ๋ก๋ก ๋ ์๋ ๊ฐ๋ ์ ์ ์๋ฏธํ๊ณ ์, ๋ฐ๋ผ์ Serif
๊ณ์ด ํฐํธ์ ํน์ง์ ํ์ ๋์ ํ์ฅ๋ ์ ์ด ์๋ค๋ ๊ฒ์
๋๋ค. Sans Serif
๋ ๊ทธ ๋ฐ๋์
๋๋ค. ํ๊ธ์์ Serif
๋ ๋ช
์กฐ์ฒด, Sans Serif
๋ ๊ณ ๋์ฒด๋ก ๋ถ๋ฆ
๋๋ค.
ํธํก์ด ๊ธด ๋ฌธ์ฅ์ ์ฝ์ ๋๋ Serif
๊ณ์ด ํฐํธ๊ฐ ๊ฐ๋
์ฑ์ด ์ข์ต๋๋ค. ๋ฐ๋ฉด, ํ์์ ์ต์ํ์ง ์์ ์ด๋ฆฐ์ด๋ค์ด๋ ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค์๊ฒ๋ Sans Serif
๊ณ์ด ํฐํธ์ ๊ฐ๋
์ฑ์ด ๋ ์ข์ต๋๋ค. ์๋ก Medium ์๋น์ค๋ ์ ๋ฌธ์ง์์ ๋ค๋ฃจ๋ ํ๋ฆฌํฐ ์ํฐํด์ด ๋ง์ ํ๋ซํผ์ด๊ธฐ ๋๋ฌธ์ Serif
๊ณ์ด ํฐํธ๋ฅผ Primary๋ก ์ฌ์ฉํ๋ ๊ฒ ๊ฐ๋ค์.
์ฌ์ง ์ถ์ฒ : Logo Design: Serif vs Sans-Serif
๋ชจ๋ ์ฃผ์ ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ์ผ๋ก ์ ๊ณตํ๋ ํฐํธ๋ค์ CSS Web Safe Fonts๋ผ๊ณ ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋์ด ์๊ธฐ ๋๋ฌธ์ CSS๋ก ์ ์ธํ๋ ๊ฒ๋ง์ผ๋ก ์น์์ ๋ฐ๋ก ์ฌ์ฉํ ์ ์๋ ํฐํธ๋ค์ ๋๋ค.
- Georgia
- Lucida
- Times New Roman
- Arial
- Tahoma
- Verdana
ํฐํธ๋ฅผ Proportional/Monospaced ๊ณ์ด๋ก ๋๋ ์๋ ์์ต๋๋ค. ํน๋ณํ ์ด์ ๊ฐ ์๋ค๋ฉด ๋ชจ๋ ๊ธ์์ ๋์ด๊ฐ ๋์ผํ Monospaced ํฐํธ ๋์ Proportional ํฐํธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ ์ด์ Monospaced ํฐํธ๋ ๊ธ์ ํ๋ ํ๋๋ฅผ ๋ฉด๋ฐํ ์ฒดํฌํ ํ์๊ฐ ์๋ ์ฝ๋์ ๊ฐ๋ ์ฑ์ ๋์ด๊ธฐ ์ํด ๊ณ ์๋ ํฐํธ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ฐ๋ฉด Proportional ํฐํธ๋ ์ฑ , ์ก์ง ๋ฑ ์ผ๋ฐ์ ์ธ ์ธ์๋ฌผ๊ณผ ํ๋ฉด์์ ์ปจํ ์ธ ์ ๊ฐ๋ ์ฑ์ ๋์ด๊ธฐ ์ํด ๊ณ ์๋ ํฐํธ์ด์ฃ .
๋ค์์ Proportional Vs. Monospace Fonts์์ ๋ฐ์ทํ ๋ด์ฉ์ ๋๋ค.
Benefits and Disadvantages of Monospace Fonts Setting text in a monospace font makes it easier to identify characters by themselves. Because of this, tasks that rely on the easy identification of specific characters, such as programming, benefit from the use of a monospace font. Similarly, a monospace font may be used to format code examples within a page that is otherwise set in a proportional font, in order to make them stand out more easily. Text set in a monospace font is also easier to align, leading to the creation of images constructed using characters, known as "ASCII art."
On the other hand, because of the fixed width of all the characters, a block of text set in a monospace font will typically take up more space than the same text set in a proportional font. Additionally, long stretches of monospaced text can blend together visually and, as a result, become harder to read.
์ฌ์ค ํ์
ํ์ด์ค๋ฅผ ์ ํํ๋ค๋ ๊ฒ์ "๋จ ํ๋์ ๊ณ ์ ๋ ํฐํธ"๊ฐ ์๋ "ํฐํธ ํจ๋ฐ๋ฆฌ(Font Family)"๋ฅผ ์ ํํ๋ ๊ฒ์
๋๋ค. ์๋ ์ฌ์ง์ฒ๋ผ ํ๋์ ํฐํธ๋ 100
~ 900
์ฌ์ด์ ๊ตต๊ธฐ ๊ตฌ์ฑ์ ๊ฐ์ง๊ณ ์, italic
์ฒด๋ฅผ ์ง์ํ๊ธฐ๋ ํฉ๋๋ค. CSS์์ ํ์
ํ์ด์ค๋ฅผ ์ง์ ํ๋ ์์ฑ์ ์ด๋ฆ์ด font-family
์ธ ์ด์ ์ด๊ธฐ๋ ํฉ๋๋ค. ํฐํธ ํจ๋ฐ๋ฆฌ๋ง๋ค ๊ตต๊ธฐ์ ์ข
๋ฅ์ italic
์ฒด ์ง์ ์ฌ๋ถ๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ํ๋ก์ ํธ์ ์ฑ๊ฒฉ๊ณผ ๊ท๋ชจ๋ฅผ ๊ตฌํํ๋๋ฐ ์ถฉ๋ถํ ํจ๋ฐ๋ฆฌ ๊ตฌ์ฑ์ ๊ฐ์ถ์๋์ง ๊ณ ๋ คํ์ฌ ํ์
ํ์ด์ค๋ฅผ ์ ํด์ผํฉ๋๋ค.
๋ค์์ ์ฌ๋ฌ ๊ฐ์ ํ์ ํ์ด์ค๋ฅผ ์ฌ์ฉํ ๋ ์ฐธ๊ณ ํ ๋งํ ์ฌํญ๋ค์ ๋๋ค.
-
์ต๋ 2 ~ 3 ๊ฐ์ ํ์ ํ์ด์ค๋ง ์ฌ์ฉํฉ๋๋ค. ๊ทธ ์ด์์ ์ฃผ์๋ ฅ์ ๋ถ์ฐ์ํค๊ธฐ ๋๋ฌธ์ ๋๋ค. ํฐํธ์ ์ฌ์ด์ฆ์ ๊ตต๊ธฐ๋ฅผ ๋ค๋ฅด๊ฒ ํ๋ ๊ฒ์ผ๋ก ๋ค์์ฑ์ ์ถฉ๋ถํฉ๋๋ค.
-
์๋ก ๋ช ํํ ๋์กฐ๋๋ ํ์ ํ์ด์ค๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ณดํต
Serif
๊ณ์ด 1 ๊ฐ์ง์Sans Serif
๊ณ์ด 1 ๊ฐ์ง๋ฅผ ์ฌ์ฉํฉ๋๋ค. -
ํ์ ํ์ด์ค๊ฐ ์๊ณ๋ฅผ ๋ช ํํ ํฉ๋๋ค. Primary์ Secondary๋ก ๋๋์ด ์ฌ์ฉํฉ๋๋ค.
ํ ์คํธ์ ์์๋ ํ๊ฐ(Leading)์ ํฌํจํ ๋์ด๋ฅผ ์ค๋์ด(Line Height)๋ผ๊ณ ํฉ๋๋ค. ์ค๋์ด(Line Height)๋ ์น์ ๊ทผ์ฑ๊ณผ ๊ทธ๋ฆฌ๋ ์์คํ ์ ๊ณ ๋ คํ์ฌ ์ ํฉ๋๋ค.
์ฌ์ง ์ถ์ฒ : sirong.tistory.com
WCAG Success Criterion 1.4.8์ ๋ช
์๋ ๊ฐ์ด๋์ ๋ฐ๋ฅด๋ฉด, ํฐํธ ํฌ๊ธฐ์ ์ต์ 1.5
๋ฐฐ๋ฅผ ํ
์คํธ์ ์ค๋์ด ๊ณต๊ฐ์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ๋ง์ฝ ๋ณธ๋ฌธ ํ
์คํธ์ ํฐํธ ์ฌ์ด์ฆ๊ฐ 16px
์ด๋ผ๋ฉด, ์ค๋์ด๋ ์ต์ 24px
์ด์ด์ผ ์น์ ๊ทผ์ฑ์ด ์ข๋ค๊ณ ๋ณด๋ ๊ฒ์
๋๋ค.
Line spacing (leading) is at least space-and-a-half within paragraphs
ํ์ง๋ง ์ผ๋ฐ์ ์ผ๋ก๋, ํฐํธ ์ฌ์ด์ฆ์ 1.3
~ 1.5
๋ฐฐ์ ์ค๋์ด๊ฐ ๊ฐ๋
์ฑ์ ์ต์ ์ด๊ณ , 2
๋ฐฐ๊น์ง๋ ํ์ฉ๋๋ค๋ ๊ฒ์ด ์ค๋ก ์
๋๋ค. ์ฃผ์ํ ์ ์ ํฐํธ๋ง๋ค ์ต์ ์ ์ค๋์ด๊ฐ ๋ค๋ฅด๋ค๋ ๊ฒ์
๋๋ค. Golden Ratio Typography Calculator๋ ํฐํธ๋ณ๋ก ์ต์ ์ ์ค๋์ด๋ฅผ ๊ณ์ฐํด์ค๋๋ค.
ํฐํธ ์ฌ์ด์ฆ๊ฐ ์์ ์๋ก ์ค๋์ด ๋ฐฐ์๋ ์ปค์ ธ์ผํฉ๋๋ค. Best UX practices for line spacing์ ๋ฐ๋ฅด๋ฉด, ์์ ๊ธ์จ๋ ์ด๋ฏธ ์ฝ๊ธฐ ์ด๋ ค์ฐ๋ฉฐ, ๋์ด ์ฝ๊ฒ ๋ฐ๋ผ๊ฐ ์ ์๋๋ก ๋ ๋ง์ ๊ณต๊ฐ์ด ํ์ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
Small fonts need more spacing. Line spacing as a % should actually increase with smaller font sizes. This is because smaller fonts are already more difficult to read, and need more space around them for the eye to easily follow.
๊ทธ๋ฆฌ๋ ์์คํ
์์ ๋ชจ๋ Vertical ์ฌ๋ฐฑ๊ฐ์ ํ
์คํธ์ ์ค๋์ด์ ์ ๋น๋ก ๊ด๊ณ์์ ์์ด์ผ ์กฐํ๋กญ๋ค๊ณ ๋ด
๋๋ค. ๋ฐ๋ผ์ ํํ ์ฌ์ฉํ๋ 4ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ
(4pt Baseline Grid)์ ์ฑํํ๋ค๋ฉด, ํ
์คํธ์ ์ค๋์ด๋ 4
์ ๋ฐฐ์๋ฅผ ์ฌ์ฉํด์ผํฉ๋๋ค. ์๋ฅผ ๋ค์ด ํฐํธ ์ฌ์ด์ฆ๊ฐ 16px
์ด๋ผ๋ฉด ์ค๋์ด๋ 24px
๋ก ์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ํฐํธ ์ฌ์ด์ฆ์ 1.5
๋ฐฐ์ด๋ฉด์ 4
์ ๋ฐฐ์์ด๊ธฐ ๋๋ฌธ์
๋๋ค.
๊ฐ์ฅ ๋จผ์ ๊ธฐ๋ณธ ์ฌ์ด์ฆ๋ฅผ ์ ํฉ๋๋ค. ๋ณดํต ํ
์คํธ๊ฐ ๋ค๋ ์ฌ์ฉ๋๋ ๋ณธ๋ฌธ ์์ญ์ ๊ธฐ๋ณธ ์ฌ์ด์ฆ๋ฅผ ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค. ์น์์ ํฐํธ์ ๊ธฐ๋ณธ ์ฌ์ด์ฆ๋ ์ผ๋ฐ์ ์ผ๋ก 16px
์ ์ฌ์ฉํฉ๋๋ค. 16px
๋ณด๋ค ์์ ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํ๋๋ผ๋ ์น์ ๊ทผ์ฑ์ ๊ณ ๋ คํ์ฌ ๋๋ฌด ์์ ํฌ๊ธฐ์ ํ
์คํธ๋ ์ฌ์ฉํ์ง ๋ง์์ผํ๊ณ ์, ์ผ๋ฐ์ ์ผ๋ก 10pt
(๋๋ต 13px
)์ ์ต์ ํฌ๊ธฐ๋ก ๋ณด๊ณ ์์ต๋๋ค. ํ
์คํธ ์น์ ๊ทผ์ฑ์ ๋ํ ๋ค์ํ ์๋ฃ๋ WebAIM์์ ํ์ธํ ์ ์์ต๋๋ค.
<input>
, <textarea>
๋ฑ์ ํผ ์
๋ ฅ ์์(Form Elements)๋ ์ฌ์ฉ์๋ค์ด ์ ํํ ๊ฐ์ ์
๋ ฅํ๊ณ ์ฝ๊ฒ ํ์ธํ ์ ์์ด์ผํ๋ฏ๋ก ํฐํธ ์ฌ์ด์ฆ๋ฅผ ์ต์ 16px
๋ก ์ง์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. iOS Safari์์๋ ํด๋น ์์์ ํฐํธ ์ฌ์ด์ฆ๊ฐ 16px
๋ณด๋ค ์์ ๊ฒฝ์ฐ 16px
ํฌ๊ธฐ๋ก ๋ณด์ด๋๋ก ํ๋ฉด์ ๊ฐ์ ๋ก ์ค(Zoom) ์ํต๋๋ค.
์ด์ ๊ธฐ๋ณธ ์ฌ์ด์ฆ๋ฅผ ์ค์ฌ์ผ๋ก ํน์ ๋ฐฐ์ x
์ฉ ์ฆ๊ฐํ๋ ์ฌ์ด์ฆ ํ๋ ํธ๋ฅผ ๊ตฌ์ถํฉ๋๋ค. ๋ง์ฝ Major Second Ratio์ ๊ธฐ๋ฐํ ๋์์ธ์ ๊ตฌ์ถํ๋ค๋ฉด, ์๋์ ๊ฐ์ด 1rem
์ ๊ธฐ์ ์ผ๋ก 1.125
๋ฐฐ์ฉ ์ค์ผ์ผ๋งํ๋ ์ฌ์ด์ฆ ํ๋ ํธ๋ฅผ ๊ตฌ์ฑํ ์ ์๊ฒ ์ต๋๋ค. 1rem
์ <html>
ํ๊ทธ์ ํฐํธ ์ฌ์ด์ฆ์ด๊ณ ์, <html>
ํ๊ทธ์ ํฐํธ ์ฌ์ด์ฆ๋ฅผ px
๋จ์๋ก ๊ณ ์ ์ํจ ํ ๋ค๋ฅธ ๋ชจ๋ ํฐํธ ์ฌ์ด์ฆ๋ rem
๋จ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ํ์ฅ์ฑ๊ณผ ์น์ ๊ทผ์ฑ ๋๋ฌธ์
๋๋ค.
Type Scale์ ์ฌ์ฉํ์ต๋๋ค.
๊ธฐ๋ณธ ์ฌ์ด์ฆ์ ๋ฐฐ์ x
๋ฅผ ๋ชจ๋ํํ๋ฉด CSS๋ ์๋์ ๊ฐ์ด ์์ฑํ ์ ์์ต๋๋ค. (Modular Scale)
:root {
/* base modules */
--font-size-base: 16px; /* fallback for old browsers */
--font-size-base: 1rem;
--type-scale-ratio: 1.125;
/* type scales */
--font-size-2xl: calc(
var(--font-size-base) * var(--type-scale-ratio) * var(--type-scale-ratio) *
var(--type-scale-ratio)
);
--font-size-xl: calc(
var(--font-size-base) * var(--type-scale-ratio) * var(--type-scale-ratio)
);
--font-size-l: calc(var(--font-size-base) * var(--type-scale-ratio));
--font-size-m: var(--font-size-base);
--font-size-s: calc(var(--font-size-base) / var(--type-scale-ratio));
--font-size-xs: calc(
var(--font-size-base) / (var(--type-scale-ratio) * var(--type-scale-ratio))
);
}
๋ฐฐ์ x
์ ๊ฐ์ ์ ํ๊ธฐ ๋๋ฆ์ด์ง๋ง, Type Scale์ ์๋์ ๊ฐ์ด ๊ฐ์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก 1.15
~ 1.333
๋ฐฐ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ถฉ๋ถํ๊ณ ์, ๋ชจ๋ฐ์ผ ๋ฒ์ ์ 1.2
๋ณด๋ค ์์ ๋ฐฐ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๊ฒ ๋ค์.
Small scales (less than 1.2) are subtle and good for both mobile and desktop apps, or the mobile version of a responsive site.
Medium scales (1.15โ1.333) have a clear hierarchy, and help to organize sections with subheadings. A medium scale is versatile and works well for a wide variety of desktop sites, including blogs and marketing sites.
Large scales (1.333 or greater) may be challenging to implement effectively, but could work well for portfolios, agencies, some marketing sites, or avant-garde works.
๋ค์์ ์ฌ์ด์ฆ ํ๋ ํธ ๊ตฌ์ถ์ ๋น ๋ฅด๊ฒ ๋์์ฃผ๋ ๋๊ตฌ๋ค์ ๋๋ค.
- Modular Scale : ์๋์ผ๋ก Modular Scale ํ๋ ํธ๋ฅผ ๊ตฌ์ฑํด์ฃผ๋ ์ฌ์ดํธ
- Type Scale : ์ฌ์ฉํ ๋์์ธ ๋ ์ด์์ ๋ฐฉ๋ฒ๋ก ์ ์ ํํ๋ฉด ์๋์ผ๋ก ์ฌ์ด์ฆ ํ๋ ํธ๋ฅผ ๊ตฌ์ฑํด์ฃผ๋ ์ฌ์ดํธ
- archetype : 2 ๊ฐ ์ด์์ ํ์ ํ์ด์ค๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์ ์ฉํ ์ฌ์ดํธ
4ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ
์ ์ฌ์ฉํ๋ค๋ฉด x
๋ฐฐ์ฉ ์ฆ๊ฐํ๋ ์ฌ์ด์ฆ ํ๋ ํธ์ ๊ฐ๋ค์ ์ธ์์ ์ผ๋ก ์กฐ์ ํ์ฌ 4
์ ๋ฐฐ์ ์์ฃผ๋ก ๊ตฌ์ฑํ ์๋ ์์ต๋๋ค.
:root {
/* fallback for old browsers */
--font-size-2xl: 24px;
--font-size-xl: 20px;
--font-size-l: 18px;
--font-size-m: 16px;
--font-size-s: 14px;
--font-size-xs: 12px;
/* rem */
--font-size-2xl: 1.5rem;
--font-size-xl: 1.25rem;
--font-size-l: 1.125rem;
--font-size-m: 1rem;
--font-size-s: 0.875rem;
--font-size-xs: 0.75rem;
}
CSS ์ ์ฒ๋ฆฌ๊ธฐ ์ค ํ๋์ธ SCSS์ math.floor
ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด, ์๋์ ๊ฐ์ด 4
์ ๋ฐฐ์๋ก ๊ตฌ์ฑ๋ Modular Scale์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
@use "sass:list";
/* base modules */
$font-size-base: 1rem;
$type-scale-ratio: 1.125;
$grid-base-pt: 4;
/* type scales */
$font-size-2xl: math.floor(
$font-size-base * $type-scale-ratio * $type-scale-ratio *
$type-scale-ratio / $grid-base-pt
) * $grid-base-pt;
$font-size-xl: math.floor(
$font-size-base * $type-scale-ratio * $type-scale-ratio / $grid-base-pt
) * $grid-base-pt;
$font-size-l: math.floor($font-size-base * $type-scale-ratio / $grid-base-pt) *
$grid-base-pt;
$font-size-m: $font-size-base;
$font-size-s: math.floor(
($font-size-base / $type-scale-ratio) / $grid-base-pt
) * $grid-base-pt;
$font-size-xs: math.floor(
($font-size-base / ($type-scale-ratio * $type-scale-ratio)) / $grid-base-pt
) * $grid-base-pt;
์ค๋์ด ์ญ์ line-height: 1.5
์ ๊ฐ์ด ์ผ๊ด๋ก ์ ์ฉํ์ง ์๊ณ , Type Scales์ ๋ฐ๋ผ ํฐํธ ์ฌ์ด์ฆ๋ณ๋ก ๋ค๋ฅธ ์ค๋์ด ๊ฐ์ ์ง์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. 4ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ
์ ์ฌ์ฉํ๋ค๋ฉด ์ค๋์ด๊ฐ 4
์ ๋ฐฐ์์ฌ์ผ ์์ ๊ฐ์ ์ฃผ๊ธฐ ๋๋ฌธ์
๋๋ค.
:root {
/* fallback for old browsers */
--line-height-2xl: 36px;
--line-height-xl: 32px;
--line-height-l: 28px;
--line-height-m: 24px;
--line-height-s: 20px;
--line-height-xs: 16px;
/* rem */
--line-height-2xl: 2.25rem;
--line-height-xl: 2rem;
--line-height-l: 1.75rem;
--line-height-m: 1.5rem;
--line-height-s: 1.25rem;
--line-height-xs: 1rem;
}
Modular Scale์ ๊ตฌ์ถํ๊ธฐ ์ํด CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ ๋ SCSS๋ฅผ ์ฌ์ฉํ์ต๋๋ค.
@use "sass:list";
/* modules */
$line-height-ratio: 1.5;
/* line heights */
$line-height-2xl: math.floor(
$font-size-2xl * $line-height-ratio / $grid-base-pt
) * $grid-base-pt;
$line-height-xl: math.floor(
$font-size-xl * $line-height-ratio / $grid-base-pt
) * $grid-base-pt;
$line-height-l: math.floor($font-size-l * $line-height-ratio / $grid-base-pt) *
$grid-base-pt;
$line-height-m: math.floor($font-size-m * $line-height-ratio / $grid-base-pt) *
$grid-base-pt;
$line-height-s: math.floor($font-size-s * $line-height-ratio / $grid-base-pt) *
$grid-base-pt;
$line-height-xs: math.floor(
$font-size-xs * $line-height-ratio / $grid-base-pt
) * $grid-base-pt;
์น์์ ํฐํธ์ ๊ตต๊ธฐ๋ 100
~ 900
์ฌ์ด์ 9 ๊ฐ์ง ๊ฐ์ ์ฌ์ฉํฉ๋๋ค. ํฐํธ์ ๋ฐ๋ผ ๋ชจ๋ ๊ตต๊ธฐ๋ฅผ ์ง์ํ๊ฑฐ๋ ์ผ๋ถ ๊ตต๊ธฐ๋ง ์ง์ํ๊ธฐ๋ ํฉ๋๋ค. ๊ฐ์ ๊ตต๊ธฐ ๊ฐ์ด๋ผ๋ ํฐํธ์ ๋ฐ๋ผ ์ค์ ๊ตต๊ธฐ๋ ๋ค๋ฅด๊ณ ์.
ํฐํธ ๊ตต๊ธฐ(Font Weight)๋ ํ ์คํธ๊ฐ ์๊ณ๋ฅผ ๋ํ๋ด๋ ์ฉ๋๋ก ์ฌ์ฉํฉ๋๋ค. ํ ์คํธ๊ฐ ์๊ณ๋ฅผ ๋ถ์ฌํ ๋ ๊ตต๊ธฐ ๋์ ํฐํธ ์ฌ์ด์ฆ๋ฅผ ์ฌ์ฉํ ์๋ ์์ผ๋ฏ๋ก ์ด๋ค ๊ฒ์ด ํจ๊ณผ์ ์ผ์ง ๋น๊ตํ์ฌ ๊ฒฐ์ ํด์ผํฉ๋๋ค. ํฐํธ ์ฌ์ด์ฆ๊ฐ ์์ ํ ์คํธ์๋ ์์ ๊ตต๊ธฐ๋ฅผ ์ ์ฉํ๋ ๊ฒ์ ์ง์ํด์ผํฉ๋๋ค. ์ ๊ทผ์ฑ ๋ฌธ์ ๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
ํฐํธ์ ํฌ๊ธฐ๊ฐ ์ปค์ง๋ฉด ์๊ฐ์ ์ ๊ฒ ์ฌ์ฉํ๊ณ , ํฐํธ์ ํฌ๊ธฐ๊ฐ ์์์ง๋ฉด ์๊ฐ์ ๋๋ ค ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. Guidelines for Letterspacing Type์์ ์ฐธ๊ณ ํ ๋งํ ์ฌํญ๋ค์ ์ ๋ฆฌํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๋๋ฌธ์ : ๋๋ฌธ์์ ์๊ฐ์ ๋๋ฆฌ๋ ๊ฒ์ด ์ข์
- ํฐ ํ ์คํธ๋ ์๊ฐ์ ์ค์ด๋ ๊ฒ์ด ์ข์ต๋๋ค. (ํ์ดํ ๋ฑ)
- ๋ณธ๋ฌธ ํ ์คํธ๋ ๊ธฐ๋ณธ ์๊ฐ์ ์ฌ์ฉํ๊ฑฐ๋ ๊ธฐ๋ณธ ์๊ฐ๊ณผ ๋งค์ฐ ๋น์ทํด์ผ ํฉ๋๋ค.
- ์์ ํ ์คํธ๋ ์๊ฐ์ ๋๋ ค ์ฌ์ฉํฉ๋๋ค.
- ์ด๋์ด ๋ฐฐ๊ฒฝ์ ๋ฐ์ ์ ํ ์คํธ๋ ์๊ฐ์ ์ฝ๊ฐ ๋๋ฆฌ๋ ๊ฒ์ด ์ข์ต๋๋ค.
- ํฐํธ ๊ตต๊ธฐ์ ์๊ฐ์ ๋ฐ๋น๋ก ๊ด๊ณ์ ๋๋ค. ํฐํธ๊ฐ ๊ตต์ ์๋ก ์๊ฐ์ ์ข์์ง๊ณ , ํฐํธ ๊ตต๊ธฐ๊ฐ ์์ ์๋ก ์๊ฐ์ ๋์ด๋ฉ๋๋ค.
์ค ๊ธธ์ด๋ ํ
์คํธ ๋ฐ์ค์ ์ผ์ชฝ๊ณผ ์ค๋ฅธ์ชฝ ์ฌ์ด์ ๊ฐ๊ฒฉ์
๋๋ค.
๊ถ์ฅ๋๋ ์ค์ ๊ธธ์ด๋ ๋ ํผ๋ฐ์ค๋ง๋ค ์กฐ๊ธ์ฉ ๋ค๋ฅด์ง๋ง ๋ฐ์คํฌํ์ ๊ฒฝ์ฐ ํ ์ค์ 50 ~ 75์, ๋ชจ๋ฐ์ผ์ 35 ~ 40์ ์ฌ์ด๊ฐ ์ผ๋ฐ์ ์
๋๋ค. Material Design์ 40 ~ 60์, Atlassian Design System์ ์ฌ๋ฐฑ ํฌํจ 60 ~ 100์ ์ฌ์ด๋ฅผ ์ด์์ ์ธ ์ค ๊ธธ์ด๋ก ์ ์ํฉ๋๋ค. ์ด์ฐ๋๋ ์ ํํ ์ค ๊ธธ์ด๋ฅผ ์ธก์ ํ๊ธฐ๋ ๋ถ๊ฐ๋ฅํ๊ณ , ๋๋ฐ์ด์ค๋ง๋ค ๋ทฐํฌํธ์ ๋๋น ๋ํ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ํฐํธ ํฌ๊ธฐ์ ์๊ฐ, ๋๋ฐ์ด์ค๋ค์ ๋ทฐํฌํธ ํฌ๊ธฐ๋ฅผ ์ข
ํฉ์ ์ผ๋ก ๊ณ ๋ คํ์ฌ ๊ฒฐ์ ํ๋ฉด ๋๊ฒ ์ต๋๋ค. ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ ์ค ํ๋๋ ๊ฐ์ฅ ๋ณดํธ์ ์ผ ์ ์๋ ๊ฐ์ ์ ํ ๋ค์ max-width
๋ก ์ง์ ํ๋ ๊ฒ์
๋๋ค.
์ฌ์ง ์ถ์ฒ : Atlassian Design System
์ค ๊ธธ์ด๋ฅผ ๊ณ ๋ คํด์ผํ๋ ์ด์ ๋ ์ค ๊ธธ์ด๊ฐ ๋๋ฌด ๊ธธ๊ฑฐ๋ ์งง์ผ๋ฉด ์ฝ๋ ์๋์ ์ดํด๋๊ฐ ๋จ์ด์ง๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ค์์ Wikipedia์์ ๋ฐ์ทํ ๊ฐ๋ ์ฑ ์ฐ๊ตฌ ๊ฒฐ๊ณผ์ ๋ํ ์ค๋ช ์ ๋๋ค.
Legibility research specific to digital text has shown that, like with printed text, line length can affect reading speed. If lines are too long it is difficult for the reader to quickly return to the start of the next line (saccade), whereas if lines are too short more scrolling or paging will be required.
In order for on-screen text to have both the best speed and comprehension possible about 55 cpl should be used.
StackExchange - What is the best number of paragraph width for readability? ํ์ด์ง๊ฐ ๋์์ด ๋์์ต๋๋ค.
ํฐํธ ์คํ์ผ์๋ italic
, bold
, underline
๋ฑ์ด ์์ต๋๋ค. HTML์์ <strong>
, <em>
๋ฑ์ ํ๊ทธ์ ๊ธฐ๋ฐํ๋ ์คํ์ผ๋ค์
๋๋ค. ๋ค์์ Building a design system โ where to start?์์ ๊ฐ์ ธ์จ ๋ช๊ฐ์ง ์ฐธ๊ณ ํ ๋งํ ๊ท์น๋ค์
๋๋ค.
italic
๊ณผbold
๋ ์ํธ๋ฐฐํ์ ์ด๋ฏ๋ก ํจ๊ป ์ฌ์ฉํ์ง ์์ต๋๋ค.- ํฐํธ ์คํ์ผ์ ์ต๋ํ ์ ๊ฒ ์ฌ์ฉํฉ๋๋ค.
Serif
๊ณ์ด ํฐํธ์์ ๋ถ๋๋ฌ์ด ๊ฐ์กฐ๋italic
, ๊ฐํ ๊ฐ์กฐ๋bold
๋ฅผ ์ฌ์ฉํฉ๋๋ค.Sans Serif
๊ณ์ด ํฐํธ์์๋ ๊ฐ์กฐ์italic
์คํ์ผ์ ์ฌ์ฉํ์ง ์์ต๋๋ค. ๋์ ๋์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
- Building a design system โ where to start?
- Serif | Oxford Learner's Dictionaries
- Typography | Design Systems
- A framework to create an accessible & harmonious typography system for faster design-dev handoff
- A framework for creating a predictable & harmonious spacing system for faster design-dev handoff
- Typography | Shopify Design System
- Typography | Atlassian Design System
- 7 Things To Remember When Selecting Fonts For Your Design
- The Ultimate Guide to Creating a Design System โ Part Two, Typography
- Typography in Design Systems - A typographic system that optimizes for guessability
- Create your design system, part 1: Typography
- Mathematical Web Typography
- More Meaningful Typography
- Defining a Modular Type Scale for Web UI
- Guidelines for Letterspacing Type
- ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ 4๋ถ : ํ์ดํฌ๊ทธ๋ํผ
- Goodbye 8-point grid, hello 4-point grid?
- Why weโre using a 4-point grid in Webflow