Skip to main content
MindTouch Success Center

Heading variables

One of the most important typographical elements in an article, headings help guide readers through an article in a logical and efficient manner. They are the street signs of your page and one of the easiest ways to capture the attention of your viewers. By default, the headings in MindTouch vary in size but not color and make use of the default font of the site. To update these elements you will need to use the following variables and mixins. 

Page titles use an <h1> tag. Inside the editor, the <h1> tag is actually an <h2> so it isn't confused with the page title. That's why only H1 - H5 appear in the toolbar. This is important to know since your style choices will affect these elements. You can use an <h1> inside your content area, but it has to be entered manually through View > Source.

Default headings

Screenshot

headings.png

Variables

@heading-color
Default value: @primary-font-color  
Definition: The default font color for all headings.
DefaultHeading1.png
@heading-font-family
Default value: @default-font-family
Definition: The default typeface used for all headings. There are usually multiple typefaces declared to be used as fall-backs if a browser or platform doesn't have the first one.
DefaultHeading2.png
@heading-font-size
Default value: 200%
Definition: The default font size for all headings.
DefaultHeading3.png
@heading-font-style
Default value: normal
Definition: The default font style, such as normal, italic, oblique used for all headings.
DefaultHeading4(Redone).png
@heading-font-weight
Default value: normal
Definition: The default font weight for all headings. Determines how thick or thin the font characters are.
DefaultHeading5(redone).png
@heading-line-height
Default value: 1.2
Definition: This variable defines the minimum height of the heading element in the box model.
DefaultHeading6.png
@heading-margin
Default value: 2rem 0 .5rem
Definition: The default space between the heading and other elements.
DefaultHeading7.png
@heading-padding
Default value: 0
Definition: The default padding around the inside of the heading container.
DefaultHeading8.png

Mixin

.mt-heading-default {
    color: @heading-color;
    font: @heading-font-style @heading-font-weight @heading-font-size/@heading-line-height @heading-font-family;
    margin: @heading-margin;
    padding: @heading-padding;
}

CSS

Here is an example of this mixin used in a rule set.

h1, h2, h3, h4, h5, h6 {
    .mt-heading-default;
}

H1

Variables

@h1-color
Default value: @heading-color  
Definition: The default font color for H1's. Defaults to .mt-heading-default value.
H1.1(Redone).png
@h1-font-family
Default value: @heading-font-style
Definition: The default typeface used for H1's. There are usually multiple typefaces declared to be used as fall-backs if a browser or platform doesn't have the first one. Defaults to .mt-heading-default value.
(No Image available)
@h1-font-size
Default value: 250%
Definition: The default font size for H1's.
H1.3.png
@h1-font-style
Default value: @heading-font-style
Definition: The default font style, such as normal, italic, oblique used for H1's. Defaults to .mt-heading-default value.
(No Image available)
@h1-font-weight
Default value: @heading-font-weight
Definition: The default font weight for H1's. Determines how thick or thin the font characters are. Defaults to .mt-heading-default value.
(No Image available)
@h1-line-height
Default value: @heading-line-height
Definition: This variable defines the minimum height of the heading element in the box model. Defaults to .mt-heading-default value.
(No Image available)
@h1-margin
Default value: @heading-margin
Definition: The default space between the heading and other elements. Defaults to .mt-heading-default value.
(No Image available)
@h1-padding
Default value: @heading-padding
Definition: The default padding around the inside of the heading container. Defaults to .mt-heading-default value.
(No Image available)

Mixin

The font size is reduced mathematically for smaller screen sizes.

.mt-heading-h1 {
    color: @h1-color;
    font: @h1-font-style @h1-font-weight @h1-font-size/@h1-line-height @h1-font-family;
    margin: @h1-margin;
    padding: @h1-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h1-font-size * .75);
    }
    @media all and (min-width: 37.5em) {
        font-size: @h1-font-size;
    }
}

CSS

Here is an example of this mixin used in a rule set.

h1 {
    .mt-heading-h1;
}

H2

Variables

@h2-color
Default value: @heading-color  
Definition: The default font color for H2's. Defaults to .mt-heading-default value.
H2.1(Redone).png
@h2-font-family
Default value: @heading-font-style
Definition: The default typeface used for H2's. There are usually multiple typefaces declared to be used as fall-backs if a browser or platform doesn't have the first one. Defaults to .mt-heading-default value.
(No Image available)
@h2-font-size
Default value: 225%
Definition: The default font size for H2's.
H2.3.png
@h2-font-style
Default value: @heading-font-style
Definition: The default font style, such as normal, italic, oblique used for H2's. Defaults to .mt-heading-default value.
(No Image available)
@h2-font-weight
Default value: @heading-font-weight
Definition: The default font weight for H2's. Determines how thick or thin the font characters are. Defaults to .mt-heading-default value.
(No Image available)
@h2-line-height
Default value: @heading-line-height
Definition: This variable defines the minimum height of the heading element in the box model. Defaults to .mt-heading-default value.
(No Image available)
@h2-margin
Default value: @heading-margin
Definition: The default space between the heading and other elements. Defaults to .mt-heading-default value.
(No Image available)
@h2-padding
Default value: @heading-padding
Definition: The default padding around the inside of the heading container. Defaults to .mt-heading-default value.
(No Image available)

Mixin

The font size is reduced mathematically for smaller screen sizes.

.mt-heading-h2 {
    color: @h2-color;
    font: @h2-font-style @h2-font-weight @h2-font-size/@h2-line-height @h2-font-family;
    margin: @h2-margin;
    padding: @h2-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h2-font-size * .75);
    }
    @media all and (min-width: 37.5em) {
        font-size: @h2-font-size;
    }
}

CSS

Here is an example of this mixin used in a rule set.

h2 {
    .mt-heading-h2;
}

H3

Variables

@h3-color
Default value: @heading-color  
Definition: The default font color for H3's. Defaults to .mt-heading-default value.
H3.1(Redone).png
@h3-font-family
Default value: @heading-font-style
Definition: The default typeface used for H3's. There are usually multiple typefaces declared to be used as fall-backs if a browser or platform doesn't have the first one. Defaults to .mt-heading-default value.
(No Image available)
@h3-font-size
Default value: 200%
Definition: The default font size for H3's.
H3.3.png
@h3-font-style
Default value: @heading-font-style
Definition: The default font style, such as normal, italic, oblique used for H3's. Defaults to .mt-heading-default value.
(No Image available)
@h3-font-weight
Default value: @heading-font-weight
Definition: The default font weight for H3's. Determines how thick or thin the font characters are. Defaults to .mt-heading-default value.
(No Image available)
@h3-line-height
Default value: @heading-line-height
Definition: This variable defines the minimum height of the heading element in the box model. Defaults to .mt-heading-default value.
(No Image available)
@h3-margin
Default value: @heading-margin
Definition: The default space between the heading and other elements. Defaults to .mt-heading-default value.
(No Image available)
@h3-padding
Default value: @heading-padding
Definition: The default padding around the inside of the heading container. Defaults to .mt-heading-default value.
(No Image available)

Mixin

The font size is reduced mathematically for smaller screen sizes.

.mt-heading-h3 {
    color: @h3-color;
    font: @h3-font-style @h3-font-weight @h3-font-size/@h3-line-height @h3-font-family;
    margin: @h3-margin;
    padding: @h3-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h3-font-size * .78);
    }
    @media all and (min-width: 37.5em) {
        font-size: @h3-font-size;
    }
}

CSS

Here is an example of this mixin used in a rule set.

h3 {
    .mt-heading-h3;
}

H4

Variables

@h4-color
Default value: @heading-color  
Definition: The default font color for H4's. Defaults to .mt-heading-default value.
H4.1(Redone)(Redone).png
@h4-font-family
Default value: @heading-font-style
Definition: The default typeface used for H4's. There are usually multiple typefaces declared to be used as fall-backs if a browser or platform doesn't have the first one. Defaults to .mt-heading-default value.
(No Image available)
@h4-font-size
Default value: 175%
Definition: The default font size for H4's.
H4.3.png
@h4-font-style
Default value: @heading-font-style
Definition: The default font style, such as normal, italic, oblique used for H4's. Defaults to .mt-heading-default value.
(No Image available)
@h4-font-weight
Default value: @heading-font-weight
Definition: The default font weight for H4's. Determines how thick or thin the font characters are. Defaults to .mt-heading-default value.
(No Image available)
@h4-line-height
Default value: @heading-line-height
Definition: This variable defines the minimum height of the heading element in the box model. Defaults to .mt-heading-default value.
(No Image available)
@h4-margin
Default value: @heading-margin
Definition: The default space between the heading and other elements. Defaults to .mt-heading-default value.
(No Image available)
@h4-padding
Default value: @heading-padding
Definition: The default padding around the inside of the heading container. Defaults to .mt-heading-default value.
(No Image available)

Mixin

The font size is reduced mathematically for smaller screen sizes.

.mt-heading-h4 {
    color: @h4-color;
    font: @h4-font-style @h4-font-weight @h4-font-size/@h4-line-height @h4-font-family;
    margin: @h4-margin;
    padding: @h4-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h4-font-size * .80);
    }
    @media all and (min-width: 37.5em) {
        font-size: @h4-font-size;
    }
}

CSS

Here is an example of this mixin used in a rule set.

h4 {
    .mt-heading-h4;
}

H5

Variables

@h5-color
Default value: @heading-color  
Definition: The default font color for H5's. Defaults to .mt-heading-default value.
H5.1(Redone).png
@h5-font-family
Default value: @heading-font-style
Definition: The default typeface used for H5's. There are usually multiple typefaces declared to be used as fall-backs if a browser or platform doesn't have the first one. Defaults to .mt-heading-default value.
(No Image available)
@h5-font-size
Default value: 150%
Definition: The default font size for H5's.
H5.3.png
@h5-font-style
Default value: @heading-font-style
Definition: The default font style, such as normal, italic, oblique used for H5's. Defaults to .mt-heading-default value.
(No Image available)
@h5-font-weight
Default value: @heading-font-weight
Definition: The default font weight for H5's. Determines how thick or thin the font characters are. Defaults to .mt-heading-default value.
(No Image available)
@h5-line-height
Default value: @heading-line-height
Definition: This variable defines the minimum height of the heading element in the box model. Defaults to .mt-heading-default value.
(No Image available)
@h5-margin
Default value: @heading-margin
Definition: The default space between the heading and other elements. Defaults to .mt-heading-default value.
(No Image available)
@h5-padding
Default value: @heading-padding
Definition: The default padding around the inside of the heading container. Defaults to .mt-heading-default value.
(No Image available)

Mixin

The font size is reduced mathematically for smaller screen sizes.

.mt-heading-h5 {
    color: @h5-color;
    font: @h5-font-style @h5-font-weight @h5-font-size/@h5-line-height @h5-font-family;
    margin: @h5-margin;
    padding: @h5-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h5-font-size * .87);
    }
    @media all and (min-width: 37.5em) {
        font-size: @h5-font-size;
    }
}

CSS

Here is an example of this mixin used in a rule set.

h5 {
    .mt-heading-h5;
}

H6

Variables

@h6-color
Default value: @heading-color  
Definition: The default font color for H6's. Defaults to .mt-heading-default value.
H6.1(Redone).png
@h6-font-family
Default value: @heading-font-style
Definition: The default typeface used for H6's. There are usually multiple typefaces declared to be used as fall-backs if a browser or platform doesn't have the first one. Defaults to .mt-heading-default value.
(No Image available)
@h6-font-size
Default value: 125%
Definition: The default font size for H6's.
H6.3.png
@h6-font-style
Default value: @heading-font-style
Definition: The default font style, such as normal, italic, oblique used for H6's. Defaults to .mt-heading-default value.
(No Image available)
@h6-font-weight
Default value: bold
Definition: The default font weight for H6's. Determines how thick or thin the font characters are. Defaults to .mt-heading-default value.
H6.5.png
@h6-line-height
Default value: @heading-line-height
Definition: This variable defines the minimum height of the heading element in the box model. Defaults to .mt-heading-default value.
(No Image available)
@h6-margin
Default value: @heading-margin
Definition: The default space between the heading and other elements. Defaults to .mt-heading-default value.
(No Image available)
@h6-padding
Default value: @heading-padding
Definition: The default padding around the inside of the heading container. Defaults to .mt-heading-default value.
(No Image available)

Mixin

The font size is reduced mathematically for smaller screen sizes.

.mt-heading-h6 {
    color: @h6-color;
    font: @h6-font-style @h6-font-weight @h6-font-size/@h6-line-height @h6-font-family;
    margin: @h6-margin;
    padding: @h6-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h6-font-size * .90);
    }
    @media all and (min-width: 37.5em) {
        font-size: @h6-font-size;
    }
}

CSS

Here is an example of this mixin used in a rule set.

h6 {
    .mt-heading-h6;
}
  • Was this article helpful?