Base Font Size

--cosmos-base-font-size

Web components in Cosmos are built with accessibility in mind. One fundamental aspect of good accessibility is the capability to allow font sizes to scale according to the preferences of a user.

All font sizes used by web components of Cosmos are declared relative to the document's base font size, which is defined by the browser's settings and, by default, 16px.

In rare cases, websites set a document base font size different from the browser's settings. To accommodate those cases, Cosmos provides a CSS variable to adjust the size of the rendered texts accordingly.

☝️Watch out

--cosmos-base-font-size has to be unitless.

The web component's font sizes are implemented relative to the document's base font size – which is, by default, 16px. To avoid the font size scale increasing or decreasing when using a different base font size, you can configure Cosmos' base font size accordingly.

<html>
  <head>
  	<style>
      html {
        /* Overwrite of the browsers default font size */
        font-size: 18px;
      }
      
      :root {
        /* Adjust base font size of Cosmos */
      	--cosmos-base-font-size: 18;
      }
    </style>
  </head>
  <body>
  	<cosmos-button>
        Click Me
    </cosmos-button>
  </body>
</html>