change(fonts): typo fixes for typography section of docusaurus

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

@@ -14,7 +14,7 @@ We use Arial as a web safe alternative font. It is similar in character and styl
 ### Weight
 
 Font weight is the thickness of a font's stroke, with various weights used to differentiate content hierarchy. The bold style emphasizes the importance in comparison with the regular font style in the font family. 
-We can use weights strarting from 300 (Light) up to 700 (Bold). Usually, the bold style is assigned to headings. Regular text is used for body text.
+We can use weights starting from 300 (Light) up to 700 (Bold). Usually, the bold style is assigned to headings. Regular text is used for body text.
 
 <h4 style={{ fontWeight: '300', display: 'flex', marginBlock: '10px' }}><span style={{ width: '100px' }}>Light</span> 300</h4>
 <h4 style={{ fontWeight: '400', display: 'flex', marginBlock: '10px'  }}><span style={{ width: '100px' }}>Regular</span> 400</h4>
@@ -36,7 +36,7 @@ but 150% tends to be the most quoted sweet spot (and a WCAG recommendation). You
 
 ### Letter spacing
 
-Letterspacing (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, letterspacing affects every pair. 
+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%
@@ -127,7 +127,7 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
     </div>
       <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
-            <smalltext>Small text</smalltext>
+            <small>Small text</small>
         </div>
         <div className="col col--6">
             <b>Font: Roboto   Size: 12px or 0.75rem <br/>  Letter spacing: 1%</b>
@@ -189,7 +189,7 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
-            <smalltext>Small text</smalltext>
+            <small>Small text</small>
         </div>
         <div className="col col--6">
             <b>Font: Roboto   Size: 12px or 0.75rem  <br/> Letter spacing: 1%</b>