Skip to main content
MindTouch Success Center

Brand with fonts

This page applies to:MindTouch (current)

In the MindTouch there are LESS variables and mixins that control font declarations and font colors.

 

Fonts


There are four default fonts in MindTouch Responsive: body font, monospace, script, and icon.  Font families can be set with variables and the entire font declaration can be set with mixins.

Body font

This is the default font for the site. You will see it declared in the <body> as well as in tables, tabbed containers, buttons, etc. 

Screenshot

default-font.png

Variable

@default-font-family
Default value: 'Lato', arial, helvetica, sans-serif
Definition: Default font used throughout the site.

Mixin

Default font face mixin. There are four values that can be passed into the mixin when called from a rule set: font weight, font size, line-height, and font-family. Remember to separate them with semi-colons (;).

.default-font-declaration(@font-weight: normal; @font-size: 100%; @line-height: 1.2; @font-family: @default-font-family) {
    font: @font-weight @font-size/@line-height @font-family;
}

Usage

Here is an example of the mixin being used on the <body> tag.

body {
    .default-font-declaration(normal; 100%; 1.2; 'Lato', Arial, Helvetica, sans-serif);
}

This is what the compiled CSS will look like.

body {
    font: normal 100%/1.2 'Lato', Arial, Helvetica, sans-serif;
}

 

Monospace font

Monospace or fixed-width fonts contain characters that are all exactly the same width (horizontal space). They are used in <code>, <pre>, template comments, and script blocks (Dekiscript, JavaScript, and CSS). The variable and mixin work the same way the default body font does.

Screenshots

monoscript-deki-block.png

monoscript-code-block.png

monoscript-pre-block.png

Variable

@monospace-font-family
Default value: 'Source Code Pro', monospace
Definition: This fixed width font face is used for code examples throughout the site.

Mixin

.monospace-font-declaration(@font-weight: normal; @font-size: 100%; @line-height: 1; @font-family: @monospace-font-family) {
    font: @font-weight @font-size/@line-height @font-family;
}

 

Script font

These types of fonts are similar in style to handwriting. While they are not implemented in MindTouch Responsive, there is are a variable and mixin associated with them.

Screenshots

Here is a hypothetical example of a <blockquote> using a script font.

script-blockquote.png

Variable

@script-font-family
Default value: 'Lato', arial, helvetica, sans-serif
Definition: This hand-written type face can be used to personalize your text.

Mixin

.script-font-declaration(@font-weight: normal; @font-size: 100%; @line-height: 1; @font-family: @script-font-family) {
    font: @font-weight @font-size/@line-height @font-family;
}

 

Icon font

Iconography in MindTouch Responsive is created through the use of icon fonts is based on a customized version of the IcoMoon font family.

Screenshots

article-feedback-button.png

highlight-default.png

Variable

@icon-font-family
Default value: icomoon
Definition: The default icon font used in MindTouch Responsive iconography.

Mixin

.icon-font-declaration(@font-weight: normal; @font-size: 100%; @line-height: 1; @font-family: @icon-font-family) {
    font: @font-weight @font-size/@line-height @font-family;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
}

You will notice that the mixin contains more than just the font declaration. These extra declarations are browser specific and help make the icons as sharp as possible.

Font colors

There are six font color variables in MindTouch Responsive. They can be found in multiple different rule sets and are used to change the default font color for text that need to stand out from its surrounding content. The default font color (@primary-font-color) is set to black. Secondary, tertiary, and quaternary font colors are based off a desaturated primary font color.

Screenshot

font-colors.png

Variables

@primary-font-color
Default value: #000  
Definition: The default font color for the site.

Fonts1(Redone).png
@primary-font-color-desaturated
Default value: desaturate(@primary-font-color, 75%)  
Definition: A desaturated version of the default font color and is used to generated the other font colors.
(No Image available)
@secondary-font-color
Default value: lighten(@primary-font-color-desaturated, 20%)  
Definition: A dark grey used for the default site logo.

Fonts2(Redone).png
@tertiary-font-color
Default value: lighten(@primary-font-color-desaturated, 40%)  
Definition: This medium grey color is used mainly in the display of file and article type icons throughout the site.

Fonts3(Redone).png
@quaternary-font-color
Default value: lighten(@primary-font-color-desaturated, 60%)  
Definition: The light grey of this variable is used mainly for secondary text and notes.

Font4(Redone).png
@error-font-color
Default value: #ff0000  
Definition: Bright red color used in all non-flash error messages.

Fonts5.png
  • Was this article helpful?