diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 635318a037..ef13310968 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -45,7 +45,7 @@ &__title { @extend .u-fs-r--b; - @extend .u-fs-l\@m; + @extend .u-fs-xl\@m; margin: 0; color: $color-white; @@ -70,7 +70,7 @@ .header { &__title { @extend .u-fs-m; - @extend .u-fs-xl\@m; + @extend .u-fs-xxl\@m; } } } diff --git a/src/scss/objects/_typescale.scss b/src/scss/objects/_typescale.scss index 8c117b2595..b07b0767b1 100644 --- a/src/scss/objects/_typescale.scss +++ b/src/scss/objects/_typescale.scss @@ -1,21 +1,27 @@ $base: 18px; $type_matrix: ( - u-fs-xxl: ( + u-fs-xxxl: ( small: 32px, large: 48px, weight: $font-weight-bold, line-height: 1.3 ), - u-fs-xl: ( + u-fs-xxl: ( small: 28px, large: 36px, weight: $font-weight-bold, line-height: 1.4 ), + u-fs-xl: ( + small: 26px, + large: 30px, + weight: $font-weight-bold, + line-height: 1.4 + ), u-fs-l: ( small: 24px, - large: 28px, + large: 26px, weight: $font-weight-bold, line-height: 1.4 ), diff --git a/src/scss/utilities/_typography.scss b/src/scss/utilities/_typography.scss index 2fc9bd8755..cc8eecb3e0 100644 --- a/src/scss/utilities/_typography.scss +++ b/src/scss/utilities/_typography.scss @@ -30,19 +30,19 @@ } h1 { - @extend .u-fs-l; + @extend .u-fs-xl; } h2 { - @extend .u-fs-m; + @extend .u-fs-l; } h3 { - @extend .u-fs-r--b; + @extend .u-fs-m; } h4 { - @extend .u-fs-r; + @extend .u-fs-r--b; } .u-fw-b { diff --git a/src/styles/typography/headings/examples/index.html b/src/styles/typography/headings/examples/index.html index 18ac30bd86..718905d181 100644 --- a/src/styles/typography/headings/examples/index.html +++ b/src/styles/typography/headings/examples/index.html @@ -1,6 +1,6 @@ -

Heading 1 (u-fs-l)

-

Heading 2 (u-fs-m)

-

Heading 3 (u-fs-r--b)

-

Heading 4 (u-fs-r)

+

Heading 1 (u-fs-xl)

+

Heading 2 (u-fs-l)

+

Heading 3 (u-fs-m)

+

Heading 4 (u-fs-r--b)

Small (u-fs-s--b)

Small (u-fs-s)

diff --git a/src/styles/typography/index.njk b/src/styles/typography/index.njk index fb4c584cdb..59f19fe3fd 100644 --- a/src/styles/typography/index.njk +++ b/src/styles/typography/index.njk @@ -19,10 +19,12 @@ Font stack: "Open Sans", = 740 | -|-----------------------------------------------------------|-----------------------------------------------------------| -|

u-fs-xl

Open Sans Bold - 1.5rem/28px |

u-fs-xl

Open Sans Bold - 2rem/36px | -|

u-fs-l

Open Sans Bold - 1.3rem/24px |

u-fs-l

Open Sans Bold - 1.5rem/28px | +| Viewport < 740 | Viewport >= 740 | +|----------------------------------------------------------------|----------------------------------------------------------------| +|

u-fs-xxxl

Open Sans Bold - 1.7rem/32px |

u-fs-xxxl

Open Sans Bold - 2.6rem/48px | +|

u-fs-xxl

Open Sans Bold - 1.5rem/28px |

u-fs-xxl

Open Sans Bold - 2rem/36px | +|

u-fs-xl

Open Sans Bold - 1.4rem/26px |

u-fs-xl

Open Sans Bold - 1.6rem/30px | +|

u-fs-l

Open Sans Bold - 1.3rem/24px |

u-fs-l

Open Sans Bold - 1.4rem/26px | |

u-fs-m

Open Sans Bold - 1.1rem/20px |

u-fs-m

Open Sans Bold - 1.2rem/22px | |

u-fs-r--b

Open Sans Bold - 1rem/18px |

u-fs-r--b

Open Sans Bold - 1rem/18px | |

u-fs-r

Open Sans Regular - 1rem/18px |

u-fs-r

Open Sans Regular - 1rem/18px |