Font size

The font size scale consists of both floating and static values. The fluid ones, calculates a current vmin value based on current screen size, from screen size 30rem up to 90rem, to create better adaptation to different devices automatically. In the code, the values are translated into the unit rem where 1rem is equal to 16px, set at the root.

  • Text xxlarge

    Fluid value scales between 40px and 80px.

    CSS variable
    var(--gh-text-xxlarge)
    CSS utility class
    .gh-text-xxlarge

  • Text xlarge

    Fluid value scales between 32px and 48px.

    CSS variable
    var(--gh-text-xlarge)
    CSS utility class
    .gh-text-xlarge

  • Text large

    Fluid value scales between 24px and 32px.

    CSS variable
    var(--gh-text-large)
    CSS utility class
    .gh-text-large

  • Text medium

    Fluid value scales between 20px and 24px.

    CSS variable
    var(--gh-text-medium)
    CSS utility class
    .gh-text-medium

  • Text small

    Fluid value scales between 18px and 20px.

    CSS variable
    var(--gh-text-small)
    CSS utility class
    .gh-text-small

  • Text xsmall

    Static value is 16px.

    CSS variable
    var(--gh-text-xsmall)
    CSS utility class
    .gh-text-xsmall

  • Text xxsmall

    Static value is 14px.

    CSS variable
    var(--gh-text-xxsmall)
    CSS utility class
    .gh-text-xxsmall

  • Text xxxsmall

    Static value is 12px.

    CSS variable
    var(--gh-text-xxxsmall)
    CSS utility class
    .gh-text-xxxsmall