Apply suggestions from code review

Co-authored-by: Maximilian Franzke <[email protected]>

packages/foundations/docs/FontsSizes.md

@@ -3,17 +3,17 @@
 The font sizes of foundations consist of [two different sets](./overview) (9 sizes each) for general texts (**Body Font Sizes**) and headlines (**Headline Font Sizes**).
 All sizes of both sets are automatically adjusted by the selected [density](./../densities/readme).
 
-**Body Font Sizes**
+## Body Font Sizes
 
 -   By default, the Body Font Size `md` is set to the body tag.
 -   These 9 Body Font Sizes can also be explicitly set as classes on elements in order to change their font size.
 
-**Headline Font Sizes**
+## Headline Font Sizes
 
 -   9 Headline Sizes are available and are usable by custom properties
--   6 Headline Sizes are mapped to native headline tags (H1 - H6) by default. Headlines can therefore be used directly.
+-   6 Headline Sizes are mapped to native headline tags (`h1` to `h6`) by default. Headlines can therefore be used directly.
 
-**Available variants / sizes**
+## Available variants / sizes
 
 `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`
 
@@ -27,7 +27,7 @@ All sizes of both sets are automatically adjusted by the selected [density](./..
 ### Notes
 
 > -   Some sizes may stay the same because of screen width or density.
-> -   Elements such as `<p>` and all headings (H1 - H6) as well as **DB-UI components** have font sizes assigned by default so that they can be used without further customisation.
+> -   Elements such as `<p>` and all headings (`h1` - `h6`) as well as **DB UI components** have font sizes assigned by default so that they can be used without further customisation.
 
 ### How to include
 
@@ -51,11 +51,11 @@ Then you can use e.g. `sm` font-size by extending our SCSS placeholders like thi
 The following options are recommended for applying **Body Font Sizes**:
 
 -   CSS classes
--   CSS data-attributes
+-   CSS `data-`attributes
 -   SCSS placeholders
 -   Tailwind classes
 
-All options (except the last one) set `font-size`, `line-height` and some **custom properties** for an element. These custom properties are internally required by some components to be displayed correctly.
+All options (except the last one) set `font-size`, `line-height` and some **CSS Custom Properties** for an element. These custom properties are internally required by some components to be displayed correctly.
 
 > All available variants / sizes, [see also the detailed overview](./overview):
 >
@@ -67,7 +67,7 @@ All options (except the last one) set `font-size`, `line-height` and some **cust
 | :-----------------------: | --------------------- | ------------------------------------ | ------------------------- |
 | `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |
 
-#### Advanced use: CSS custom properties
+#### Advanced use: CSS Custom Properties
 
 > **_Note:_** The direct use of custom properties to set font sizes should be avoided if possible. If this is unavoidable, existing restrictions should be taken into account.
 

showcases/patternhub/pages/foundations/font-sizes/overview.tsx

@@ -64,15 +64,15 @@ const ColorOverview = () => {
 				</li>
 			</ol>
 			<DBInfotext data-font-size="md" semantic="informational">
-				<b>Note: </b>Some font sizes are the same for a specific device
+				<strong>Note: </strong>Some font sizes are the same for a specific device
 				type. For example in mobile all <code>xl</code> sizes are the
 				same.
 			</DBInfotext>
 			<h2>Body Font Sizes</h2>
 			<p>
-				All <b>9 body font sizes</b> provided by foundations can be set
-				via <b>css class</b>, <b>data-attribute</b>,{' '}
-				<b>scss placeholder</b> or <b>Tailwind class</b> (
+				All <strong>9 body font sizes</strong> provided by foundations can be set
+				via <strong>css class</strong>, <strong>data-attribute</strong>,{' '}
+				<strong>scss placeholder</strong> or <strong>Tailwind class</strong> (
 				<a href="./readme">How to use</a>). This ensures that all custom
 				properties are defined by the class to match the font size, so
 				that certain child components fit correctly. For example, this
@@ -124,8 +124,8 @@ const ColorOverview = () => {
 
 			<h2>Default Headlines H1 - H6</h2>
 			<p>
-				Certain <b>Headline Font Sizes</b> are mapped to the{' '}
-				<b>headline tags (H1 - H6)</b> by default. Accordingly, it is
+				Certain <strong>Headline Font Sizes</strong> are mapped to the{' '}
+				<strong>headline tags (H1 - H6)</strong> by default. Accordingly, it is
 				sufficient to use the native headline tags, as in this example.
 			</p>
 			<DBInfotext data-font-size="md" semantic="informational">
@@ -138,7 +138,7 @@ const ColorOverview = () => {
 					change={(event) => {
 						setShowCodeHeadlines(event.target.checked);
 					}}>
-					Show CSS applied by using <b>H1 - H6 tags</b>
+					Show CSS applied by using <strong>H1 - H6 tags</strong>
 				</DBSwitch>
 			</div>
 			<br />
@@ -175,7 +175,7 @@ const ColorOverview = () => {
 
 			<h2>Available Headline Font Sizes</h2>
 			<p>
-				This overview shows all <b>9 headline sizes</b> that are
+				This overview shows all <strong>9 headline sizes</strong> that are
 				available in foundations. These can be used, for example, to
 				(globally) overwrite the default mapping. Instructions on how
 				overwriting works are below.
@@ -225,7 +225,7 @@ const ColorOverview = () => {
 				selector (H1 - H6 or css class) is used to set{' '}
 				<code>font-size</code> and <code>line-height</code> (and{' '}
 				<code>margin-block</code> if necessary) to the desired size
-				using the supplied <b>custom properties</b>.
+				using the supplied <strong>custom properties</strong>.
 			</p>
 
 			<DBInfotext data-font-size="md" semantic="warning">
@@ -244,7 +244,7 @@ const ColorOverview = () => {
 				<br />
 				<code>--db-spacing-fixed-XX</code> (optional e.g. for margin)
 				<p>
-					<b>They are available in the following sizes:</b>
+					<strong>They are available in the following sizes:</strong>
 				</p>
 				<p>
 					<code>3xl</code> | <code>2xl</code> | <code>xl</code> |{' '}