์ด 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