Typography

Typography describes the creative design of the text on your web pages. GlowCss offers different classes to help you with sizing of texts.


Font Family

By default GlowCss use Open Sans as main font.

<-- Import the below link -->

'https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Open+Sans:wght@300;400;600;700;800&family=Roboto:wght@100&family=Sacramento&display=swap'

<-- Css variable to specify font family -->

--MAIN-FONT:'Open Sans', sans-serif;

Font Size

All default HTML headings <h1> ... <h6> are also available. But for more convinence we introduce 5 classes text-xlg | text-lg | text-md | text-md | text-normal | text-sm

This is a extra large text

This is a large text

This is a medium text

This is a normal text

This is a small text

< -- Font Size -->

<p class = "text-xlg"> This is a extra large text </p>
<p class = "text-lg"> This is a large text </p>
<p class = "text-md"> This is a medium text </p>
<p class = "text-normal"> This is a normal text </p>
<p class = "text-sm"> This is a small text </p>

Font Colors

All themse colors and add-on black and gray are available.

  • This is Primary text
  • This is Secondary text
  • This is Danger text
  • This is Sucess text
  • This is a Information text
  • This is a Warning text
  • This is a Gray text
  • This is a Black text

< -- Font Colors -->

<p class = "color-primary"> This is a primary text </p>
<p class = "color-secondary"> This is a secondary text </p>
<p class = "color-danger"> This is a danger text </p>
<p class = "color-sucess"> This is a sucess text </p>
<p class = "color-info"> This is a info text </p>
<p class = "color-warning"> This is a Warning text </p>
<p class = "color-gray"> This is a gray text </p>
<p class = "color-black"> This is a black text </p>