1.1Typography
Concise has a global font-size of 16px (1em) with a line-height of
1.5 (24px). This is applied to all text within the <body>
tag. Also, all <p> tags receive a top margin of 24px,
the exact same size as our line height.
You can change the $font-size-base variable in the
/custom/_globals.scss file to adjust the base font size.
In addition, you can change the the text array inside of the
$colors map inside of /custom/_globals.scss
to change the font colors.
Font Families
Typography is a key to effective design, so Concise makes it simple to control in your project. By default, Helvetica, with Arial as a fallback, is used as the default font for devices.
You can change the $font-family variable in the
/custom/_globals.scss file to adjust the base font family.
Emphasis
Small
The <small> tag and .small class can both be
used to shrink text to 75% of the base font-size. Note that heading
elements receive their own font size for nested small elements.
Italics
The <em> tag, or .italic class can be used
for emphasizing text with italics.
The <i> tag also can be used for emphasizing text in an
italic manner, although it is not recommended as <em>
should be used. However, the <i> tag can still be used to
define text in an alternative voice or mood.
Bold
The <strong> tag and .bold class can be used
for emphasizing text with a heavier font-weight.
The <b> tag also can be used for emphasizing text in a
bold manner, although it is not recommended as <strong>
should be used. Per the HTML5 specification, the <b> tag
should be used as a last resort for formatting text as most HTML5 tags cover
its potential uses.
Abbreviations
Using the <abbr> tag in HTML, you can denote an abbreviation
or acronym. Using proper HTML markup for your abbreviations helps with the
understanding of acronyms, spell checkers, text translators, and search engine
indexing.
Items that are marked up with the <abbr> tag are styled
with a dashed underline, a cursor with a question mark and whatever content
is used in the title attribute is shown in a browser tooltip.
Type Positioning
Positioning text is easy with a few helper classes that can be used on almost any element containing text.
Type Colors
Nobody constantly wants black text on a white background, do they? Of course not. That's why Concise comes with various classes that can be used to change the color of text.
You can change the $colors map in the
/custom/_globals.scss file to adjust any of the base
colors or add your own colors. Any color added will automatically have an
appropriate .text--* and .bg--* class created for it.
We have also given the white text a black background just for the purpose of demonstration.
