Typography

Typography in sme takes advantage of natural html elements.

In most cases the plain html elements should be used to apply font as these elements communicate the intent of the text.

In rare cases the sme-font classes can be used to apply or override the typographical settings of an element.

Selectors Example
.sme-font-heading1, h1, .h1

Heading 1

.sme-font-heading2, h2, .h2

Heading 2

.sme-font-heading3, h3, .h3

Heading 3

.sme-font-heading4, h4, .h4

Heading 4

.sme-font-heading5, h5, .h5
Heading 5
.sme-font-body, body, p Body
.sme-font-emphasis1, b, strong Emphasis 1
.sme-font-emphasis2, q, em, i, var, dfn Emphasis 2
.sme-font-code, code, pre, kbd, samp Code
.sme-font-label, label, th

Other Elements

SME also overrides the default behavior of less common elements in other ways to be compliant with the global design.

These elements include:

Font Families

You can also override specific elements to use a different font than their default. Doing so will keep all other aspects of the text, only changing its font family. The following classes will have this effect: