diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md
index 24109ec5236..c33610729a6 100644
--- a/packages/foundations/docs/FontsSizes.md
+++ b/packages/foundations/docs/FontsSizes.md
@@ -1,17 +1,17 @@
-# DB Font-Sizes
+# DB Font Sizes
 
-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**).
+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.
+-   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.
+-   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.
 
 **Available variants / sizes**
 
@@ -19,14 +19,14 @@ All sizes of both sets are automatically adjusted by the selected [density](./..
 
 ## When to use
 
--   Use our provided **Body-Font-Sizes** to explicitly change the size of text elements like `<p>`, `<span>` etc.
--   Use a **Body-Font-Size** for a container and all text elements in it (does not affect components font-sizes) .
--   **Headline-Font-Sizes** can be used to override the default mapping of the `h1` - `h6` tags.
+-   Use our provided **Body Font Sizes** to explicitly change the size of text elements like `<p>`, `<span>` etc.
+-   Use a **Body Font Size** for a container and all text elements in it (does not affect components font-sizes) .
+-   **Headline Font Sizes** can be used to override the default mapping of the `h1` - `h6` tags.
 -   _Advanced: use standardised *custom properties* to define `font-size` and `line-height` in your own components._
 
 ### Notes
 
-> -   Some sizes may stay the same because of screen-width or density.
+> -   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.
 
 ### How to include
@@ -48,7 +48,7 @@ Then you can use e.g. `sm` font-size by extending our SCSS placeholders like thi
 
 ### How to use
 
-The following options are recommended for applying **Body-Font-Sizes**:
+The following options are recommended for applying **Body Font Sizes**:
 
 -   CSS classes
 -   CSS data-attributes
@@ -71,7 +71,8 @@ All options (except the last one) set `font-size`, `line-height` and some **cust
 
 > **_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.
 
-All of the above options are available for applying the **Body-Font-Sizes** to HTML elements within custom components. In some cases it may make sense to set the `font-size` and `line-height` manually in the css.
+All of the above options are available for applying the **Body Font Sizes** to HTML elements within custom components.
+In some cases it may make sense to set the `font-size` and `line-height` manually in the css.
 
 **Please replace `XX` in the custom-properties with one of the sizes:**
 
diff --git a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx
index abb2ca37332..40c11780d0e 100644
--- a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx
+++ b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx
@@ -51,24 +51,24 @@ const ColorOverview = () => {
 
 	return (
 		<DefaultPage>
-			<h1>Fonts-Sizes Overview</h1>
+			<h1>Font Sizes Overview</h1>
 			<ol>
 				<li>
-					<b>Body-Font-Sizes</b>
+					<b>Body Font Sizes</b>
 				</li>
 				<li>
 					<b>Default Headlines H1 - H6</b>
 				</li>
 				<li>
-					<b>Available Headline-Font-Sizes</b>
+					<b>Available Headline Font Sizes</b>
 				</li>
 			</ol>
 			<DBInfotext data-font-size="md" semantic="informational">
-				<b>Note: </b>Some font-sizes are the same for a specific device
+				<b>Note: </b>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>
+			<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>,{' '}
@@ -124,7 +124,7 @@ const ColorOverview = () => {
 
 			<h2>Default Headlines H1 - H6</h2>
 			<p>
-				Certain <b>Headline-Font-Sizes</b> are mapped to the{' '}
+				Certain <b>Headline Font Sizes</b> are mapped to the{' '}
 				<b>headline tags (H1 - H6)</b> by default. Accordingly, it is
 				sufficient to use the native headline tags, as in this example.
 			</p>
@@ -173,7 +173,7 @@ const ColorOverview = () => {
 				))}
 			</DBSection>
 
-			<h2>Available Headline-Font-Sizes</h2>
+			<h2>Available Headline Font Sizes</h2>
 			<p>
 				This overview shows all <b>9 headline sizes</b> that are
 				available in foundations. These can be used, for example, to