ํ‘œ๋ฉด ์•„๋ž˜, ๋ถ€์ •์˜ ์ƒํƒœ: ์œ ๋Ÿฝ์€ ๊ธฐํ›„ ์œ„๊ธฐ๋ฅผ ๋ฌด์‹œํ•˜๊ณ  ์žˆ๋Š”๊ฐ€?

ํ‘œ๋ฉด ์•„๋ž˜, ๋ถ€์ •์˜ ์ƒํƒœ: ์œ ๋Ÿฝ์€ ๊ธฐํ›„ ์œ„๊ธฐ๋ฅผ ๋ฌด์‹œํ•˜๊ณ  ์žˆ๋Š”๊ฐ€?

์ด CSS ์ฝ”๋“œ๋Š” "Guardian Headline Full"์ด๋ผ๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ๊ธ€๊ผด ํŒจ๋ฐ€๋ฆฌ๋ฅผ ์ •์˜ํ•˜๋ฉฐ, ์—ฌ๋Ÿฌ ๊ธ€๊ผด ๋‘๊ป˜์™€ ์Šคํƒ€์ผ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ๋ผ์ดํŠธ, ๋ ˆ๊ทค๋Ÿฌ, ๋ฏธ๋””์—„, ์„ธ๋ฏธ๋ณผ๋“œ ๋‘๊ป˜๊ฐ€ ๊ฐ๊ฐ ์ผ๋ฐ˜์ฒด์™€ ์ดํƒค๋ฆญ์ฒด ๋ณ€ํ˜•์œผ๋กœ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธ€๊ผด์€ ๋‹ค์–‘ํ•œ ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ํ˜ธํ™˜์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด Guardian ์„œ๋ฒ„์—์„œ WOFF2, WOFF, TrueType ํ˜•์‹์œผ๋กœ ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}

@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}

์ด ํ…์ŠคํŠธ๋Š” "Guardian Headline Full" ๊ธ€๊ผด ํŒจ๋ฐ€๋ฆฌ์— ๋Œ€ํ•œ ๊ธ€๊ผด ๋ฉด ์ •์˜๋ฅผ ํฌํ•จํ•œ CSS ์ฝ”๋“œ ์กฐ๊ฐ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ ์ฐฝํ•˜๊ณ  ์ž์—ฐ์Šค๋Ÿฌ์šด ์˜์–ด๋กœ ๋‹ค์‹œ ์ž‘์„ฑํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

์ด CSS๋Š” ์—ฌ๋Ÿฌ ์Šคํƒ€์ผ๊ณผ ๋‘๊ป˜๋ฅผ ๊ฐ€์ง„ "Guardian Headline Full" ๊ธ€๊ผด ํŒจ๋ฐ€๋ฆฌ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ํ•ญ๋ชฉ์€ ์ฃผ์–ด์ง„ URL์— ํ˜ธ์ŠคํŒ…๋œ WOFF2, WOFF, TrueType ํ˜•์‹์˜ ๊ธ€๊ผด ํŒŒ์ผ๊ณผ ํ•ด๋‹นํ•˜๋Š” ๊ธ€๊ผด ๋‘๊ป˜ ๋ฐ ์Šคํƒ€์ผ(์ดํƒค๋ฆญ์ฒด ๋˜๋Š” ์ผ๋ฐ˜์ฒด)์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์Šคํƒ€์ผ์€ ์ผ๋ฐ˜์ฒด(๋‘๊ป˜ 400)๋ถ€ํ„ฐ ๋ธ”๋ž™(๋‘๊ป˜ 900)๊นŒ์ง€ ๋‹ค์–‘ํ•˜๋ฉฐ, ๊ฐ๊ฐ ์ผ๋ฐ˜์ฒด์™€ ์ดํƒค๋ฆญ์ฒด ๋ณ€ํ˜•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ๊ณต๋œ ํ…์ŠคํŠธ๋Š” ์›น์‚ฌ์ดํŠธ(์•„๋งˆ๋„ The Guardian)์— ๋Œ€ํ•œ CSS ๊ธ€๊ผด ์ •์˜์™€ ๋ฐ˜์‘ํ˜• ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ ๊ทœ์น™์ด ํ˜ผํ•ฉ๋œ ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ์˜๋ฏธ๋ฅผ ์œ ์ง€ํ•˜๋ฉด์„œ ๊ธฐ์ˆ ์  ํ‘œํ˜„์„ ๋‹จ์ˆœํ™”ํ•œ ์œ ์ฐฝํ•˜๊ณ  ์ž์—ฐ์Šค๋Ÿฌ์šด ์˜์–ด ์žฌ์ž‘์„ฑ๋ณธ์ž…๋‹ˆ๋‹ค:

์ด ์ฝ”๋“œ๋Š” ๋‹ค์–‘ํ•œ ๋‘๊ป˜์™€ ์Šคํƒ€์ผ์˜ "Guardian Headline"๊ณผ ๋ณผ๋“œ์ฒด์˜ "Guardian Titlepiece"๋ฅผ ํฌํ•จํ•œ ์›น์‚ฌ์ดํŠธ์šฉ ์‚ฌ์šฉ์ž ์ •์˜ ๊ธ€๊ผด์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๊ธฐ์‚ฌ ์ฝ˜ํ…์ธ ์— ๋Œ€ํ•œ ๋ฐ˜์‘ํ˜• ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์ž‘์€ ํ™”๋ฉด์—์„œ๋Š” ๋ ˆ์ด์•„์›ƒ์ด ๋‹จ์ผ ์—ด์ž…๋‹ˆ๋‹ค. ํ™”๋ฉด์ด ๋„“์–ด์ง์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ์ด ์กฐ์ •๋ฉ๋‹ˆ๋‹ค: ํŒจ๋”ฉ์„ ์ถ”๊ฐ€ํ•˜๊ณ , ์˜ค๋ฅธ์ชฝ ์—ด์„ ๋„์ž…ํ•˜๋ฉฐ, ๊ฒฐ๊ตญ์—๋Š” ์ œ๋ชฉ, ํ—ค๋“œ๋ผ์ธ, ๋ฏธ๋””์–ด, ๋ณธ๋ฌธ ํ…์ŠคํŠธ๋ฅผ ์œ„ํ•œ ํŠน์ • ์˜์—ญ์ด ์žˆ๋Š” ๋ณด๋‹ค ๋ณต์žกํ•œ ๋‹ค์ค‘ ์—ด ๊ตฌ์กฐ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๊ทœ์น™์€ ๋˜ํ•œ ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์—์„œ ๋ชฐ์ž…ํ˜• ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ์บก์…˜ ํŒจ๋”ฉ์„ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค.

๋ชฐ์ž…ํ˜• ์บก์…˜์ด ์žˆ๋Š” ๋Œ€ํ™”ํ˜• ๊ทธ๋ฆฌ๋“œ ๊ทธ๋ฆผ์˜ ๊ฒฝ์šฐ, ์บก์…˜ ํŒจ๋”ฉ์€ ์ƒ๋‹จ์— 4ํ”ฝ์…€, ๋‹ค๋ฅธ ๊ณณ์—๋Š” 0์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ์ฝ˜ํ…์ธ  ์˜์—ญ์—์„œ lines ๋ฐ meta์™€ ๊ฐ™์€ ์š”์†Œ๋Š” ๊ทธ๋ฆฌ๋“œ์˜ ํ–‰ 2, ์—ด 1๋ถ€ํ„ฐ ํ–‰ 5, ์—ด 2๊นŒ์ง€ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. lines ์š”์†Œ๋Š” ์ฝ˜ํ…์ธ ์— ๋งž๋Š” ๋†’์ด์™€ 5px ์ƒ๋‹จ ์—ฌ๋ฐฑ์„ ๊ฐ€์ง€๋ฉฐ, meta ์š”์†Œ๋Š” 18px ์ƒ๋‹จ ์—ฌ๋ฐฑ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

๋” ๋„“์€ ํ™”๋ฉด์—์„œ๋Š” ๋Œ€ํ™”ํ˜• ๊ทธ๋ฆฌ๋“œ๊ฐ€ ํŠน์ • ๋„ˆ๋น„์˜ 5์—ด ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

iOS ๋ฐ Android ๊ธฐ๊ธฐ์—์„œ๋Š” ๊ธฐ์‚ฌ ํ—ค๋”์— ํŠน์ • ๊ธ€๊ผด์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค: standfirst ํ…์ŠคํŠธ๋Š” ๋ฏธ๋””์—„ ๋‘๊ป˜์˜ ํ—ค๋“œ๋ผ์ธ ๊ธ€๊ผด์„ ์‚ฌ์šฉํ•˜๊ณ , section kicker๋Š” ์ฒซ ๊ธ€์ž๊ฐ€ ๋Œ€๋ฌธ์ž๋กœ ํ‘œ์‹œ๋œ ๋ธ”๋ก์œผ๋กœ ํ‘œ์‹œ๋˜๋ฉฐ, keyline์—๋Š” 12px ์ƒ๋‹จ ํŒจ๋”ฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค. byline ์ž‘์„ฑ์ž๋Š” ๋ณผ๋“œ ํ—ค๋“œ๋ผ์ธ ๊ธ€๊ผด๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๊ธฐ์‚ฌ ๋‚ด์—์„œ ์ด๋ฏธ์ง€ figure๋Š” ์ž๋™ ๋†’์ด๋ฅผ ๊ฐ€์ง€๋ฉฐ, atomic ์š”์†Œ ๋‹ค์Œ์˜ ๋‹จ๋ฝ์—๋Š” ์ƒ๋‹จ ์—ฌ๋ฐฑ์ด ์—†์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž ์ •์˜ ๊ธ€๊ผด์ธ Guardian Headline Full์€ ํŠน์ • ์›น ์ฃผ์†Œ์—์„œ ๋ผ์ดํŠธ ๋ฐ ๋ผ์ดํŠธ ์ดํƒค๋ฆญ์ฒด ๋‘๊ป˜๋กœ ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

์ œ๊ณต๋œ ํ…์ŠคํŠธ๋Š” "Guardian Headline Full"์ด๋ผ๋Š” ๊ธ€๊ผด ํŒจ๋ฐ€๋ฆฌ์— ๋Œ€ํ•œ ์ผ๋ จ์˜ CSS @font-face ๊ทœ์น™์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ทœ์น™์€ ๋‹ค์–‘ํ•œ ๊ธ€๊ผด ๋‘๊ป˜์™€ ์Šคํƒ€์ผ(์˜ˆ: regular, italic, medium, bold ๋“ฑ)์„ ์ •์˜ํ•˜๊ณ , ์‹ค์ œ ๊ธ€๊ผด ํŒŒ์ผ์ด ๋‹ค์–‘ํ•œ ํ˜•์‹(WOFF2, WOFF, TTF)์œผ๋กœ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š” ์›น ์ฃผ์†Œ(URL)๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}

@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}

@font-face {
font-family: 'Guardian Titlepiece';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}

@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}

.content__main-column--interactive .element-atom {
max-width: 620px;
}

@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}

.content__main-column--interactive .element-showcase {
margin-left: 0;
}

@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}

@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}

.content__main-column--interactive .element-immersive {
max-width: 1100px;
}

@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
}
}

@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}

@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}

@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}

@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}

.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}

.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}

@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}

@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}

.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}

.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}

.content__main-column--interactive .element-inline {
max-width: 620px;
}

@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}

:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}

.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}

#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type {
atom, sign