diff --git a/src/settings/_typography-responsive.scss b/src/settings/_typography-responsive.scss
index 5d058553b2..e5aec47010 100644
--- a/src/settings/_typography-responsive.scss
+++ b/src/settings/_typography-responsive.scss
@@ -1,143 +1,138 @@
-// Responsive typography font maps
-//
-// These definitions are used to generate responsive typography that adapts
-// according to the breakpoints.
-//
-// Font size and font weight can be defined for each breakpoint. You can define
-// different behaviour on tablet and desktop. The 'null' breakpoint is for
-// mobile.
-//
-// You can also specify a separate font size and line height for print media.
+////
+/// @group settings/typography
+////
 
-$govuk-font-80: (
-  null: (
-    font-size: 53px,
-    line-height: 55px
-  ),
-  tablet: (
-    font-size: 80px,
-    line-height: 80px
-  ),
-  print: (
-    font-size: 53pt,
-    line-height: 1.1
-  )
-);
-
-$govuk-font-48: (
-  null: (
-    font-size: 32px,
-    line-height: 35px
-  ),
-  tablet: (
-    font-size: 48px,
-    line-height: 50px
-  ),
-  print: (
-    font-size: 32pt,
-    line-height: 1.15
-  )
-);
-
-$govuk-font-36: (
-  null: (
-    font-size: 24px,
-    line-height: 25px
-  ),
-  tablet: (
-    font-size: 36px,
-    line-height: 40px
-  ),
-  print: (
-    font-size: 24pt,
-    line-height: 1.05
-  )
-);
-
-$govuk-font-27: (
-  null: (
-    font-size: 18px,
-    line-height: 20px
-  ),
-  tablet: (
-    font-size: 27px,
-    line-height: 30px
-  ),
-  print: (
-    font-size: 18pt,
-    line-height: 1.15
-  )
-);
-
-$govuk-font-24: (
-  null: (
-    font-size: 18px,
-    line-height: 20px
-  ),
-  tablet: (
-    font-size: 24px,
-    line-height: 30px
-  ),
-  print: (
-    font-size: 18pt,
-    line-height: 1.15
-  )
-);
-
-$govuk-font-19: (
-  null: (
-    font-size: 16px,
-    line-height: 20px
-  ),
-  tablet: (
-    font-size: 19px,
-    line-height: 25px
-  ),
-  print: (
-    font-size: 14pt,
-    line-height: 1.15
-  )
-);
-
-$govuk-font-16: (
-  null: (
-    font-size: 14px,
-    line-height: 16px
-  ),
-  tablet: (
-    font-size: 16px,
-    line-height: 20px
-  ),
-  print: (
-    font-size: 14pt,
-    line-height: 1.2
-  )
-);
-
-$govuk-font-14: (
-  null: (
-    font-size: 12px,
-    line-height: 15px
-  ),
-  tablet: (
-    font-size: 14px,
-    line-height: 20px
-  ),
-  print: (
-    font-size: 12pt,
-    line-height: 1.2
-  )
-);
+/// Responsive typography font map
+///
+/// This is used to generate responsive typography that adapts according to the
+/// breakpoints.
+///
+/// Font size and font weight can be defined for each breakpoint. You can define
+/// different behaviour on tablet and desktop. The 'null' breakpoint is for
+/// mobile.
+///
+/// You can also specify a separate font size and line height for print media.
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access public
 
-// Create a list of all responsive typography sizes which we can iterate over
-// elsewhere
 $govuk-typography-scale: (
-  80: $govuk-font-80,
-  48: $govuk-font-48,
-  36: $govuk-font-36,
-  27: $govuk-font-27,
-  24: $govuk-font-24,
-  19: $govuk-font-19,
-  16: $govuk-font-16,
-  14: $govuk-font-14
-);
+  80: (
+    null: (
+      font-size: 53px,
+      line-height: 55px
+    ),
+    tablet: (
+      font-size: 80px,
+      line-height: 80px
+    ),
+    print: (
+      font-size: 53pt,
+      line-height: 1.1
+    )
+  ),
+  48: (
+    null: (
+      font-size: 32px,
+      line-height: 35px
+    ),
+    tablet: (
+      font-size: 48px,
+      line-height: 50px
+    ),
+    print: (
+      font-size: 32pt,
+      line-height: 1.15
+    )
+  ),
+  36: (
+    null: (
+      font-size: 24px,
+      line-height: 25px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 24pt,
+      line-height: 1.05
+    )
+  ),
+  27: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  24: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 24px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  19: (
+    null: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 19px,
+      line-height: 25px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.15
+    )
+  ),
+  16: (
+    null: (
+      font-size: 14px,
+      line-height: 16px
+    ),
+    tablet: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.2
+    )
+  ),
+  14: (
+    null: (
+      font-size: 12px,
+      line-height: 15px
+    ),
+    tablet: (
+      font-size: 14px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 12pt,
+      line-height: 1.2
+    )
+  )
+) !default;