The Guardian Headline Full font family includes several styles, each with different weights and italics. The light version (weight 300) comes in both regular and italic styles, as does the regular version (weight 400). The medium (weight 500) and semibold (weight 600) styles also have regular and italic options. Each font file is available in WOFF2, WOFF, and TrueType formats from the Guardian's servers.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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;
}
}Den viktigste interaktive innholdskolonnen har spesifikk stil for elementer. For eksempel har atomer ingen topp- eller bunnmargin, men har 12px padding. Når et avsnitt følger et atom, fjernes atomets padding og marger settes til 12px. Inline-elementer er begrenset til 620px bredde.
For figurer med en loop-rolle, er bildeteksten posisjonert med en z-index på 6. En loop-knapp er stilsett til å være 32px bred, justert til nederst til høyre med spesifikke marger. Bildetekstknappen har en høy z-index på 100.
Selvhostede videoelementer er satt til 100% bredde, begrenset til 620px, og vist som en blokk med 12px marger. Videoen og dens beholder tar også full bredde opp til 620px og er sentrert. Hvis videoen er immersiv, fjernes breddegrensen og margene, og den strekker seg fullt ut. På større skjermer utvider immersive videoer seg til 1140px bredde med en negativ venstremargin, og ved enda større størrelser blir de 1300px brede med en større negativ margin.
Fargevariabler definerer ulike temafarger, som datolinjegrå, header-kant, bildetekst og funksjonsrød. I mørk modus justeres noen farger til et mørkt temapalett.
Innenfor artikkelkroppen har det første avsnittet etter et atom eller en horisontal linje ekstra topppadding. I tillegg er den første bokstaven i det første avsnittet etter et atom stilfestet, selv om den spesifikke stilen ikke er fullt ut detaljert her.Denne CSS-koden definerer stiler for innledende store bokstaver, siterte blokker og ulike layoutelementer på tvers av forskjellige seksjoner på en nettside. Innledende store bokstaver er stilfestet med en spesifikk skrifttype, størrelse og farge, og flytes til venstre. Siterte blokker får en maksimal bredde. For showcase-elementer er bildetekster satt til en statisk posisjon med full bredde og en maks-bredde på 620px.
Immersive elementer er satt til å ta hele visningsbredden, minus rullefeltet. På skjermer mindre enn 71.24em, justeres deres maksimale bredde til 978px, og bildetekstpadding varierer med skjermstørrelsen. På mellomstore skjermer (46.25em til 61.24em) er maks-bredden 738px. På små skjermer (under 46.24em) får immersive elementer negative venstremarger for å strekke seg til kanten av visningsområdet, med bildetekstpadding justert tilsvarende.
For større skjermer (over 61.25em) brukes et rutenettlayout for furniture wrapper, som skaper en to-kolonne struktur med definerte rader for tittel, overskrift, ingress, meta og portrettseksjoner. En toppkantlinje legges til det første barneelementet i overskriftselementer, og meta-seksjonens posisjonering settes til absolutt.Furniture wrapper setter ingressinnholdet til å ha en relativ posisjon med en topppadding på 2 piksler og ingen høyre margin. Innenfor ingressen har hovedinnholdsområdet en bunnmargin på 4 piksler. Listeelementer inne i ingressen bruker en skriftstørrelse på 20 piksler. Lenker inne i ingressen, inkludert de i listeelementer, har ingen kantlinje, ingen bakgrunnsbilde, og er understreket med en forskyvning på 6 piksler, ved bruk av en egendefinert farge for understrekingen. Ved hover endres understrekingsfargen til en ny pillar-farge.
Det første avsnittet i ingressen har en toppkantlinje og ingen bunnpadding. For større skjermer (61.25em og over), hvis skjermen også er minst 71.25em bred, fjernes toppkantlinjen. For skjermer minst 61.25em brede, har figurer ingen venstremargin og en maksimal bredde på 630 piksler når de er inline.
På skjermer 71.25em og bredere, bruker furniture wrapper et rutenettlayout med spesifikke kolonner og rader. En dekorativ linje vises før metaseksjonen, 540 piksler bred. Avsnitt i ingressen har ingen toppkantlinje, og en vertikal linje legges til før ingressinnholdet. For enda større skjermer (81.25em og over) justeres rutenettet med flere kolonner og rader, den dekorative linjen før meta strekker seg til 620 piksler, og den vertikale linjen før ingressen flytter seg litt.
Etiketter i artikkelhodet eller tittelseksjonen har en topppadding på 2 piksler. Overskriften bruker en fet skriftvekt, en maksimal bredde på 620 piksler og en skriftstørrelse på 32 piksler. På større skjermer (71.25em og over) justeres overskriften til en maksimal bredde på 540 piksler og en skriftstørrelse på 50 piksler.
For mellomstore skjermer (46.25em og over) har keylines eller linjeelementer ingen høyre margin. På større skjermer (61.25em og over) er disse linjene skjult. Linjene bruker en egendefinert farge for streken.Denne CSS-koden definerer stiler for en nettsidelayout, spesielt for en furniture-themed wrapper. Den setter ulike egenskaper for elementer som metainformasjon, ingress, hovedmedia og bildetekster. Stilene inkluderer justeringer for marger, padding, farger og posisjonering, med spesifikke regler for forskjellige skjermstørrelser ved bruk av media queries. Designet bruker egendefinerte CSS-variabler for farger, som `--darkBackground` og `--headerBorderColor`, og sikrer at elementer skjules eller vises basert på visningsbredden. Wrapperen har en mørk bakgrunn og inkluderer responsiv oppførsel for enheter fra mobil til desktop.CSS-koden stilsetter elementer innenfor en furniture-wrapper-klasse. Overskrifter (h1) er fete og lysegrå (#dcdcdc). Figurer i overskrifter har ingen toppmargin og en liten bunnmargin.
For skjermer bredere enn 71.25em vises en farget linje før metaseksjonen. Tekst og sammendrag i metaseksjonen er lysegrå. Sosiale medie-lenker og knapper har en farget kantlinje og bruker en spesifikk farge for tekst og ikoner, som endres til en mørk bakgrunn ved hover.
Lenker i metaseksjonen bruker en spesifikk farge og beholder den ved hover med matchende understreking. I ingressseksjonen er lenker understreket med en lysegrå farge som endres ved hover, og avsnittstekst er lysegrå. På bredere skjermer kan det første avsnittet få eller miste en toppkantlinje. Listeelementer i ingressen er også lysegrå.
For skjermer bredere enn 71.25em vises en linje før ingressen. På skjermer bredere enn 46.25em får wrapperen en mørk bakgrunn og en høyre kantlinje.Furniture wrapper bruker pseudo-elementer for å lage sidekantlinjer. `:before`-elementet er posisjonert til venstre med en mørk bakgrunn og en venstre kantlinje, mens bredden og venstreposisjonen beregnes basert på visningsbredden, rullefeltbredden og en fast basebredde på 738px. `:after`-elementet speiler dette på høyre side med en høyre kantlinje.
For større skjermer (minimumsbredde 61.25em) justeres beregningene til en basebredde på 978px. Dette mønsteret fortsetter for enda større brytepunkter: 71.25em (1138px base), og 81.25em (1298px base).
Innenfor wrapperen er SVG-streker og kantlinjer på visse sosiale/meta-elementer satt til å bruke en egendefinert CSS-variabel for farge, `--headerBorderColor`.
I artikkelkroppen har andre nivå overskrifter (`h2`) en skriftvekt på 200, men hvis de inneholder et `strong`-element, øker vekten til 700.
Til slutt er flere `@font-face`-regler definert for å laste "Guardian Headline Full" skriftfamilien i ulike vekter og stiler (Light, Light Italic, Regular, Regular Italic) fra Guardians assetservere.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(
