์ด 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" ๊ธ๊ผด์ ์ฌ๋ฌ ์คํ์ผ๊ณผ ๋๊ป๋ก ์ ์๋ฉ๋๋ค. ์ผ๋ฐ ์ดํค๋ฆญ ์คํ์ผ์ ๊ธ๊ผด ๋๊ป 400์ ์ฌ์ฉํ๋ฉฐ woff2, woff, truetype ํ์์ ํ์ผ์ ํฌํจํฉ๋๋ค. ๋ฏธ๋์ ์คํ์ผ์ ๋๊ป 500์ด๋ฉฐ ์ผ๋ฐ์ฒด(์ดํค๋ฆญ ์๋)์
๋๋ค. ๋ฏธ๋์ ์ดํค๋ฆญ๋ ๋๊ป 500์ ์ฌ์ฉํ์ง๋ง ์ดํค๋ฆญ์ฒด์
๋๋ค. ์ธ๋ฏธ๋ณผ๋ ์คํ์ผ์ ๋๊ป 600์ ์ผ๋ฐ์ฒด์ด๋ฉฐ, ์ดํค๋ฆญ ๋ฒ์ ๋ ๋์ผํ ๋๊ป๋ฅผ ๊ฐ์ง๋๋ค. ๋ณผ๋ ์คํ์ผ์ ๋๊ป 700์ ์ผ๋ฐ์ฒด์ด๋ฉฐ, ๋ณผ๋ ์ดํค๋ฆญ์ ๋๊ป 700์ ์ดํค๋ฆญ์ฒด์
๋๋ค. ๋ธ๋ ์คํ์ผ์ ๋๊ป 900์ ์ผ๋ฐ์ฒด์ด๋ฉฐ, ๋ธ๋ ์ดํค๋ฆญ์ ๋์ผํ ๋๊ป์ ์ดํค๋ฆญ์ฒด์
๋๋ค. ๊ฐ ์คํ์ผ์ ํธํ์ฑ์ ์ํด ์ฌ๋ฌ ๊ธ๊ผด ํ์ผ ํ์์ ์ง์ ํฉ๋๋ค.
์ ๊ณต๋ ํ
์คํธ๋ ์น์ฌ์ดํธ(์๋ง๋ The Guardian)๋ฅผ ์ํ CSS ๊ธ๊ผด ์ ์์ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ๋ ์ด์์ ๊ท์น์ด ํผํฉ๋ ๊ฒ์ผ๋ก ๋ณด์
๋๋ค. ๋ค์์ ์๋ฏธ๋ฅผ ์ ์งํ๋ฉด์ ๊ธฐ์ ์ ํํ์ ๋จ์ํํ ์ ์ฐฝํ๊ณ ์์ฐ์ค๋ฌ์ด ์์ด ์ฌ์์ฑ์
๋๋ค:
์ด CSS ์ฝ๋๋ ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด๊ณผ ๊ธฐ์ฌ ์ฝํ
์ธ ์ ๋ ์ด์์์ ์ ์ํฉ๋๋ค. ๋ ๊ฐ์ง ๊ธ๊ผด์ ์ง์ ํฉ๋๋ค: "Guardian Headline"์ ํค๋น ์ดํค๋ฆญ ์คํ์ผ๋ก, "Guardian Titlepiece"๋ ๋ณผ๋์ฒด์
๋๋ค.
๋ ์ด์์์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ ๊ทธ๋ฆฌ๋ ์์คํ
์ ์ฌ์ฉํฉ๋๋ค. ๊ฐ์ฅ ์์ ํ๋ฉด์์๋ ๊ทธ๋ฆฌ๋๊ฐ ๋จ์ผ ์ด์ด๋ฉฐ ๋ฏธ๋์ด, ์ ๋ชฉ, ํค๋๋ผ์ธ ๋ฐ ๊ธฐํ ์์๋ฅผ ์ํ ์์ญ์ด ์์ง์ผ๋ก ์์
๋๋ค. ํ๋ฉด์ด ๋์ด์ง์ ๋ฐ๋ผ ๋ ์ด์์์ด ์กฐ์ ๋ฉ๋๋ค. ์ค๊ฐ ํฌ๊ธฐ ํ๋ฉด์์๋ ๊ทธ๋ฆฌ๋๊ฐ ๋จ์ผ ์ด๋ก ์ ์ง๋์ง๋ง ์ผ๋ถ ์์ญ์ ์์๊ฐ ๋ณ๊ฒฝ๋ฉ๋๋ค. ๋ ํฐ ํ๋ฉด์์๋ ๊ธฐ๋ณธ ์ฝํ
์ธ ์์ญ๊ณผ ์ค๋ฅธ์ชฝ ์ฌ์ด๋๋ฐ๊ฐ ์๋ ๋ ์ด ๋ ์ด์์์ผ๋ก ์ ํ๋ฉ๋๋ค. ๊ฐ์ฅ ๋์ ํ๋ฉด์์๋ ์ผ์ชฝ ํ
๋๋ฆฌ๊ฐ ์ถ๊ฐ๋๊ณ ์คํ ๋ํผ์คํธ(๊ธฐ์ฌ ์์ฝ) ๋ฐ ์ด๋ฏธ์ง ์บก์
๊ณผ ๊ฐ์ ์์์ ๋ฐฐ์น๊ฐ ๋์ฑ ์ธ๋ถํ๋ฉ๋๋ค.
๋ชฐ์
ํ ์บก์
์ด ์๋ ์ธํฐ๋ํฐ๋ธ ๊ทธ๋ฆฌ๋ ๊ทธ๋ฆผ์ ๊ฒฝ์ฐ ์บก์
ํจ๋ฉ์ด ์๋จ 4ํฝ์
, ๋ค๋ฅธ ๊ณณ์ 0์ผ๋ก ์ค์ ๋ฉ๋๋ค. ๊ธฐ์ฌ ๋ณธ๋ฌธ, ์ธํฐ๋ํฐ๋ธ ์ฝํ
์ธ , ๋๊ธ, ํผ์ฒ์ ๊ฐ์ ๋ค์ํ ์ฝํ
์ธ ์์ญ ๋ด์์ "lines" ๋ฐ "meta"๋ผ๋ ์์๋ ๊ทธ๋ฆฌ๋์ 2ํ 1์ด๋ถํฐ 5ํ 2์ด๊น์ง ๋ฐฐ์น๋ฉ๋๋ค. "lines" ์์๋ ์ฝํ
์ธ ์ ๋ง๊ฒ ์กฐ์ ๋๋ ๋์ด์ ์๋จ ์ฌ๋ฐฑ 5ํฝ์
์ ๊ฐ์ง๋ฉฐ, "meta" ์์๋ ์๋จ ์ฌ๋ฐฑ 18ํฝ์
์ ๊ฐ์ง๋๋ค.
๋ ๋์ ํ๋ฉด(81.25em ์ด์)์์ ์ธํฐ๋ํฐ๋ธ ๊ทธ๋ฆฌ๋๋ ํน์ ์ด ๋ ์ด์์์ ์ฌ์ฉํฉ๋๋ค: 219ํฝ์
, 1ํฝ์
, 620ํฝ์
, 80ํฝ์
, 300ํฝ์
.
iOS ๋ฐ Android ๊ธฐ๊ธฐ์ ๊ฒฝ์ฐ ๊ธฐ์ฌ ํค๋๋ Guardian Headline ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉฐ ์คํ ๋ํผ์คํธ ๋จ๋ฝ์๋ ๋ฏธ๋์ ๋๊ป๊ฐ ์ ์ฉ๋ฉ๋๋ค. ์น์
ํค์ปค๋ ๋ธ๋ก์ผ๋ก ํ์๋๋ฉฐ ์ฒซ ๊ธ์๊ฐ ๋๋ฌธ์ํ๋ฉ๋๋ค. ํค๋ผ์ธ ์์๋ ์๋จ ํจ๋ฉ 12ํฝ์
์ ๊ฐ์ง๋๋ค. ๋ฐ์ด๋ผ์ธ ์์ฑ์ ์ด๋ฆ์ ๋ณผ๋ ๋๊ป๋ฅผ ์ฌ์ฉํ๋ฉฐ, ๊ทธ ์์ ๋งํฌ๋ ๋ณผ๋์ฒด์
๋๋ค. ๊ธฐ์ฌ ๋ด ์ด๋ฏธ์ง๋ ์๋ ๋์ด๋ฅผ ๊ฐ์ง๋ฉฐ, ์์ ์์ ๋ค์์ ๋จ๋ฝ์ ์๋จ ์ฌ๋ฐฑ์ด ์์ต๋๋ค.
Guardian Headline Full ๊ธ๊ผด์ ๋ ๊ฐ์ง ์คํ์ผ๋ก ๋ก๋๋ฉ๋๋ค: ๋ผ์ดํธ ๋๊ป์ ๋ผ์ดํธ ์ดํค๋ฆญ ๋๊ป๋ก, ์์ค๋ WOFF2, WOFF, TrueType ํ์์
๋๋ค.
์ ๊ณต๋ ํ
์คํธ๋ "Guardian Headline Full"์ด๋ผ๋ ๊ธ๊ผด ํจ๋ฐ๋ฆฌ์ ๋ํ ์ผ๋ จ์ CSS font-face ๊ท์น์ผ๋ก ๋ณด์
๋๋ค. ์ด๋ฌํ ๊ท์น์ ๋ค์ํ ๊ธ๊ผด ๋๊ป์ ์คํ์ผ(์: ์ผ๋ฐ, ์ดํค๋ฆญ, ๋ฏธ๋์, ๋ณผ๋ ๋ฑ)์ ์ ์ํ๊ณ ์ค์ ๊ธ๊ผด ํ์ผ์ด ๋ค์ํ ํ์(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 {