diff --git a/ngx-fudis/projects/dev/src/app/app.component.html b/ngx-fudis/projects/dev/src/app/app.component.html
index 2655eaa2b..5a2864ba3 100644
--- a/ngx-fudis/projects/dev/src/app/app.component.html
+++ b/ngx-fudis/projects/dev/src/app/app.component.html
@@ -78,7 +78,7 @@
         <ng-template fudisContent type="expandable">
           <fudis-grid [columns]="1" [rowGap]="'xxl'">
             <fudis-grid [columns]="2">
-              <fudis-heading [level]="3" [size]="'xl'">Grid stuff!</fudis-heading>
+              <fudis-heading [level]="3" [variant]="'xl'">Grid stuff!</fudis-heading>
               <fudis-button
                 [label]="'Update Grid Service defaults'"
                 (handleClick)="updateGridServiceDefaults()"
diff --git a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html
index b94c49f9c..992cadee4 100644
--- a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html
+++ b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html
@@ -91,7 +91,7 @@
   <fudis-expandable [title]="'Autocomplete examples'">
     <ng-template fudisContent type="expandable">
       <fudis-grid [columns]="'inputLg'">
-        <fudis-heading [level]="3" [size]="'md'">Single-select dropdown</fudis-heading>
+        <fudis-heading [level]="3" [variant]="'md'">Single-select dropdown</fudis-heading>
         <!-- <fudis-autocomplete
           [label]="'Choose item'"
           [variant]="'dropdown'"
@@ -99,13 +99,15 @@
           [options]="multipleOptions"
           [control]="testFormGroup.controls['autocompleteDropdown']"
         /> -->
-        <fudis-heading [level]="3" [size]="'md'">Single-select search</fudis-heading>
+        <fudis-heading [level]="3" [variant]="'md'">Single-select search</fudis-heading>
         <!-- <fudis-autocomplete
           [label]="'Search item'"
           [options]="multipleOptions"
           [control]="testFormGroup.controls['autocompleteSearch']"
         /> -->
-        <fudis-heading [level]="3" [size]="'md'">Autocomplete multi-select dropdown</fudis-heading>
+        <fudis-heading [level]="3" [variant]="'md'"
+          >Autocomplete multi-select dropdown</fudis-heading
+        >
         <!-- <fudis-autocomplete-multi-select
           [label]="'Search and choose items'"
           [options]="multipleOptions"
diff --git a/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts b/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts
index cc93251a3..55e984526 100644
--- a/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts
+++ b/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
       >
       <fudis-dialog-content>
         <fudis-grid [marginTop]="'md'" [marginBottom]="'md'">
-          <fudis-heading [level]="3" [size]="'sm'">
+          <fudis-heading [level]="3" [variant]="'sm'">
             I am fudis-heading inside the grid taking the whole width
           </fudis-heading>
           <fudis-body-text>
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts
index f405ec4b2..0408a48e5 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts
@@ -103,13 +103,13 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
       [rowGap]="'xs'"
       [marginBottom]="'md'"
     >
-      <fudis-heading [level]="4" [size]="'sm'">Medium size buttons</fudis-heading>
+      <fudis-heading [level]="4" [variant]="'sm'">Medium size buttons</fudis-heading>
       <fudis-button variant="primary" label="Primary"></fudis-button>
       <fudis-button variant="secondary" label="Secondary"></fudis-button>
       <fudis-button variant="tertiary" label="Tertiary"></fudis-button>
       <fudis-button label="Disabled" [disabled]="true"></fudis-button>
 
-      <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+      <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
         >Medium size buttons with icon</fudis-heading
       >
       <fudis-button variant="primary" icon="search" label="Primary"></fudis-button>
@@ -117,7 +117,7 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
       <fudis-button variant="tertiary" icon="search" label="Tertiary"></fudis-button>
       <fudis-button label="Disabled" icon="search" [disabled]="true"></fudis-button>
 
-      <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+      <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
         >Small size buttons</fudis-heading
       >
       <fudis-button variant="primary" label="Primary" size="small"></fudis-button>
@@ -125,7 +125,7 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
       <fudis-button variant="tertiary" label="Tertiary" size="small"></fudis-button>
       <fudis-button label="Disabled" [disabled]="true" size="small"></fudis-button>
 
-      <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+      <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
         >Small size buttons with icons</fudis-heading
       >
       <fudis-button variant="primary" icon="search" label="Primary" size="small"></fudis-button>
@@ -133,7 +133,7 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
       <fudis-button variant="tertiary" icon="search" label="Tertiary" size="small"></fudis-button>
       <fudis-button label="Disabled" icon="search" [disabled]="true" size="small"></fudis-button>
 
-      <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+      <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
         >Medium sized buttons with label hidden</fudis-heading
       >
       <fudis-button
@@ -161,7 +161,7 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
         [disabled]="true"
       ></fudis-button>
 
-      <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+      <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
         >Small sized buttons with label hidden</fudis-heading
       >
       <fudis-button
@@ -193,7 +193,7 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
         size="small"
       ></fudis-button>
 
-      <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+      <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
         >Icon only sized buttons with label hidden</fudis-heading
       >
       <fudis-button
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts
index 2bcdee092..77553f824 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts
@@ -65,7 +65,7 @@ const DescriptionListTemplate: StoryFn<DescriptionListComponent> = (
   args: DescriptionListComponent,
 ) => ({
   props: args,
-  template: html` <fudis-heading [level]="2" [size]="'md'"
+  template: html` <fudis-heading [level]="2" [variant]="'md'"
       >{{variant==='regular' ? 'Regular' : 'Compact'}} Description List</fudis-heading
     >
     <fudis-dl [marginTop]="'sm'" [variant]="variant" [columns]="2" [disableGrid]="disableGrid">
@@ -113,7 +113,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
     quoteTwo: "Archimedes didn't know about continental drift!",
   },
   template: html`
-    <fudis-heading [level]="2" [size]="'md'"
+    <fudis-heading [level]="2" [variant]="'md'"
       >Nested Description Lists with Indiana Jones Movies</fudis-heading
     >
     <fudis-dl [marginTop]="'sm'" [disableGrid]="disableGrid">
@@ -229,7 +229,7 @@ const DescriptionListInsideGridTemplate: StoryFn<DescriptionListComponent> = (
 ) => ({
   props: args,
   template: html`<fudis-grid [columns]="{sm: 1, md: 2}" [rowGap]="'xs'">
-    <fudis-heading [level]="2" [size]="'md'"
+    <fudis-heading [level]="2" [variant]="'md'"
       >Description List as Grid's Child Component</fudis-heading
     >
     <fudis-dl [disableGrid]="disableGrid" [variant]="variant">
@@ -260,7 +260,7 @@ const NestedSubComponentsTemplate: StoryFn<DescriptionListComponent> = (
   args: DescriptionListComponent,
 ) => ({
   props: args,
-  template: html`<fudis-heading [level]="2" [size]="'md'"
+  template: html`<fudis-heading [level]="2" [variant]="'md'"
       >Description List With Sub Components</fudis-heading
     >
     <fudis-description-list
@@ -303,8 +303,9 @@ const WithLanguageBadgesTemplate: StoryFn<DescriptionListComponent> = (
   args: DescriptionListComponent,
 ) => ({
   props: args,
-  template: html`
-    <fudis-heading [level]="2" [size]="'md'">Description List With Language Badges</fudis-heading>
+  template: html`<fudis-heading [level]="2" [variant]="'md'"
+      >Description List With Language Badges</fudis-heading
+    >
     <fudis-description-list
       [marginTop]="'sm'"
       [disableGrid]="disableGrid"
@@ -338,8 +339,7 @@ const WithLanguageBadgesTemplate: StoryFn<DescriptionListComponent> = (
         <fudis-dd [lang]="'en'" [textContent]="'Return of the Jedi'"></fudis-dd>
       </fudis-description-list-item>
     </fudis-description-list>
-    <example-language-service-change-component />
-  `,
+    <example-language-service-change-component /> `,
 });
 
 export const WithLanguageBadges = WithLanguageBadgesTemplate.bind({});
@@ -373,7 +373,7 @@ const ItemWithMultipleDdElementsTemplate: StoryFn<DescriptionListComponent> = (
 ) => ({
   props: { ...args, data: multipleDDData },
   template: html`
-    <fudis-heading [level]="2" [size]="'md'"
+    <fudis-heading [level]="2" [variant]="'md'"
       >Description List Item With Multiple Details</fudis-heading
     >
     <fudis-description-list
@@ -411,7 +411,7 @@ const SingleListItemTemplate: StoryFn<DescriptionListComponent> = (
 ) => ({
   props: args,
   template: html`
-    <fudis-heading [level]="2" [size]="'md'">Description List with Single Item</fudis-heading>
+    <fudis-heading [level]="2" [variant]="'md'">Description List with Single Item</fudis-heading>
     <fudis-description-list
       [marginTop]="'sm'"
       [variant]="'regular'"
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts
index 60ec3ee1b..a3990cc1d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts
@@ -143,7 +143,7 @@ class DialogWithFormComponent {
         >
         <fudis-dialog-content>
           <fudis-grid [marginTop]="'md'" [marginBottom]="'md'">
-            <fudis-heading [level]="3" [size]="'sm'">
+            <fudis-heading [level]="3" [variant]="'sm'">
               I am fudis-heading inside the grid taking the whole width
             </fudis-heading>
             <fudis-body-text>
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts
index c5e899a31..2a7affee8 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts
@@ -18,7 +18,8 @@ import { FieldSetBaseDirective } from '../../../directives/form/fieldset-base/fi
 import { ActionsDirective } from '../../../directives/content-projection/actions/actions.directive';
 import { NotificationsDirective } from '../../../directives/content-projection/notifications/notifications.directive';
 import { FudisGridWidth, FudisGridAlign } from '../../../types/grid';
-import { FudisComponentChanges, FudisSpacing } from '../../../types/miscellaneous';
+import { FudisComponentChanges } from '../../../types/miscellaneous';
+import { FudisSpacing } from '../../../types/spacing';
 import { ContentDirective } from '../../../directives/content-projection/content/content.directive';
 import { FudisIdService } from '../../../services/id/id.service';
 import { FudisInternalErrorSummaryService } from '../../../services/form/error-summary/internal-error-summary.service';
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html
index ee7894f5e..3034e76cd 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html
@@ -22,7 +22,7 @@
               class="fudis-form__header__title__dialog"
               fudisDialogTitle
               [marginBottom]="'xs'"
-              [size]="titleSize"
+              [variant]="titleVariant"
               [level]="level"
               >{{ title
               }}<ng-container *ngIf="badge && badgeText">
@@ -35,7 +35,7 @@
             </fudis-heading>
           </ng-container>
           <ng-container *ngIf="!_dialogParent">
-            <fudis-heading [marginBottom]="'xs'" [size]="titleSize" [level]="level"
+            <fudis-heading [marginBottom]="'xs'" [variant]="titleVariant" [level]="level"
               >{{ title
               }}<ng-container *ngIf="badge && badgeText">
                 <fudis-badge
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts
index ad029217e..149ad1363 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts
@@ -32,8 +32,8 @@ import { LinkComponent } from '../../link/link.component';
   selector: 'fudis-mock-form-component',
   template: `<fudis-form
     [id]="'my-own-id'"
+    [titleVariant]="'md'"
     [level]="1"
-    [titleSize]="'md'"
     [title]="'Example Form'"
     [helpText]="'Some help for the form'"
     [badge]="badge"
@@ -162,7 +162,7 @@ describe('FormComponent', () => {
       expect(headingElement).toBeTruthy();
       expect(headingContent).toBeTruthy();
       expect(headingContent?.textContent).toEqual('Example Form');
-      expect(headingContent?.className).toContain('fudis-heading__size__md');
+      expect(headingContent?.className).toContain('fudis-heading__variant__md');
     });
 
     it('should have badge and badgeText if given', () => {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
index 6ed8f7328..2d4fad8ac 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
@@ -10,7 +10,7 @@ import {
   Optional,
   ViewEncapsulation,
 } from '@angular/core';
-import { FudisHeadingSize, FudisHeadingLevel } from '../../../types/typography';
+import { FudisHeadingVariant, FudisHeadingLevel } from '../../../types/typography';
 import { FudisIdService } from '../../../services/id/id.service';
 import { HeaderDirective } from '../../../directives/content-projection/header/header.directive';
 import { ActionsDirective } from '../../../directives/content-projection/actions/actions.directive';
@@ -75,7 +75,7 @@ export class FormComponent extends GridApiDirective implements OnInit, AfterCont
   /**
    * Heading size for the form title
    */
-  @Input() titleSize: FudisHeadingSize = 'xl';
+  @Input() titleVariant: FudisHeadingVariant = 'xl';
 
   /**
    * Help text positioned under form title
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx
index 6cd06f801..e1c6f7f43 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx
@@ -60,7 +60,9 @@ The complete list of allowed properties can be found from Properties table at th
 ### Heading
 
 Fudis Form is not valid without a heading.
-**Mandatory properties** are `title` (title text content) and `level` (the semantic heading level), additionally it is possible to change the visual size of the heading with `titleSize`, which otherwise defaults to `xl`.
+
+**Mandatory properties** are `title` (title text content) and `level` (the semantic heading level), additionally it is possible to change the visual size of the heading with `titleVariant`, which otherwise defaults to `xl`.
+
 See possible heading levels and sizes from [Heading Documentation](/docs/components-typography-heading--documentation).
 
 ### Badge
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts
index d3a4f1837..f4f88bc92 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts
@@ -18,10 +18,15 @@ import { FudisTranslationService } from '../../../services/translation/translati
 import { FudisFocusService } from '../../../services/focus/focus.service';
 import docs from './form.docs.mdx';
 import { FudisBadgeVariant } from '../../../types/miscellaneous';
-import { FudisHeadingLevel, FudisHeadingSize } from '../../../types/typography';
+import {
+  FudisHeadingLevel,
+  FudisHeadingVariant,
+  fudisHeadingLevelArray,
+} from '../../../types/typography';
 import { formExclude } from '../../../utilities/storybook';
 import { defaultOptions } from '../select/common/mock_data';
 import { FudisErrorSummaryService } from '../../../services/form/error-summary/error-summary.service';
+import { fudisSpacingArray } from '../../../types/spacing';
 
 @Component({
   selector: 'example-with-multiple-forms',
@@ -231,7 +236,7 @@ class ExampleWithMultipleFormsComponent {
       [badgeText]="badgeText"
       [level]="level"
       [title]="title"
-      [titleSize]="titleSize"
+      [titleVariant]="titleVariant"
       [helpText]="helpText"
       [errorSummaryLinkType]="errorSummaryLinkType"
       [errorSummaryHelpText]="errorSummaryHelpText"
@@ -395,8 +400,8 @@ class FormContentExampleComponent implements OnInit {
   ) {}
 
   @Input() title: string;
+  @Input() titleVariant: FudisHeadingVariant;
   @Input() level: FudisHeadingLevel;
-  @Input() titleSize: FudisHeadingSize;
   @Input() helpText: string;
   @Input() badge: FudisBadgeVariant;
   @Input() badgeText: string;
@@ -536,14 +541,14 @@ export default {
         type: 'text',
       },
     },
-    titleSize: {
-      options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
+    titleVariant: {
+      options: fudisSpacingArray,
       control: {
         type: 'select',
       },
     },
     level: {
-      options: [1, 2, 3, 4, 5, 6],
+      options: fudisHeadingLevelArray,
       control: {
         type: 'select',
       },
@@ -563,8 +568,8 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
   props: args,
   template: html` <example-form-content
     [title]="title"
+    [titleVariant]="titleVariant"
     [level]="level"
-    [titleSize]="titleSize"
     [helpText]="helpText"
     [badge]="badge"
     [badgeText]="badgeText"
@@ -576,8 +581,8 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
 
 Example.args = {
   title: 'Example Form Heading',
+  titleVariant: 'xl',
   level: 1,
-  titleSize: 'xl',
   helpText: 'This is an additional help text to give user more information about the form',
   badge: 'primary',
   badgeText: 'Example',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts
index 2e9288f46..a6951004d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts
@@ -48,7 +48,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
       <ng-template fudisContent type="section">
         <fudis-grid [columns]="{lg: 2}" [marginTop]="'sm'">
           <fudis-grid-item>
-            <fudis-heading [level]="2" [size]="'md'"
+            <fudis-heading [level]="2" [variant]="'md'"
               >Single-select Dropdown with Clear Button</fudis-heading
             >
             <fudis-select
@@ -74,7 +74,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
                 </fudis-select-group> </ng-template></fudis-select
           ></fudis-grid-item>
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Single-select Dropdown without Clear button</fudis-heading
             >
             <fudis-select
@@ -101,7 +101,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
           ></fudis-grid-item>
 
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Single-select Autocomplete Dropdown with Clear button</fudis-heading
             >
             <fudis-select
@@ -128,7 +128,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
           ></fudis-grid-item>
 
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Single-select Autocomplete Dropdown without Clear button</fudis-heading
             >
             <fudis-select
@@ -154,7 +154,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
                 </fudis-select-group> </ng-template></fudis-select
           ></fudis-grid-item>
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Single-select Autocomplete Type with Clear button</fudis-heading
             >
             <fudis-select
@@ -181,7 +181,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
           ></fudis-grid-item>
 
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Single-select Autocomplete Type without Clear button</fudis-heading
             >
             <fudis-select
@@ -240,7 +240,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
       <ng-template fudisContent type="section">
         <fudis-grid [columns]="{lg: 2}" [marginTop]="'sm'">
           <fudis-grid-item>
-            <fudis-heading [level]="2" [size]="'md'"
+            <fudis-heading [level]="2" [variant]="'md'"
               >Multiselect Dropdown with Clear Button</fudis-heading
             >
             <fudis-multiselect
@@ -269,7 +269,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
                 </fudis-multiselect-group> </ng-template></fudis-multiselect
           ></fudis-grid-item>
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Multiselect Dropdown without Clear button</fudis-heading
             >
             <fudis-multiselect
@@ -299,7 +299,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
           ></fudis-grid-item>
 
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Multiselect Autocomplete Dropdown with Clear button</fudis-heading
             >
             <fudis-multiselect
@@ -329,7 +329,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
           ></fudis-grid-item>
 
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Multiselect Autocomplete Dropdown without Clear button</fudis-heading
             >
             <fudis-multiselect
@@ -358,7 +358,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
                 </fudis-multiselect-group> </ng-template></fudis-multiselect
           ></fudis-grid-item>
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Multiselect Autocomplete Type with Clear button</fudis-heading
             >
             <fudis-multiselect
@@ -388,7 +388,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
           ></fudis-grid-item>
 
           <fudis-grid-item
-            ><fudis-heading [level]="2" [size]="'md'"
+            ><fudis-heading [level]="2" [variant]="'md'"
               >Multiselect Autocomplete Type without Clear button</fudis-heading
             >
             <fudis-multiselect
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.stories.ts
index 55c2439fb..7ca24342c 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.stories.ts
@@ -39,7 +39,7 @@ import { FudisGridAlign, FudisGridProperties } from '../../../types/grid';
         [rowGap]="'sm'"
         [classes]="['storybook__wrapper-border']"
       >
-        <fudis-heading [level]="3" [size]="'md'"
+        <fudis-heading [level]="3" [variant]="'md'"
           >Listen to Service Columns but not AlignItemsX</fudis-heading
         >
         <fudis-body-text class="storybook__item"
@@ -54,7 +54,7 @@ import { FudisGridAlign, FudisGridProperties } from '../../../types/grid';
         >
       </fudis-grid>
       <fudis-grid [columns]="2" [classes]="['storybook__wrapper-border']">
-        <fudis-heading [level]="3" [size]="'md'"
+        <fudis-heading [level]="3" [variant]="'md'"
           >Listen to Service's AlignItemsX but not Columns</fudis-heading
         >
         <fudis-body-text class="storybook__item"
@@ -69,7 +69,7 @@ import { FudisGridAlign, FudisGridProperties } from '../../../types/grid';
       </fudis-grid>
 
       <fudis-grid [serviceDefaults]="false" [classes]="['storybook__wrapper-border']">
-        <fudis-heading [level]="3" [size]="'md'">Service Defaults are turned of</fudis-heading>
+        <fudis-heading [level]="3" [variant]="'md'">Service Defaults are turned of</fudis-heading>
         <fudis-body-text class="storybook__item"
           >This Grid has no set alignItemsX value, and it is ignoring defaults from
           Service!</fudis-body-text
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx
index 1e3018210..5e92a75f2 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx
@@ -15,7 +15,8 @@ Section has two main areas: header and content. Inside header, addition to headi
 
 ### Header
 
-Each Section should be identified, therefore `title` is mandatory property which can be modified with `titleSize` and `level` properties. As in [Heading Component](/docs/components-typography-heading--documentation), size is visual and level is semantic adjustment.
+Each Section should be identified, therefore `title` is mandatory property which can be modified with `titleVariant` and `level` properties. As in [Heading Component](/docs/components-typography-heading--documentation), size is visual and level is semantic adjustment.
+
 Heading can also include `tooltip` with all the [Tooltip](/docs/directives-tooltip--documentation) Inputs available.
 
 #### Notifications and Actions
@@ -58,7 +59,7 @@ If you have Section inside Section, and the nested one has Actions-content but p
   code={`
 <fudis-section
   [title]="'Parent Section'"
-  [titleSize]="'lg'"
+  [titleVariant]="'lg'"
   [level]="2"
   >
   // Empty Actions template, so that nested Actions will not be rendered to the parent!
@@ -66,7 +67,7 @@ If you have Section inside Section, and the nested one has Actions-content but p
   <ng-template fudisContent [type]="'section'">
     <fudis-section
       [title]="'Nested Section'"
-      [titleSize]="'md'"
+      [titleVariant]="'md'"
       [level]="3" >
       <ng-template fudisActions [type]="'section'">
         <fudis-button [label]="'Nested Action button'"/>
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html
index 35d4e496d..baae53c68 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.html
@@ -15,7 +15,7 @@
   <div class="fudis-section__header" [id]="_headingId">
     <div class="fudis-section__header__container">
       <div class="fudis-section__header__heading">
-        <fudis-heading [marginBottom]="'none'" [level]="level" [size]="titleSize"
+        <fudis-heading [marginBottom]="'none'" [level]="level" [variant]="titleVariant"
           >{{ title
           }}<ng-container *ngIf="badge && badgeText">
             <fudis-badge
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts
index b8f098fbd..85c01c00a 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts
@@ -20,9 +20,9 @@ import { TooltipDirective } from '../../directives/tooltip/tooltip.directive';
 import { FudisTooltipPosition } from '../../types/miscellaneous';
 import {
   FudisHeadingLevel,
-  FudisHeadingSize,
+  FudisHeadingVariant,
   fudisHeadingLevelArray,
-  fudisHeadingSizeArray,
+  fudisHeadingVariantArray,
 } from '../../types/typography';
 import { getElement, sortClasses } from '../../utilities/tests/utilities';
 
@@ -30,7 +30,7 @@ import { getElement, sortClasses } from '../../utilities/tests/utilities';
   selector: 'mock-fudis-section',
   template: `<fudis-section
     [title]="title"
-    [titleSize]="titleSize"
+    [titleVariant]="titleVariant"
     [level]="level"
     [classes]="classes"
     [tooltip]="tooltip"
@@ -52,7 +52,7 @@ import { getElement, sortClasses } from '../../utilities/tests/utilities';
 })
 class MockFudisSectionComponent {
   title: string = 'This is section title';
-  titleSize: FudisHeadingSize = 'lg';
+  titleVariant: FudisHeadingVariant = 'lg';
   level: FudisHeadingLevel = 2;
   classes: string[];
   tooltip: string = 'This is tooltip in section';
@@ -99,13 +99,13 @@ describe('SectionComponent', () => {
     return sectionEl;
   }
 
-  function sectionTitleSizeCheck(size: FudisHeadingSize): void {
-    mockComponent.titleSize = size;
+  function sectionTitleVariantCheck(variant: FudisHeadingVariant): void {
+    mockComponent.titleVariant = variant;
     mockFixture.detectChanges();
 
     const sectionHeadingEl = getElement(mockFixture, '.fudis-heading') as HTMLHeadingElement;
 
-    expect(sectionHeadingEl.className).toContain(`fudis-heading__size__${size}`);
+    expect(sectionHeadingEl.className).toContain(`fudis-heading__variant__${variant}`);
   }
 
   function sectionTitleLevelCheck(level: FudisHeadingLevel): void {
@@ -160,9 +160,9 @@ describe('SectionComponent', () => {
       expect(headingElement?.textContent).toEqual('This is section title');
     });
 
-    it('should return correct title size', () => {
-      fudisHeadingSizeArray.forEach((size) => {
-        sectionTitleSizeCheck(size);
+    it('should return correct title variant', () => {
+      fudisHeadingVariantArray.forEach((variant) => {
+        sectionTitleVariantCheck(variant);
       });
     });
 
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
index 09df861fe..010ab6fcf 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
@@ -10,13 +10,14 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { FudisIdService } from '../../services/id/id.service';
-import { FudisHeadingSize, FudisHeadingLevel } from '../../types/typography';
+import { FudisHeadingVariant, FudisHeadingLevel } from '../../types/typography';
 import { NotificationsDirective } from '../../directives/content-projection/notifications/notifications.directive';
 import { ContentDirective } from '../../directives/content-projection/content/content.directive';
 import { FudisGridWidth, FudisGridAlign } from '../../types/grid';
 
 import { TooltipApiDirective } from '../../directives/tooltip/tooltip-api.directive';
-import { FudisBadgeVariant, FudisComponentChanges, FudisSpacing } from '../../types/miscellaneous';
+import { FudisComponentChanges, FudisBadgeVariant } from '../../types/miscellaneous';
+import { FudisSpacing } from '../../types/spacing';
 import { FudisInternalErrorSummaryService } from '../../services/form/error-summary/internal-error-summary.service';
 import { FudisFormErrorSummarySection } from '../../types/forms';
 import { ActionsDirective } from '../../directives/content-projection/actions/actions.directive';
@@ -71,7 +72,7 @@ export class SectionComponent extends TooltipApiDirective implements OnInit, OnC
   /**
    * Heading size for the section title
    */
-  @Input() titleSize: FudisHeadingSize = 'lg';
+  @Input() titleVariant: FudisHeadingVariant = 'lg';
 
   /**
    * Add badge to the section title
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts
index a2069fb7c..b4f02711d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts
@@ -4,7 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SectionComponent } from './section.component';
 import docs from './section-docs.mdx';
 import { excludeAllRegex, sectionExclude } from '../../utilities/storybook';
-import { fudisHeadingLevelArray, fudisHeadingSizeArray } from '../../types/typography';
+import { fudisHeadingLevelArray, fudisHeadingVariantArray } from '../../types/typography';
 
 export default {
   title: 'Components/Section',
@@ -38,8 +38,8 @@ export default {
       options: fudisHeadingLevelArray,
       control: { type: 'select' },
     },
-    titleSize: {
-      options: fudisHeadingSizeArray,
+    titleVariant: {
+      options: fudisHeadingVariantArray,
       control: { type: 'select' },
     },
   },
@@ -51,7 +51,7 @@ const ExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent) => (
   props: args,
   template: html`<fudis-section
     [title]="title"
-    [titleSize]="titleSize"
+    [titleVariant]="titleVariant"
     [level]="level"
     [badge]="badge"
     [badgeText]="badgeText"
@@ -86,8 +86,8 @@ const ExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent) => (
 export const Example = ExampleTemplate.bind({});
 Example.args = {
   title: 'This is title of section',
+  titleVariant: 'xl',
   level: 2,
-  titleSize: 'xl',
   tooltip: 'More info about this section',
   tooltipToggle: false,
   tooltipPosition: 'below',
@@ -109,7 +109,7 @@ const NestedExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent
   props: args,
   template: html`<fudis-section
     [title]="'Parent Section'"
-    [titleSize]="'lg'"
+    [titleVariant]="'lg'"
     [level]="2"
     [width]="'md'"
   >
@@ -122,7 +122,12 @@ const NestedExampleTemplate: StoryFn<SectionComponent> = (args: SectionComponent
         Actions is not rendered there.</fudis-body-text
       >
 
-      <fudis-section [title]="'Nested Section'" [marginTop]="'sm'" [titleSize]="'sm'" [level]="3">
+      <fudis-section
+        [title]="'Nested Section'"
+        [marginTop]="'sm'"
+        [titleVariant]="'sm'"
+        [level]="3"
+      >
         <ng-template fudisActions [type]="'section'">
           <fudis-button [label]="'Nested Action button'" />
         </ng-template>
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts
index f63768bea..f859df8f9 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts
@@ -7,8 +7,7 @@ import {
   Optional,
   Host,
 } from '@angular/core';
-import { FudisBodyText } from '../../../types/typography';
-import { FudisTextAlign } from '../../../types/miscellaneous';
+import { FudisBodyText, FudisTextAlign } from '../../../types/typography';
 import { DialogComponent } from '../../dialog/dialog.component';
 
 @Component({
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss
index d68ce90c5..182ef8519 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss
@@ -7,7 +7,7 @@
   box-sizing: border-box;
   margin-top: 0;
 
-  &__size {
+  &__variant {
     &__xxs {
       @include typography.heading-xxs;
     }
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts
index ebe721a59..db89ad345 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts
@@ -2,17 +2,13 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { HeadingComponent } from './heading.component';
 import {
-  FudisHeadingSize,
+  FudisHeadingVariant,
   FudisHeadingLevel,
   fudisHeadingLevelArray,
-  fudisHeadingSizeArray,
+  fudisHeadingVariantArray,
 } from '../../../types/typography';
-import {
-  FudisTextAlign,
-  FudisSpacing,
-  fudisSpacingArray,
-  fudisTextAlignArray,
-} from '../../../types/miscellaneous';
+import { FudisSpacing, fudisSpacingArray } from '../../../types/spacing';
+import { FudisTextAlign, fudisTextAlignArray } from '../../../types/typography';
 
 describe('HeadingComponent', () => {
   let component: HeadingComponent;
@@ -46,25 +42,25 @@ describe('HeadingComponent', () => {
   }
 
   function headingCheck(
-    size: FudisHeadingSize,
+    variant: FudisHeadingVariant,
     align: FudisTextAlign,
     marginBottom: FudisSpacing,
     level: FudisHeadingLevel,
   ): void {
-    const sizeBefore = component.size;
+    const variantBefore = component.variant;
     const marginBefore = component.marginBottom;
     const levelBefore = component.level;
     const alignBefore = component.align;
 
-    component.size = size;
+    component.variant = variant;
     component.marginBottom = marginBottom;
     component.level = level;
     component.align = align;
 
     component.ngOnChanges({
-      size: {
-        previousValue: sizeBefore,
-        currentValue: size,
+      variant: {
+        previousValue: variantBefore,
+        currentValue: variant,
         firstChange: false,
         isFirstChange: () => {
           return false;
@@ -99,7 +95,7 @@ describe('HeadingComponent', () => {
     fixture.detectChanges();
 
     assertHeadingHasClasses(
-      `fudis-heading fudis-heading__align__${align} fudis-heading__size__${size} fudis-mb-${marginBottom}`,
+      `fudis-heading fudis-heading__align__${align} fudis-heading__variant__${variant} fudis-mb-${marginBottom}`,
       level,
     );
   }
@@ -109,19 +105,19 @@ describe('HeadingComponent', () => {
   });
 
   describe('CSS classes', () => {
-    it('should have respective size, margin bottom and level values according to given Inputs', () => {
+    it('should have respective variant, margin bottom and level values according to given Inputs', () => {
       fudisHeadingLevelArray.forEach((level) => {
-        fudisHeadingSizeArray.forEach((size) => {
+        fudisHeadingVariantArray.forEach((variant) => {
           fudisTextAlignArray.forEach((alignment) => {
             fudisSpacingArray.forEach((spacing) => {
-              headingCheck(size, alignment, spacing, level);
+              headingCheck(variant, alignment, spacing, level);
             });
           });
         });
       });
     });
 
-    it('should have respective default size and margin bottom defined by the level', () => {
+    it('should have respective default variant and margin bottom defined by the level', () => {
       fudisHeadingLevelArray.forEach((level) => {
         const levelBefore = component.level;
 
@@ -140,32 +136,32 @@ describe('HeadingComponent', () => {
 
         fixture.detectChanges();
 
-        let sizeClass = '';
+        let variantClass = '';
 
         let marginBottom = '';
 
         if (level == 1) {
-          sizeClass = 'xxl';
+          variantClass = 'xxl';
         } else if (level == 2) {
-          sizeClass = 'xl';
+          variantClass = 'xl';
         } else if (level == 3) {
-          sizeClass = 'lg';
+          variantClass = 'lg';
         } else if (level == 4) {
-          sizeClass = 'md';
+          variantClass = 'md';
         } else if (level == 5) {
-          sizeClass = 'sm';
+          variantClass = 'sm';
         } else if (level == 6) {
-          sizeClass = 'xs';
+          variantClass = 'xs';
         }
 
-        if (sizeClass === 'xxl' || sizeClass === 'xl') {
+        if (variantClass === 'xxl' || variantClass === 'xl') {
           marginBottom = 'sm';
         } else {
           marginBottom = 'xs';
         }
 
         assertHeadingHasClasses(
-          `fudis-heading fudis-heading__align__left fudis-heading__size__${sizeClass} fudis-mb-${marginBottom}`,
+          `fudis-heading fudis-heading__align__left fudis-heading__variant__${variantClass} fudis-mb-${marginBottom}`,
           level,
         );
       });
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts
index 01e8bd8b3..0c7fccfd9 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts
@@ -6,9 +6,11 @@ import {
   OnChanges,
   ElementRef,
 } from '@angular/core';
-import { FudisHeadingLevel, FudisHeadingSize } from '../../../types/typography';
+import { FudisHeadingLevel, FudisHeadingVariant } from '../../../types/typography';
 import { FudisIdService } from '../../../services/id/id.service';
-import { FudisComponentChanges, FudisSpacing, FudisTextAlign } from '../../../types/miscellaneous';
+import { FudisComponentChanges } from '../../../types/miscellaneous';
+import { FudisTextAlign } from '../../../types/typography';
+import { FudisSpacing } from '../../../types/spacing';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
@@ -34,9 +36,9 @@ export class HeadingComponent implements OnInit, OnChanges {
   @Input({ required: true }) level: FudisHeadingLevel;
 
   /**
-   * Heading size
+   * Heading variant
    */
-  @Input() size: FudisHeadingSize;
+  @Input() variant: FudisHeadingVariant;
 
   /**
    * Margin bottom for heading
@@ -66,17 +68,18 @@ export class HeadingComponent implements OnInit, OnChanges {
   /**
    * Get default marginBottom size
    */
-  private _getMarginBottom(size: FudisHeadingSize): FudisSpacing {
-    if (size === 'xxl' || size === 'xl') {
+  private _getMarginBottom(variant: FudisHeadingVariant): FudisSpacing {
+    if (variant === 'xxl' || variant === 'xl') {
       return 'sm';
     }
+
     return 'xs';
   }
 
   /**
-   * Get corresponding default size for a heading level
+   * Get corresponding default variant for a heading level
    */
-  private _getSize(): FudisHeadingSize {
+  private _getVariant(): FudisHeadingVariant {
     switch (this.level) {
       case 1:
         return 'xxl';
@@ -99,13 +102,13 @@ export class HeadingComponent implements OnInit, OnChanges {
    * Set CSS classes for heading
    */
   private _setClasses(): void {
-    const calcSize = this.size || this._getSize();
+    const calcVariant = this.variant || this._getVariant();
 
-    const calcMarginBottom = this.marginBottom || this._getMarginBottom(calcSize);
+    const calcMarginBottom = this.marginBottom || this._getMarginBottom(calcVariant);
 
     const newClasses = [
       `fudis-heading`,
-      `fudis-heading__size__${calcSize}`,
+      `fudis-heading__variant__${calcVariant}`,
       `fudis-mb-${calcMarginBottom}`,
       `fudis-heading__align__${this.align}`,
     ];
@@ -122,7 +125,7 @@ export class HeadingComponent implements OnInit, OnChanges {
   ngOnChanges(changes: FudisComponentChanges<HeadingComponent>): void {
     if (
       changes.align?.currentValue !== changes.align?.previousValue ||
-      changes.size?.currentValue !== changes.size?.previousValue ||
+      changes.variant?.currentValue !== changes.variant?.previousValue ||
       changes.marginBottom?.currentValue !== changes.marginBottom?.previousValue ||
       changes.level?.currentValue !== changes.level?.previousValue
     ) {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts
index a52dd8566..252cb76bb 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts
@@ -2,6 +2,8 @@ import { StoryFn, Meta } from '@storybook/angular';
 import { HeadingComponent } from './heading.component';
 import readme from './readme.mdx';
 import { headingControlsExclude } from '../../../utilities/storybook';
+import { fudisHeadingLevelArray, fudisHeadingVariantArray } from '../../../types/typography';
+import { fudisSpacingArray } from '../../../types/spacing';
 
 const html = String.raw;
 
@@ -15,20 +17,20 @@ export default {
   },
   argTypes: {
     level: {
-      options: [1, 2, 3, 4, 5, 6],
+      options: fudisHeadingLevelArray,
       control: { type: 'select' },
     },
-    size: { options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] },
+    variant: { options: fudisHeadingVariantArray, control: { type: 'select' } },
     align: { options: ['left', 'right', 'center'] },
-    marginBottom: { options: ['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] },
+    marginBottom: { options: fudisSpacingArray },
   },
 } as Meta;
 
 const Template: StoryFn = (args) => ({
   props: args,
   template: html`
-    <fudis-heading [level]="level" [size]="size" [marginBottom]="marginBottom" [align]="align"
-      >This is Fudis heading. Size is: '{{size}}' and rendered element is:
+    <fudis-heading [level]="level" [variant]="variant" [marginBottom]="marginBottom" [align]="align"
+      >This is Fudis heading. Variant is: '{{variant}}' and rendered element is:
       'h{{level}}'</fudis-heading
     >
   `,
@@ -37,7 +39,7 @@ const Template: StoryFn = (args) => ({
 export const Example = Template.bind({});
 Example.args = {
   level: 1,
-  size: 'lg',
+  variant: 'lg',
   align: 'left',
   marginBottom: 'xs',
 };
@@ -51,14 +53,14 @@ Example.parameters = {
 export const AllVariants: StoryFn<HeadingComponent> = (args: HeadingComponent) => ({
   props: args,
   template: html`
-    <fudis-grid>
+    <fudis-grid [rowGap]="'sm'">
       <fudis-heading [level]="1">This is Fudis heading: xxl</fudis-heading>
       <fudis-heading [level]="2">This is Fudis heading: xl</fudis-heading>
       <fudis-heading [level]="3">This is Fudis heading: lg</fudis-heading>
       <fudis-heading [level]="4">This is Fudis heading: md</fudis-heading>
       <fudis-heading [level]="5">This is Fudis heading: sm</fudis-heading>
       <fudis-heading [level]="6">This is Fudis heading: xs</fudis-heading>
-      <fudis-heading [level]="6" [size]="'xxs'">This is Fudis heading: xxs</fudis-heading>
+      <fudis-heading [level]="6" [variant]="'xxs'">This is Fudis heading: xxs</fudis-heading>
     </fudis-grid>
   `,
 });
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/readme.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/readme.mdx
index 92710fb68..5d84884f9 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/readme.mdx
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/readme.mdx
@@ -10,21 +10,21 @@ Heading Component is essentially a heading HTML element which inherits Fudis fon
 
 ## Usage Guidelines
 
-### Semantic HTML Heading Level and Visible Size
+### Semantic HTML Heading Level and Visible Variant
 
-There are six heading options available from `1` to `6` and seven size options from `xxs` to `xxl`.
+There are six heading options available from `1` to `6` and seven variant options from `xxs` to `xxl`.
 
 The `level` input property determines which HTML element component renders. With `level=1` component renders a `h1` element and with `level=2` a `h2` element and so on.
 
-When no `size` input value is provided, all of the heading levels have default sizes, where heading level `1` defaults to size `xxl`, heading level `2` defaults to size `xl` etc. However, heading sizes are responsive and on mobile devices where screen size is less than [breakpoint('sm')](/docs/foundations-breakpoints--documentation#breakpoint-mixins) all of the headings are converted to a smaller heading sizes.
+When no `variant` input value is provided, all of the heading levels have default variants, where heading level `1` defaults to variant `xxl`, heading level `2` defaults to variant `xl` etc. However, heading variants are responsive and on mobile devices where screen size is less than [breakpoint('sm')](/docs/foundations-breakpoints--documentation#breakpoint-mixins) all of the headings are converted to a smaller heading variant.
 
 More information about typography can be found from [Foundations/Typography](/docs/foundations-typography--documentation)
 
 ## Examples
 
-Note! When heading `size` is set, heading `level` does not have any effect to the size property, i.e `level` is only essential for screen readers and other assistive technologies.
+Note! When heading `variant` is set, heading `level` does not have any effect to the variant property, i.e `level` is only essential for screen readers and other assistive technologies.
 
-Size is opted to be modified as wanted with `size` property as follows.
+Variant is opted to be modified as wanted with `variant` property as follows.
 
 <Canvas of={HeadingStories.AllVariants}></Canvas>
 
@@ -33,7 +33,7 @@ Size is opted to be modified as wanted with `size` property as follows.
 - Heading color `#484848` passes WCAG AAA requirement against white `#FFFFFF` background
   - Contrast ratio 9.1:1
 - Semantically it is important to use correct heading level respective to the context
-  - Header size can be visually modified
+  - Header variant can be visually modified
 
 ## Properties
 
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts
index f134ee62d..125031f66 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts
@@ -6,7 +6,7 @@ import {
   FudisGridAlignItems,
   FudisGridColumns,
 } from '../../../types/grid';
-import { FudisSpacing } from '../../../types/miscellaneous';
+import { FudisSpacing } from '../../../types/spacing';
 
 @Directive({
   selector: '[fudisGridApi]',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.spec.ts
index 443bb3c59..9f1719f57 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.spec.ts
@@ -16,7 +16,7 @@ import { FudisGridService } from '../../../services/grid/grid.service';
 import { FudisBreakpointService } from '../../../services/breakpoint/breakpoint.service';
 import { GridApiDirective } from '../grid-api/grid-api.directive';
 import { GridDirective } from './grid.directive';
-import { FudisSpacing } from '../../../types/miscellaneous';
+import { FudisSpacing } from '../../../types/spacing';
 
 @Component({
   selector: 'fudis-mock-grid-directive',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts
index 67af2c8d6..9f8fd5848 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts
@@ -1,6 +1,6 @@
 import { Directive, Input } from '@angular/core';
 import { FudisSpacingResponsive } from '../../../types/spacing';
-import { FudisSpacing } from '../../../types/miscellaneous';
+import { FudisSpacing } from '../../../types/spacing';
 
 @Directive({
   selector: '[fudisApiSpacing]',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/dialog/dialog.service.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/dialog/dialog.service.spec.ts
index e6481fd43..73e6ed886 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/services/dialog/dialog.service.spec.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/dialog/dialog.service.spec.ts
@@ -25,7 +25,7 @@ import { AlertGroupComponent } from '../../components/alert/alert-group/alert-gr
     <fudis-dialog [size]="'lg'">
       <fudis-heading fudisDialogTitle [level]="2">Dialog Heading</fudis-heading>
       <fudis-dialog-content>
-        <fudis-heading [level]="3" [size]="'sm'">Content heading</fudis-heading>
+        <fudis-heading [level]="3" [variant]="'sm'">Content heading</fudis-heading>
         <fudis-body-text>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis porttitor nunc. Nunc
           vehicula ut massa non facilisis.
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts
index 8a86442eb..1689a4878 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts
@@ -1,4 +1,4 @@
-import { FudisSpacing } from './miscellaneous';
+import { FudisSpacing } from './spacing';
 
 type FudisBreakpointsMinWidths = {
   [key in FudisBreakpointKey]: FudisBreakpointBoundary;
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts
index 0f8011846..6ae0a1636 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts
@@ -1,5 +1,5 @@
 import { FudisBreakpointKey, FudisBreakpointValueResponsive } from './breakpoints';
-import { FudisSpacing } from './miscellaneous';
+import { FudisSpacing } from './spacing';
 
 /**
  * -------------------------------------------
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts
index 300713043..abb1aec18 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts
@@ -44,18 +44,10 @@ export type FudisDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'initial';
 
 export type FudisExpandableType = 'regular' | 'lite';
 
-export const fudisSpacingArray = ['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
-
-export type FudisSpacing = (typeof fudisSpacingArray)[number];
-
 export type FudisNotification = 'warning' | 'danger' | 'success' | 'info';
 
 export type FudisTooltipPosition = 'left' | 'right' | 'above' | 'below';
 
-export const fudisTextAlignArray = ['left', 'right', 'center'] as const;
-
-export type FudisTextAlign = (typeof fudisTextAlignArray)[number];
-
 export type FudisLanguageAbbr = 'fi' | 'sv' | 'en';
 
 export type FudisLinkColor = 'primary-dark' | 'gray-dark' | 'white';
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts
index 87cc1f0c5..b0684d254 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts
@@ -1,7 +1,10 @@
 import { FudisBreakpointKey, FudisBreakpointValueResponsive } from './breakpoints';
-import { FudisSpacing } from './miscellaneous';
 import { convertToRemValue } from '../utilities/rem-converter';
 
+export const fudisSpacingArray = ['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+
+export type FudisSpacing = (typeof fudisSpacingArray)[number];
+
 /**
  * Responsive settings for different breakpoints for spacing
  */
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts
index a29cc2014..98cfbb8b1 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts
@@ -2,9 +2,9 @@ export const fudisHeadingLevelArray = [1, 2, 3, 4, 5, 6] as const;
 
 export type FudisHeadingLevel = (typeof fudisHeadingLevelArray)[number];
 
-export const fudisHeadingSizeArray = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+export const fudisHeadingVariantArray = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
 
-export type FudisHeadingSize = (typeof fudisHeadingSizeArray)[number];
+export type FudisHeadingVariant = (typeof fudisHeadingVariantArray)[number];
 
 export const fudisBodyTextArray = [
   'lg-regular',
@@ -15,3 +15,7 @@ export const fudisBodyTextArray = [
 ] as const;
 
 export type FudisBodyText = (typeof fudisBodyTextArray)[number];
+
+export const fudisTextAlignArray = ['left', 'right', 'center'] as const;
+
+export type FudisTextAlign = (typeof fudisTextAlignArray)[number];
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts b/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts
index ff9a48006..3e17ff11a 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts
@@ -6,7 +6,7 @@ import {
   fudisBreakpointsMinWidth,
 } from '../../types/breakpoints';
 import { FudisGridColumnsResponsive } from '../../types/grid';
-import { FudisSpacing } from '../../types/miscellaneous';
+import { FudisSpacing } from '../../types/spacing';
 import { FudisSpacingResponsive, fudisSpacingValues } from '../../types/spacing';
 
 // TODO: Write tests and possible missing/extra internal documentation about these functions
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/utilities/storybook.ts b/ngx-fudis/projects/ngx-fudis/src/lib/utilities/storybook.ts
index 4bf1d82fb..0bfb90ea9 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/utilities/storybook.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/utilities/storybook.ts
@@ -60,14 +60,14 @@ export const buttonIconOnlyExclude: RegExp = excludeRegex([...buttonCommonExclud
 export const checkboxGroupExclude: RegExp = excludeRegex([
   'groupBlurredOut',
   'setGroupBlurredOut',
-  'titleSize',
+  'titleVariant',
   'triggerEmit',
 ]);
 
 export const checkboxGroupControlsExclude: RegExp = excludeRegex([
   'groupBlurredOut',
   'setGroupBlurredOut',
-  'titleSize',
+  'titleVariant',
   'id',
   'formGroup',
   'triggerEmit',
diff --git a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Chrome-Big-Landscape-linux.png b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Chrome-Big-Landscape-linux.png
index 8a030e553..846aca9db 100644
Binary files a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Chrome-Big-Landscape-linux.png and b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Chrome-Big-Landscape-linux.png differ
diff --git a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Safari-Big-Landscape-linux.png b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Safari-Big-Landscape-linux.png
index 3eb8648fb..c19b0da34 100644
Binary files a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Safari-Big-Landscape-linux.png and b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-Mobile-Safari-Big-Landscape-linux.png differ
diff --git a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-chromium-linux.png b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-chromium-linux.png
index 60ee67548..342fca688 100644
Binary files a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-chromium-linux.png and b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-chromium-linux.png differ
diff --git a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-firefox-linux.png b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-firefox-linux.png
index 438a9c4f1..f08dea0d4 100644
Binary files a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-firefox-linux.png and b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-firefox-linux.png differ
diff --git a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-webkit-linux.png b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-webkit-linux.png
index 7cbefe417..9272b2a38 100644
Binary files a/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-webkit-linux.png and b/test/visual-regression/heading.spec.ts-snapshots/all-variants-1-webkit-linux.png differ