diff --git a/packages/design-system/src/styles/_font.scss b/packages/design-system/src/styles/_font.scss index 06ef7b0799..85f871e879 100644 --- a/packages/design-system/src/styles/_font.scss +++ b/packages/design-system/src/styles/_font.scss @@ -43,6 +43,14 @@ $font-path: '../fonts' !default; src: url('#{$font-path}/opensans-italic-webfont.woff2') format('woff2'); } +@font-face { + font-display: swap; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 600; + src: url('#{$font-path}/opensans-semibold-webfont.woff2') format('woff2'); +} + @font-face { font-display: swap; font-family: 'Open Sans'; diff --git a/packages/design-system/src/styles/_set-for-deprecation.scss b/packages/design-system/src/styles/_set-for-deprecation.scss index 687bc21e9a..684bc92311 100644 --- a/packages/design-system/src/styles/_set-for-deprecation.scss +++ b/packages/design-system/src/styles/_set-for-deprecation.scss @@ -24,10 +24,6 @@ @container style(--debugger: true) { // Remove in v12 - .ds-u-font-weight--semibold { - @include deprecate; - } - .ds-u-sans { @include deprecate; } diff --git a/packages/design-system/src/styles/utilities/_font-weight.scss b/packages/design-system/src/styles/utilities/_font-weight.scss index 32a7e46e07..dfa071bf4c 100644 --- a/packages/design-system/src/styles/utilities/_font-weight.scss +++ b/packages/design-system/src/styles/utilities/_font-weight.scss @@ -2,6 +2,10 @@ font-weight: var(--font-weight-normal) !important; } +.ds-u-font-weight--semibold { + font-weight: 600 !important; +} + .ds-u-font-weight--bold { font-weight: var(--font-weight-bold) !important; } diff --git a/packages/docs/content/foundation/typography/body.mdx b/packages/docs/content/foundation/typography/body.mdx index 2ddd247303..f24c83f72d 100644 --- a/packages/docs/content/foundation/typography/body.mdx +++ b/packages/docs/content/foundation/typography/body.mdx @@ -27,7 +27,9 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator'; -Open Sans serves as the base font for the site. Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text. +Open Sans serves as the base font for the site. The full Open Sans type family consists of a variety of weights including light, regular, semibold, bold, and extrabold which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel. + +Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text. **Web font stack:** Open Sans > Helvetica > Arial > Verdana > Sans-Serif diff --git a/packages/docs/content/foundation/typography/headings.mdx b/packages/docs/content/foundation/typography/headings.mdx index 5890c5aabb..904d264996 100644 --- a/packages/docs/content/foundation/typography/headings.mdx +++ b/packages/docs/content/foundation/typography/headings.mdx @@ -27,7 +27,9 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator'; -Open Sans serves as the base font for the site. Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text. +Open Sans serves as the base font for the site. The full Open Sans type family consists of a variety of weights including light, regular, semibold, bold, and extrabold which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel. + +Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text. **Web font stack:** Open Sans > Helvetica > Arial > Verdana > Sans-Serif diff --git a/packages/docs/content/utilities/font/font-weight.mdx b/packages/docs/content/utilities/font/font-weight.mdx index 4f5f311de0..dc3a063624 100644 --- a/packages/docs/content/utilities/font/font-weight.mdx +++ b/packages/docs/content/utilities/font/font-weight.mdx @@ -6,7 +6,7 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator'; Change an element's `font-weight` property using the font weight utility. -**Format**: `.ds-u-font-weight--[normal|bold]` +**Format**: `.ds-u-font-weight--[normal|semibold|bold]`
@@ -14,6 +14,10 @@ Change an element's `font-weight` property using the font weight utility. .ds-u-font-weight--normal
{loremIpsumGenerator('m')}
+
+ .ds-u-font-weight--semibold +
{loremIpsumGenerator('m')}
+
.ds-u-font-weight--bold
{loremIpsumGenerator('m')}