diff --git a/.changeset/fluffy-ads-brush.md b/.changeset/fluffy-ads-brush.md
new file mode 100644
index 000000000..e7fee24b1
--- /dev/null
+++ b/.changeset/fluffy-ads-brush.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Define weights for `b` and `strong` elements nested inside of `c-heading` when `c-heading--light` modifier is applied, allowing certain key words or phrases to be emphasized visually
diff --git a/src/components/heading/demo/weights.twig b/src/components/heading/demo/weights.twig
new file mode 100644
index 000000000..22f6248f1
--- /dev/null
+++ b/src/components/heading/demo/weights.twig
@@ -0,0 +1,23 @@
+{% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
+ class: 'o-rhythm--generous'
+} only %}
+ {% block content %}
+ {% include '@cloudfour/components/heading/heading.twig' with {
+ "level": 1,
+ "content": "Default weight"
+ } only %}
+ {% include '@cloudfour/components/heading/heading.twig' with {
+ "level": 1,
+ "weight": "light",
+ "content": "Light weight"
+ } only %}
+ {% embed '@cloudfour/components/heading/heading.twig' with {
+ "level": 1,
+ "weight": "light",
+ } only %}
+ {% block content %}
+ Light weight with bold text
+ {% endblock %}
+ {% endembed %}
+ {% endblock %}
+{% endembed %}
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 61cdff73f..e18f8e636 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -72,6 +72,16 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16);
.c-heading--light {
font-weight: font-weight.$light;
+
+ /**
+ * Restore default font weight for bold/emphasis elements nested within light
+ * headings. Without this, `b` and `strong` elements will only be one step
+ * up in weight.
+ */
+ b,
+ strong {
+ font-weight: font-weight.$bold;
+ }
}
/**
diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx
index 98569489a..df7de588a 100644
--- a/src/components/heading/heading.stories.mdx
+++ b/src/components/heading/heading.stories.mdx
@@ -1,7 +1,7 @@
import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
import levelsDemo from './demo/levels.twig';
-import template from './heading.twig';
import permalinksDemo from './demo/permalinks.twig';
+import weightsDemo from './demo/weights.twig';
@@ -53,18 +53,32 @@ You can control the appearance of a `c-heading` component by including a `c-head
## Light Weight Modifier
-The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this to maintain the importance of headings without drowning out other content.
+For headings that are large in `font-size` but should have a bit less visual emphasis than others, the `c-heading--light` modifier will apply a lighter weight. You may use `b` or `strong` elements to emphasize key words or phrases within these headings.