Typography
Typography tokens define text styles including font size, weight, line height, and letter spacing.
Yle’s primary typeface is Yle Next, and the typography scale is available both as a default set and as Yle Next–specific tokens for consistent use across Yle services.
Default
| Preview | Token | Value | Description |
|---|---|---|---|
Aa | default/7xl-bold | 56px / 1.25 / 700 | Hero banners; Areena promotional titles |
Aa | default/7xl-heavy | 56px / 1.25 / 900 | Hero banners; maximum emphasis |
Aa | default/7xl-condensed-heavy | 56px / 1.25 / 900 | Feature article headings only. |
Aa | default/6xl-bold | 48px / 1.25 / 700 | Headings in Yle articles and stories; large promotional content; landing pages |
Aa | default/6xl-heavy | 48px / 1.25 / 900 | Headings in Yle articles and stories; feature article h1 desktop |
Aa | default/6xl-condensed-heavy | 48px / 1.25 / 900 | Feature article headings only. |
Aa | default/5xl-bold | 40px / 1.25 / 700 | Headings in Yle articles and stories; front page main headlines |
Aa | default/5xl-heavy | 40px / 1.25 / 900 | Headings in Yle articles and stories; feature article h1 mobile |
Aa | default/5xl-condensed-heavy | 40px / 1.25 / 900 | Feature article headings only. |
Aa | default/4xl-bold | 32px / 1.35 / 700 | Headings in Yle articles and stories; ArticleHeading lg; front page card headlines |
Aa | default/4xl-heavy | 32px / 1.35 / 900 | Headings in Yle articles and stories; article h1 desktop |
Aa | default/4xl-condensed-heavy | 32px / 1.35 / 900 | Feature article headings only. |
Aa | default/3xl-bold | 28px / 1.35 / 700 | Headings in Yle articles and stories; article page headlines |
Aa | default/3xl-heavy | 28px / 1.35 / 900 | Headings in Yle articles and stories; article headlines; strong emphasis |
Aa | default/3xl-condensed-heavy | 28px / 1.35 / 900 | Feature article headings only. |
Aa | default/2xl | 24px / 1.35 / 400 | Default weight for text content; section headings; card headlines |
Aa | default/2xl-bold | 24px / 1.35 / 700 | Headings in Yle articles and stories; ArticleHeading lg; Dialog title md |
Aa | default/2xl-heavy | 24px / 1.35 / 900 | Headings in Yle articles and stories; article h1 mobile; Quote; List/Infobox |
Aa | default/2xl-condensed-bold | 24px / 1.35 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/2xl-condensed-heavy | 24px / 1.35 / 900 | Feature article headings only. |
Aa | default/xl | 20px / 1.45 / 400 | Default weight for text content; article ingress/lead desktop |
Aa | default/xl-italic | 20px / 1.45 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | default/xl-bold | 20px / 1.45 / 700 | Headings in Yle articles and stories; emphasis within body text; ArticleHeading md |
Aa | default/xl-heavy | 20px / 1.45 / 900 | Headings in Yle articles and stories; article h2/h3; Quote/List/Infobox |
Aa | default/xl-condensed | 20px / 1.45 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/xl-condensed-bold | 20px / 1.45 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/xl-condensed-heavy | 20px / 1.45 / 900 | Feature article headings only. |
Aa | default/l | 18px / 1.45 / 400 | Default weight for text content; article body desktop; Accordion; lists |
Aa | default/l-italic | 18px / 1.45 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | default/l-bold | 18px / 1.45 / 700 | Headings in Yle articles and stories; emphasis within body text; Accordion; Button |
Aa | default/l-heavy | 18px / 1.45 / 900 | Headings in Yle articles and stories; article h3 mobile; manual promo headline |
Aa | default/l-condensed | 18px / 1.45 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/l-condensed-bold | 18px / 1.45 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/l-condensed-heavy | 18px / 1.45 / 900 | Feature article headings only. |
Aa | default/m | 16px / 1.50 / 400 | Default weight for text content; TextInput; Accordion; Checkbox/Radio; article |
Aa | default/m-ac | 16px / 1.50 / 400 | Not currently used in Yle components. |
Aa | default/m-italic | 16px / 1.50 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | default/m-medium | 16px / 1.50 / 500 | Semi-bold emphasis; form labels |
Aa | default/m-bold | 16px / 1.50 / 700 | Headings in Yle articles and stories; emphasis within body text; Accordion; Button |
Aa | default/m-bold-ac | 16px / 1.50 / 700 | Not currently used in Yle components. Tags and author information in articles. |
Aa | default/m-condensed | 16px / 1.50 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/m-condensed-bold | 16px / 1.50 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/s | 14px / 1.50 / 400 | Default weight for text content; FormElementDescription; Notification; timestamps |
Aa | default/s-italic | 14px / 1.50 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | default/s-ac | 14px / 1.50 / 400 | Not currently used in Yle components. |
Aa | default/s-medium | 14px / 1.50 / 500 | Semi-bold secondary; form helpers |
Aa | default/s-bold | 14px / 1.50 / 700 | Headings in Yle articles and stories; emphasis within body text; Accordion; Button |
Aa | default/s-bold-ac | 14px / 1.50 / 700 | Not currently used in Yle components. Tags and author information in articles. |
Aa | default/s-condensed | 14px / 1.50 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/s-condensed-bold | 14px / 1.50 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | default/xs | 12px / 1.50 / 400 | Default weight for text content; caption; duration metadata; channel name |
Aa | default/xs-italic | 12px / 1.50 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | default/xs-ac | 12px / 1.50 / 400 | Not currently used in Yle components. |
Aa | default/xs-bold | 12px / 1.50 / 700 | Button xs; TagLink; video duration |
Aa | default/xs-bold-ac | 12px / 1.50 / 700 | Not currently used in Yle components. Tags and author information in articles. |
Aa | default/xs-condensed-bold | 12px / 1.50 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Yle next
| Preview | Token | Value | Description |
|---|---|---|---|
Aa | yle-next/7xl-bold | 56px / 1.25 / 700 | Hero banners; Areena promotional titles |
Aa | yle-next/7xl-heavy | 56px / 1.25 / 900 | Hero banners; maximum emphasis |
Aa | yle-next/7xl-condensed-heavy | 56px / 1.25 / 900 | Feature article headings only. |
Aa | yle-next/6xl-bold | 48px / 1.25 / 700 | Headings in Yle articles and stories; large promotional content; landing pages |
Aa | yle-next/6xl-heavy | 48px / 1.25 / 900 | Headings in Yle articles and stories; feature article h1 desktop |
Aa | yle-next/6xl-condensed-heavy | 48px / 1.25 / 900 | Feature article headings only. |
Aa | yle-next/5xl-bold | 40px / 1.25 / 700 | Headings in Yle articles and stories; front page main headlines |
Aa | yle-next/5xl-heavy | 40px / 1.25 / 900 | Headings in Yle articles and stories; feature article h1 mobile |
Aa | yle-next/5xl-condensed-heavy | 40px / 1.25 / 900 | Feature article headings only. |
Aa | yle-next/4xl-bold | 32px / 1.35 / 700 | Headings in Yle articles and stories; ArticleHeading lg; front page card headlines |
Aa | yle-next/4xl-heavy | 32px / 1.35 / 900 | Headings in Yle articles and stories; article h1 desktop |
Aa | yle-next/4xl-condensed-heavy | 32px / 1.35 / 900 | Feature article headings only. |
Aa | yle-next/3xl-bold | 28px / 1.35 / 700 | Headings in Yle articles and stories; article page headlines |
Aa | yle-next/3xl-heavy | 28px / 1.35 / 900 | Headings in Yle articles and stories; article headlines; strong emphasis |
Aa | yle-next/3xl-condensed-heavy | 28px / 1.35 / 900 | Feature article headings only. |
Aa | yle-next/2xl | 24px / 1.35 / 400 | Default weight for text content; section headings; card headlines |
Aa | yle-next/2xl-bold | 24px / 1.35 / 700 | Headings in Yle articles and stories; ArticleHeading lg; Dialog title md |
Aa | yle-next/2xl-heavy | 24px / 1.35 / 900 | Headings in Yle articles and stories; article h1 mobile; Quote; List/Infobox |
Aa | yle-next/2xl-condensed-bold | 24px / 1.35 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/2xl-condensed-heavy | 24px / 1.35 / 900 | Feature article headings only. |
Aa | yle-next/xl | 20px / 1.45 / 400 | Default weight for text content; article ingress/lead desktop |
Aa | yle-next/xl-italic | 20px / 1.45 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | yle-next/xl-bold | 20px / 1.45 / 700 | Headings in Yle articles and stories; emphasis within body text; ArticleHeading md |
Aa | yle-next/xl-heavy | 20px / 1.45 / 900 | Headings in Yle articles and stories; article h2/h3; Quote/List/Infobox |
Aa | yle-next/xl-condensed | 20px / 1.45 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/xl-condensed-bold | 20px / 1.45 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/xl-condensed-heavy | 20px / 1.45 / 900 | Feature article headings only. |
Aa | yle-next/l | 18px / 1.45 / 400 | Default weight for text content; article body desktop; Accordion; lists |
Aa | yle-next/l-italic | 18px / 1.45 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | yle-next/l-bold | 18px / 1.45 / 700 | Headings in Yle articles and stories; emphasis within body text; Accordion; Button |
Aa | yle-next/l-heavy | 18px / 1.45 / 900 | Headings in Yle articles and stories; article h3 mobile; manual promo headline |
Aa | yle-next/l-condensed | 18px / 1.45 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/l-condensed-bold | 18px / 1.45 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/l-condensed-heavy | 18px / 1.45 / 900 | Feature article headings only. |
Aa | yle-next/m | 16px / 1.50 / 400 | Default weight for text content; TextInput; Accordion; Checkbox/Radio; article |
Aa | yle-next/m-ac | 16px / 1.50 / 400 | Not currently used in Yle components. |
Aa | yle-next/m-italic | 16px / 1.50 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | yle-next/m-medium | 16px / 1.50 / 500 | Semi-bold emphasis; form labels |
Aa | yle-next/m-bold | 16px / 1.50 / 700 | Headings in Yle articles and stories; emphasis within body text; Accordion; Button |
Aa | yle-next/m-bold-ac | 16px / 1.50 / 700 | Not currently used in Yle components. Tags and author information in articles. |
Aa | yle-next/m-condensed | 16px / 1.50 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/m-condensed-bold | 16px / 1.50 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/s | 14px / 1.50 / 400 | Default weight for text content; FormElementDescription; Notification; timestamps |
Aa | yle-next/s-italic | 14px / 1.50 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | yle-next/s-ac | 14px / 1.50 / 400 | Not currently used in Yle components. |
Aa | yle-next/s-medium | 14px / 1.50 / 500 | Semi-bold secondary; form helpers |
Aa | yle-next/s-bold | 14px / 1.50 / 700 | Headings in Yle articles and stories; emphasis within body text; Accordion; Button |
Aa | yle-next/s-bold-ac | 14px / 1.50 / 700 | Not currently used in Yle components. Tags and author information in articles. |
Aa | yle-next/s-condensed | 14px / 1.50 / 400 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/s-condensed-bold | 14px / 1.50 / 700 | Yle infographics only; when fitting large amount of information in limited space. |
Aa | yle-next/xs | 12px / 1.50 / 400 | Default weight for text content; caption; duration metadata; channel name |
Aa | yle-next/xs-italic | 12px / 1.50 / 400 | Yle articles only; correction and update notes. Not used elsewhere. |
Aa | yle-next/xs-ac | 12px / 1.50 / 400 | Not currently used in Yle components. |
Aa | yle-next/xs-bold | 12px / 1.50 / 700 | Button xs; TagLink; video duration |
Aa | yle-next/xs-bold-ac | 12px / 1.50 / 700 | Not currently used in Yle components. Tags and author information in articles. |
Aa | yle-next/xs-condensed-bold | 12px / 1.50 / 700 | Yle infographics only; when fitting large amount of information in limited space. |