change(docusaurus, fonts): documented font letter spacing modification

- Modified letter spacing to use 1%, 1.5% positive and negative values after looking at figma implementation
  and docusaurus documentation
- Added information about the line height used by headers which is different from the body text
- Modified font sizes with the latest values
- Added font size also in px so easier understanding of values as opposed to rem values
- Modified fluid font sizes now that we no longer have values higher than 2.75rem
- Modified font family stack of docusaurus to include Arial fallback as described in the typography
  section
- Use tiny class for 12px small text in line with our tiny class from Semantic

theme/themes/eea/tokens/fonts.less

@@ -16,25 +16,24 @@
 @font-lineheight-5: 2;
 @font-letterspacing-000: -.02em;
 @font-letterspacing-00: -.015em;
-@font-letterspacing-0: -.005em;
-@font-letterspacing-1: .005em;
+@font-letterspacing-0: -.01em;
+@font-letterspacing-1: .01em;
 @font-letterspacing-2: .015em;
 @font-letterspacing-3: .02em;
 @font-letterspacing-4: .075em;
 @font-letterspacing-5: .15em;
 @font-size-00: .75rem;
-@font-size-0: .875rem;
-@font-size-1: 1rem;
-@font-size-2: 1.125rem;
-@font-size-3: 1.25rem;
-@font-size-4: 1.5rem;
-@font-size-5: 1.625rem;
-@font-size-6: 1.875rem;
-@font-size-7: 2rem;
-@font-size-8: 2.25rem;
-@font-size-9: 2.5rem;
+@font-size-0:  .875rem;
+@font-size-1:  1rem;
+@font-size-2:  1.125rem;
+@font-size-3:  1.25rem;
+@font-size-4:  1.5rem;
+@font-size-5:  1.625rem;
+@font-size-6:  1.875rem;
+@font-size-7:  2rem;
+@font-size-8:  2.25rem;
+@font-size-9:  2.5rem;
 @font-size-10: 2.75rem;
-@font-size-11: 3rem;
 @font-size-fluid-0: clamp(1.125rem, 2vw, 1.25rem);
 @font-size-fluid-1: clamp(1.25rem, 4vw, 1.625rem);
 @font-size-fluid-2: clamp(1.5rem, 6vw, 2rem);

website/docs/webdev/3-Guidelines/1-typography.mdx

@@ -29,6 +29,10 @@ We can use weights starting from 300 (Light) up to 700 (Bold). Usually, the bold
 Line spacing is commonly measured as a percentage of font size. Conventional wisdom is that line spacing of 130%-150% is ideal for readability. In fact, anything from about 120% up to 200% is acceptable, 
 but 150% tends to be the most quoted sweet spot (and a WCAG recommendation). You should experiment to see what looks best with your text. The line-height value is always divisible by 4 to support the grid.
 
+This is why for **body text** we use 150% line height, while for **headers** we use 120% due to the larger font size where using
+150% would add too much space between the heading lines.
+
+
  ![](../md_components/static/height150.png)
 
 
@@ -39,9 +43,9 @@ but 150% tends to be the most quoted sweet spot (and a WCAG recommendation). You
 Letter spacing (also known as character spacing or tracking ) is the adjustment of the horizontal white space between the letters in a block of text. Unlike kerning, which affects only designated pairs of letters, letter spacing affects every pair.
 By adjusting letter-spacing to the environment you are working with you will help readers consume your information faster, and more efficiently. The fun part is that they won’t even notice it!
 
-#### Headings -1.5%
+#### Headings -1.5% Figma, -0.015em CSS
 #### Body 0%
-#### Caption and Small text 1%
+#### Caption and Small text 1% Figma, 0.01em CSS
 
 <br/>
 
@@ -74,63 +78,63 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
             <h1>Heading 1</h1>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 44x or 2.75rem  <br/> Letter spacing: -1.5%</b>
+            <b>Font Size: 44x or 2.75rem  <br/> Letter spacing: -0.015em <br/> Line height: 1.2</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center' , height: '120px' }}>
         <div className="col col--6">
             <h2>Heading 2</h2>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 40px or 2.5rem  <br/> Letter spacing: -1.5%</b>
+            <b>Font Size: 40px or 2.5rem <br />  Letter spacing: -0.015em <br/> Line height: 1.2</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center' , height: '120px' }}>
         <div className="col col--6">
             <h3>Heading 3</h3>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 36px or 2rem <br/>  Letter spacing: -1.5%</b>
+            <b>Font Size: 36px or 2rem <br/>  Letter spacing: -0.015em <br/> Line height: 1.2</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
             <h4>Heading 4</h4>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 24px or 1.5rem <br/>  Letter spacing: -1.5%</b>
+            <b>Font Size: 24px or 1.5rem <br/>  Letter spacing: -0.015em <br/> Line height: 1.2</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
             <h5>Heading 5</h5>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 20px or 1.25rem <br/>  Letter spacing: -1.5%</b>
+            <b>Font Size: 20px or 1.25rem <br/>  Letter spacing: -0.015em <br/> Line height: 1.2</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
             <p>Body text</p>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 16px or 1rem <br/>  Letter spacing: 0%</b>
+            <b>Font Size: 16px or 1rem <br/>  Letter spacing: 0 <br/>  Line height: 1.5</b>
         </div>
     </div>
       <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
-            <caption>Caption text</caption>
+            <p className="caption">Caption text</p>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 14px or 0.875rem <br/>  Letter spacing: 1%</b>
+            <b>Font Size: 14px or 0.875rem <br/>  Letter spacing: 0.01em <br/>  Line height: 1.5</b>
         </div>
     </div>
       <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
-            <small>Small text</small>
+            <p className="tiny">Small text</p>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 12px or 0.75rem <br/>  Letter spacing: 1%</b>
+            <b>Font Size: 12px or 0.75rem <br/>  Letter spacing: 0.01em <br/>  Line height: 1.5</b>
         </div>
     </div>
 
@@ -144,55 +148,55 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
             <h1> Heading 1</h1>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 30px or 1.875rem  <br/> Letter spacing: -1.5%</b>
+            <b>Font Size: 30px or 1.875rem  <br/> Letter spacing: -0.015em</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px' }}>
         <div className="col col--6">
             <h2> Heading 2</h2>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 24px or 1.5rem <br/>  Letter spacing: -1.5%</b>
+            <b>Font Size: 24px or 1.5rem <br/>  Letter spacing: -0.015em</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px' }}>
         <div className="col col--6">
             <h3> Heading 3</h3>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 20px or 1.25rem <br/>  Letter spacing: -1.5%</b>
+            <b>Font Size: 20px or 1.25rem <br/>  Letter spacing: -0.015em</b>
         </div>
     </div>
       <div className="row" style={{ alignItems: 'center', height: '120px' }}>
         <div className="col col--6">
             <h4> Heading 4</h4>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 18px or 1.125rem <br/>  Letter spacing: -1.5%</b>
+            <b>Font Size: 18px or 1.125rem <br/>  Letter spacing: -0.015em</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
             <p>Body</p>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 16px or 1rem <br/>  Letter spacing: 0%</b>
+            <b>Font Size: 16px or 1rem <br/>  Letter spacing: 0</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
             <caption>Caption</caption>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 14px or 0.875rem <br/>  Letter spacing: 1%</b>
+            <b>Font Size: 14px or 0.875rem <br/>  Letter spacing: 0.01em</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
-            <small>Small text</small>
+            <p className="tiny">Small text</p>
         </div>
         <div className="col col--6">
-            <b>Font: Roboto   Size: 12px or 0.75rem  <br/> Letter spacing: 1%</b>
+            <b>Font Size: 12px or 0.75rem  <br/> Letter spacing: 0.01em</b>
         </div>
     </div>
 </div>
@@ -202,66 +206,67 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
 
 ### Weight
 
-| Token name         | Value           | Style | 
-| ------------------ | ----------------| -------------- |
-| font-weight-1      | 100             | Thin              |
-| font-weight-2      | 200             | Light             |
-| font-weight-3      | 300             | Book              |
-| font-weight-4      | 400             | Regular           |
-| font-weight-5      | 500             | Medium            |
-| font-weight-6      | 600             | SemiBold          |
-| font-weight-7      | 700             | Bold              |
-| font-weight-8      | 800             | ExtraBold         |
-| font-weight-9      | 900             | Black             |
+| Token name         | Value            | Style          |
+| ------------------ | ---------------- | -------------- |
+| font-weight-1      | 100              | Thin           |
+| font-weight-2      | 200              | Light          |
+| font-weight-3      | 300              | Book           |
+| font-weight-4      | 400              | Regular        |
+| font-weight-5      | 500              | Medium         |
+| font-weight-6      | 600              | SemiBold       |
+| font-weight-7      | 700              | Bold           |
+| font-weight-8      | 800              | ExtraBold      |
+| font-weight-9      | 900              | Black          |
 
 ### Line height
 
 
-| Token name         | Value(no unit) |
-| ------------------ | ----------------| 
-| font-lineheight-00 | .95             |
-| font-lineheight-0  | 1.1             |
-| font-lineheight-1  | 1.25            |
-| font-lineheight-2  | 1.375           |
-| font-lineheight-3  | 1.5             |
-| font-lineheight-4  | 1.75            |
-| font-lineheight-5  | 2               |
+| Token name         | Value(no unit)   |
+| ------------------ | ---------------- |
+| font-lineheight-00 | .95              |
+| font-lineheight-0  | 1.1              |
+| font-lineheight-1  | 1.25             |
+| font-lineheight-2  | 1.375            |
+| font-lineheight-3  | 1.5              |
+| font-lineheight-4  | 1.75             |
+| font-lineheight-5  | 2                |
 
 
 ### Letter spacing
 
-| Token name             | Value(em)       |
-| ---------------------- | ----------------| 
-| font-letterspacing-000 | -.02            |
-| font-letterspacing-00  | -.015           |
-| font-letterspacing-0   | -.005           |
-| font-letterspacing-1   |  .005           |
-| font-letterspacing-2   |  .015           |
-| font-letterspacing-3   |  .02            |
-| font-letterspacing-4   |  .075           |
-| font-letterspacing-5   |  .15            |
+| Token name             | Value(em)        |
+| ---------------------- | ---------------- |
+| font-letterspacing-000 | -.02             |
+| font-letterspacing-00  | -.015            |
+| font-letterspacing-0   | -.01             |
+| font-letterspacing-1   |  .01             |
+| font-letterspacing-2   |  .015            |
+| font-letterspacing-3   |  .02             |
+| font-letterspacing-4   |  .075            |
+| font-letterspacing-5   |  .15             |
 
 ### Font size
 
-| Token name             | Value(rem)       |
-| ---------------------- | ---------------- | 
-| font-size-00           | .75              |
-| font-size-0            | .875             |
-| font-size-1            |  1               |
-| font-size-2            |  1.1             |
-| font-size-3            |  1.25            |
-| font-size-4            |  1.5             |
-| font-size-5            |  2               |
-| font-size-6            |  2.5             |
-| font-size-7            |  3               |
-| font-size-8            |  3.5             |
-
+| Token name             | Value(rem)       | Value(px)        |
+| ---------------------- | ---------------- | ---------------- |
+| @font-size-00          | .75              |  12              |
+| @font-size-0           | .875             |  14              |
+| @font-size-1           |  1               |  16              |
+| @font-size-2           |  1.125           |  18              |
+| @font-size-3           |  1.25            |  20              |
+| @font-size-4           |  1.5             |  24              |
+| @font-size-5           |  1.625           |  26              |
+| @font-size-6           |  1.875           |  30              |
+| @font-size-7           |  2rem            |  32              |
+| @font-size-8           |  2.25            |  36              |
+| @font-size-9           |  2.5             |  40              |
+| @font-size-10          |  2.75            |  44              |
 
 ### Font size fluid
 
-| Token name             | Value                |  
-| ---------------------- | -------------------  | 
-| font-size-fluid-0      | .75rem, 2vw, 1rem    |
-| font-size-fluid-1      | 1rem, 4vw, 1.5rem    |
-| font-size-fluid-2      | 1.5rem, 6vw, 2.5rem  |
-| font-size-fluid-3      | 2rem, 9vw, 3.5rem    |
+| Token name             | Value                         |
+| ---------------------- | ----------------------------- |
+| font-size-fluid-0      | clamp(1.125rem, 2vw, 1.25rem) |
+| font-size-fluid-1      | clamp(1.25rem, 4vw, 1.625rem) |
+| font-size-fluid-2      | clamp(1.5rem, 6vw, 2rem)      |
+| font-size-fluid-3      | clamp(1.875rem, 9vw, 2.75rem) |

website/src/css/custom.css

@@ -15,8 +15,10 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
-  --ifm-font-family-base: 'Roboto', sans-serif;
-  --ifm-heading-font-family: 'Roboto', sans-serif;
+  --ifm-font-family-base: 'Roboto', Arial, 'Helvetica Neue', Helvetica,
+    sans-serif;
+  --ifm-heading-font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica,
+    sans-serif;
   --ifm-heading-line-height: 1.2;
   --ifm-h1-font-size: 2.75rem;
   --ifm-h2-font-size: 2rem;
@@ -49,11 +51,11 @@ body {
   line-height: 1.5;
 }
 
-caption {
+.caption {
   font-size: 0.875rem;
 }
 
-small {
+.tiny {
   font-size: 0.75rem;
 }