Skip to content

13. Typography

Jump to bottom
Jessglynne edited this page Nov 15, 2021 · 1 revision

Body Typography

It allows you to adjust typography settings for the Body on the site. If default selected then properties will inherit from CSS code. Also now you can set the typography for devices.

  1. Font Family: Select the font family from the drop-down list. Here you can select the System Font or the Google font to the whole Body of your website. We now have the Default font option wherein it will either show Bootstrap’s default font family or if you have added any other font in the custom css/scss files.
  2. Alt Font Family: If the browser does not support the first font family, it tries the Alternate font family.
  3. Font Weight: Select the font-weight from the list, it will define how bold your text is.
  4. Font Size: Set the font size you need to use in the text element.
  5. Letter Spacing: Set the needed distance between letters.
  6. Line Height: line-height property specifies the height of a line.
  7. Text Transform: Set the font transformation, if needed (uppercase, capitalize and lowercase).

Menu Typography

This section allows adjusting typography settings for the Menu. If inherit selected then the property will inherit its value from body typography properties.

Not only that set the typography for devices also.

  1. Font Family: Select the font family from the drop-down list. Here you can select the System Font or the Google font to the whole Body of your website
  2. Alt Font Family: If the browser does not support the first font family, it tries the Alternate font family.
  3. Font Weight: Select the font-weight from the list, it will define how bold your text is.
  4. Font Size: Set the font size you need to use in the text element.
  5. Letter Spacing: Set the needed distance between letters.
  6. Line Height: line-height property specifies the height of a line.
  7. Text Transform: Set the font transformation, if needed (uppercase, capitalize and lowercase).

H1-H6 Typography

This is a fully customizable font-related section. You can change the fonts and their style accordingly, you can easily customize typography for all body text and the Responsive Headings, that define the Headings H1-H6.

Here we can set different typography for different heading types from H1 to H6 along with their responsiveness.

H1-H6 Typography This section controls the typography for all H1-H6 headings.

  1. Font Family: Select the font family from the drop-down list. Here you can select the System Font or the Google font to the whole Body of your website
  2. Alt Font Family: If the browser does not support the first font family, it tries the Alternate font family.
  3. Font Weight: Select the font-weight from the list, it will define how bold your text is.
  4. Font Size: Set the font size you need to use in the text element.
  5. Letter Spacing: Set the needed distance between letters.
  6. Line Height: line-height property specifies the height of a line.
  7. Font Color: Set the font color of that particular heading tag.
  8. Text Transform: Set the font transformation, if needed (uppercase, capitalize and lowercase).

Drop Down Menu Typography

This section allows adjusting typography settings for the Submenu. If Inherit selected then the property will inherit its value from body typography properties. Not only that set the typography for devices also.

  1. Font Family: Select the font family from the drop-down list. Here you can select the System Font or the Google font to the whole Body of your website
  2. Alt Font Family: If the browser does not support the first font family, it tries the Alternate font family.
  3. Font Weight: Select the font-weight from the list, it will define how bold your text is.
  4. Font Size: Set the font size you need to use in the text element.
  5. Letter Spacing: Set the needed distance between letters.
  6. Line Height: line-height property specifies the height of a line.
  7. Text Transform: Set the font transformation, if needed (uppercase, capitalize and lowercase).

Custom Typography

With the latest development in Astroid we have now introduced Custom Typography where you can easily customize certain headings with a typography style different than others on your site using CSS selectors.

It has 2 main options either Inherit, meaning it will take the property of the body typography settings or Custom that has the following list of options, customizable for devices :

  1. CSS Selector: Write the name of the selector whose property you want to customize.
  2. Font Family: Select the font family from the drop-down list. Here you can select the System Font or the Google font to the whole Body of your website
  3. Alt Font Family: If the browser does not support the first font family, it tries the Alternate font family.
  4. Font Weight: Select the font-weight from the list, it will define how bold your text is.
  5. Font Size: Set the font size you need to use in the text element.
  6. Letter Spacing: Set the needed distance between letters.
  7. Line Height: line-height property specifies the height of a line.
  8. Font Color: Add a different text color using the color picker.
  9. Text Transform: Set the font transformation, if needed (uppercase, capitalize and lowercase).
Clone this wiki locally