์ด CSS ์ฝ๋๋ "Guardian Headline Full"์ด๋ผ๋ ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ ์ ์ํ๋ฉฐ, ์ฌ๋ฌ ๊ธ๊ผด ๋๊ป์ ์คํ์ผ์ ํฌํจํฉ๋๋ค. ๋ผ์ดํธ, ๋ ๊ทค๋ฌ, ๋ฏธ๋์, ์ธ๋ฏธ๋ณผ๋ ๋๊ป๊ฐ ๊ฐ๊ฐ ์ผ๋ฐ ๋ฒ์ ๊ณผ ์ดํค๋ฆญ ๋ฒ์ ์ผ๋ก ์ ๊ณต๋ฉ๋๋ค. ๊ธ๊ผด์ ๊ฐ๋์ธ ์๋ฒ์์ 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" ๊ธ๊ผด์ ์ฌ๋ฌ ์คํ์ผ๊ณผ ๋๊ป๋ก ์ ์๋ฉ๋๋ค. ์ผ๋ฐ ์ดํค๋ฆญ ์คํ์ผ์ ๊ฒฝ์ฐ ๊ธ๊ผด ํ์ผ์ woff2, woff, truetype ํ์์ผ๋ก ์ ๊ณต๋๋ฉฐ, ๊ธ๊ผด ๋๊ป๋ 400, ๊ธ๊ผด ์คํ์ผ์ ์ดํค๋ฆญ์
๋๋ค. ๋ฏธ๋์ ๋๊ป๋ ์ผ๋ฐ ์คํ์ผ๊ณผ 500์ ๋๊ป๋ฅผ ๊ฐ์ง๋ฉฐ, ๋์ผํ ์ธ ๊ฐ์ง ํ์์ผ๋ก ์ ๊ณต๋ฉ๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก ๋ฏธ๋์ ์ดํค๋ฆญ ์คํ์ผ์ 500์ ๋๊ป์ ์ดํค๋ฆญ ์คํ์ผ์ ์ฌ์ฉํฉ๋๋ค. ์ธ๋ฏธ๋ณผ๋ ๋๊ป(600)์ ๊ทธ ์ดํค๋ฆญ ๋ณํ์ด ํฌํจ๋๋ฉฐ, ๋ณผ๋(700)์ ๋ณผ๋ ์ดํค๋ฆญ ์คํ์ผ๋ ํฌํจ๋ฉ๋๋ค. ์ถ๊ฐ๋ก ๋ธ๋(900)๊ณผ ๋ธ๋ ์ดํค๋ฆญ ์คํ์ผ์ด ์ ์๋์ด ์์ผ๋ฉฐ, ๋ชจ๋ woff2, woff, truetype ํ์์ผ๋ก ์ ๊ทผ ๊ฐ๋ฅํฉ๋๋ค.
์ ๊ณต๋ ํ
์คํธ๋ CSS ๊ธ๊ผด ์ ์์ ์น์ฌ์ดํธ(์๋ง๋ The Guardian)์ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ๋ ์ด์์ ๊ท์น์ด ํผํฉ๋ ๊ฒ์ผ๋ก ๋ณด์
๋๋ค. ์๋ฏธ๋ฅผ ์ ์งํ๋ฉด์ ๊ธฐ์ ์ ํํ์ ๋จ์ํํ ์ ์ฐฝํ๊ณ ์์ฐ์ค๋ฌ์ด ์์ด ์ฌ์์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
์ด ์ฝ๋๋ ์น์ฌ์ดํธ๋ฅผ ์ํ ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด(๋ค์ํ ๋๊ป์ ์คํ์ผ์ "Guardian Headline" ๋ฐ ๋ณผ๋์ฒด "Guardian Titlepiece")์ ์ ์ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๊ธฐ์ฌ ์ฝํ
์ธ ๋ฅผ ์ํ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ค์ ํฉ๋๋ค. ์ด ๋ ์ด์์์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋ฉ๋๋ค:
* ์์ ํ๋ฉด์์๋ ๊ทธ๋ฆฌ๋๊ฐ ๋จ์ผ ์ด์ด๋ฉฐ ๋ฏธ๋์ด, ์ ๋ชฉ, ํค๋๋ผ์ธ ๋ฐ ๊ธฐํ ์์๊ฐ ์์ง์ผ๋ก ์์
๋๋ค.
* ํ๋ฉด์ด ๋์ด์ง๋ฉด ๋ ์ด์์์ด ์กฐ์ ๋ฉ๋๋ค. ๋ชฐ์
ํ ์ด๋ฏธ์ง์ ์บก์
์ ํจ๋ฉ์ด ์ถ๊ฐ๋๊ณ , ์ฃผ์ ์ฝํ
์ธ ์์ญ์ ์ค๋ฅธ์ชฝ ํจ๋ฉ์ด ์๊น๋๋ค.
* ๋ ํฐ ํ๋ฉด์์๋ ๊ทธ๋ฆฌ๋๊ฐ ๋ ๊ฐ์ ์ด(์ฃผ์ ์ฝํ
์ธ ์์ญ๊ณผ ์ค๋ฅธ์ชฝ ์ฌ์ด๋๋ฐ)๋ก ๋๋ฉ๋๋ค. ์ ๋ชฉ, ํค๋๋ผ์ธ, ๋ฏธ๋์ด, ๋ณธ๋ฌธ์ ํน์ ๋ฐฐ์ด์ด ์ด ์ด ๋ด์์ ์ด๋ํฉ๋๋ค.
* ๊ฐ์ฅ ํฐ ํ๋ฉด์์๋ ๊ทธ๋ฆฌ๋๊ฐ ๋ ํ์ฅ๋์ด ์ผ์ชฝ ํ
๋๋ฆฌ์ ๋ชจ๋ ์์์ ๋ ์ ๋ฐํ ์์น ์ง์ ์ด ํฌํจ๋ฉ๋๋ค.
๋ชฐ์
ํ ์บก์
์ด ์๋ ๋ํํ ๊ทธ๋ฆฌ๋ ๊ทธ๋ฆผ์ ๊ฒฝ์ฐ ์บก์
ํจ๋ฉ์ ์๋จ 4ํฝ์
, ๋ค๋ฅธ ๊ณณ์ 0์ผ๋ก ์ค์ ๋ฉ๋๋ค. ๋ค์ํ ์ฝํ
์ธ ์์ญ์์ lines ๋ฐ meta์ ๊ฐ์ ์์๋ ๊ทธ๋ฆฌ๋์ 2ํ 1์ด๋ถํฐ 5ํ 2์ด๊น์ง ์์นํฉ๋๋ค. lines ์์๋ ์ฝํ
์ธ ์ ๋ง๊ฒ ์กฐ์ ๋๋ ๋์ด์ ์๋จ ์ฌ๋ฐฑ 5ํฝ์
์ ๊ฐ์ง๋ฉฐ, meta ์์๋ 18ํฝ์
์ ์๋จ ์ฌ๋ฐฑ์ ๊ฐ์ง๋๋ค.
๋ ํฐ ํ๋ฉด์์๋ ๋ํํ ๊ทธ๋ฆฌ๋๊ฐ ํน์ ๋๋น์ 5์ด ๋ ์ด์์์ ์ฌ์ฉํฉ๋๋ค.
iOS ๋ฐ Android ๊ธฐ๊ธฐ์ ๊ฒฝ์ฐ ๊ธฐ์ฌ ํค๋๋ ํน์ ๊ธ๊ผด๊ณผ ์คํ์ผ์ ์ฌ์ฉํฉ๋๋ค: standfirst ํ
์คํธ๋ ๋ฏธ๋์ ๋๊ป์ ์ธ๋ฆฌํ ๊ธ๊ผด์ ์ฌ์ฉํ๊ณ , section kickers๋ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ํ์ํ๋ ๋ธ๋ก์ผ๋ก ํ์๋๋ฉฐ, keylines๋ ์กฐ์ ๋ ํจ๋ฉ์ ๊ฐ์ง๊ณ , bylines๋ ๋ณผ๋ ์ธ๋ฆฌํ ๊ธ๊ผด์ ์ฌ์ฉํฉ๋๋ค. ๊ธฐ์ฌ ๋ด ์ด๋ฏธ์ง๋ ์๋ ๋์ด๋ฅผ ๊ฐ์ง๋ฉฐ, atomic ์์ ๋ค์์ ๋จ๋ฝ์๋ ์๋จ ์ฌ๋ฐฑ์ด ์์ต๋๋ค.
๋ํ Guardian Headline Full ๊ธ๊ผด ํจ๋ฐ๋ฆฌ์ ๋ํ ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด ๋ฉด์ด ์ ์๋์ด ์์ผ๋ฉฐ, ๊ฐ๊ฐ์ ์์ค ํ์ผ๊ณผ ํ์์ ๊ฐ์ง ๋ผ์ดํธ ๋ฐ ๋ผ์ดํธ ์ดํค๋ฆญ ๋ณํ์ด ํฌํจ๋ฉ๋๋ค.
์ ๊ณต๋ ํ
์คํธ๋ "Guardian Headline Full"์ด๋ผ๋ ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ ๋ค์ํ ๋๊ป์ ์คํ์ผ๋ก ์ ์ํ๋ CSS ์ฝ๋์
๋๋ค. ์น ์ฌ์ฉ์ ์ํ ๊ธ๊ผด ํ์ผ๊ณผ ๊ทธ ํ์์ ์ง์ ํฉ๋๋ค.
@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%,