BrutCSS Reference Documentation

Typography Classes

Typography classes. These allow you to control how text is displayed and rendered. In particular, this contains the modular scale of font sizes, but also contains many other text rendering options.

See Also

Font Family

Font families for sans, serif, monospace, cursive, and fantasy. The idea is that your design would not have more than one font of each type, so you’d set custom properties with the fonts you like, then use e.g. .ff-sans anywhere you wanted Sans Serif and ff-serif anywhere you wanted yourt Serif font.

See Also

.ff-sans

.ff-sans {
  font-family: var(--ff-sans);
}

Set the contents in the chosen sans-serif font

See Also
Example
Typical
<p class="ff-sans">Things should be what they are</p>

Things should be what they are

.ff-serif

.ff-serif {
  font-family: var(--ff-serif);
}

Set the contents in the chosen sans-serif font

Example 
<p class="ff-serif">Things should be what they are</p>

Things should be what they are

.ff-mono

.ff-mono {
  font-family: var(--ff-mono);
}

Set the contents in the chosen monospace font

Example 
<p class="ff-mono">Things should be what they are</p>

Things should be what they are

.ff-cursive

.ff-cursive {
  font-family: var(--ff-cursive);
}

Set the contents in the chosen cursive/handwriting font

Example 
<p class="ff-cursive">Things should be what they are</p>

Things should be what they are

.ff-fantasy

.ff-fantasy {
  font-family: var(--ff-fantasy);
}

Set the contents in the chosen fantasy font

Example 
<p class="ff-fantasy">Things should be what they are</p>

Things should be what they are

Font Size

The modular scale of font sizes. This provides 10 total steps, which should give you enough font sizes for any needed. 0 is the smallest and 9 is the largest.

.f-0

.f-0 {
  font-size: var(--fs-0);
}

The smallest font. Note that this is likely very small and not legible in all situations. It’s here in case you really need something quite tiny, but try to use .f-1 if you can.

Example 
<p class="f-0">Things should be what they are</p>

Things should be what they are

.f-1

.f-1 {
  font-size: var(--fs-1);
}

The second smallest font, which you should use general when you need something smaller than the body font.

Example 
<p class="f-1">Things should be what they are</p>

Things should be what they are

.f-2

.f-2 {
  font-size: var(--fs-2);
}

The body font size, appropriate for all general text. By default, this should be 1rem, which will match the user agent’s configured font size

Example 
<p class="f-2">Things should be what they are</p>

Things should be what they are

.f-3

.f-3 {
  font-size: var(--fs-3);
}

Third step of the scale, one steps larger than the body font.

Example 
<p class="f-3">Things should be what they are</p>

Things should be what they are

.f-4

.f-4 {
  font-size: var(--fs-4);
}

Fourth step of the scale, two steps larger than the body font.

Example 
<p class="f-4">Things should be what they are</p>

Things should be what they are

.f-5

.f-5 {
  font-size: var(--fs-5);
}

Fifth step of the scale, three steps larger than the body font.

Example 
<p class="f-5">Things should be what they are</p>

Things should be what they are

.f-6

.f-6 {
  font-size: var(--fs-6);
}

Sixth step of the scale, four steps larger than the body font.

Example 
<p class="f-6">Things should be what they are</p>

Things should be what they are

.f-7

.f-7 {
  font-size: var(--fs-7);
}

Seventh step of the scale, five steps larger than the body font.

Example 
<p class="f-7">Things should be what they are</p>

Things should be what they are

.f-8

.f-8 {
  font-size: var(--fs-8);
}

Eighth step of the scale, six steps larger than the body font.

Example 
<p class="f-8">Things should be what they are</p>

Things should be what they are

.f-9

.f-9 {
  font-size: var(--fs-9);
}

Largest size font

Example 
<p class="f-9">Things should be what they are</p>

Things should be what they are

Font Weights

Font Weights. These go from 1 to 9, representing 100’s, along with a normal class to undo any font weight. Note that, depending on your font, not every weight will look distinct.

.fw-normal

.fw-normal {
  font-weight: normal;
}

Normal font weight.

Example 
<p class="fw-normal">Things should be what they are</p>

Things should be what they are

.fw-bold

.fw-bold {
  font-weight: bold;
}

Bold font weight.

Example 
<p class="fw-bold">Things should be what they are</p>

Things should be what they are

.fw-1

.fw-1 {
  font-weight: 100;
}

Lightest font weight.

Example 
<p class="fw-1">Things should be what they are</p>

Things should be what they are

.fw-2

.fw-2 {
  font-weight: 200;
}

Example 
<p class="fw-2">Things should be what they are</p>

Things should be what they are

.fw-3

.fw-3 {
  font-weight: 300;
}

Example 
<p class="fw-3">Things should be what they are</p>

Things should be what they are

.fw-4

.fw-4 {
  font-weight: 400;
}

Example 
<p class="fw-4">Things should be what they are</p>

Things should be what they are

.fw-5

.fw-5 {
  font-weight: 500;
}

Example 
<p class="fw-5">Things should be what they are</p>

Things should be what they are

.fw-6

.fw-6 {
  font-weight: 600;
}

Example 
<p class="fw-6">Things should be what they are</p>

Things should be what they are

.fw-7

.fw-7 {
  font-weight: 700;
}

Example 
<p class="fw-7">Things should be what they are</p>

Things should be what they are

.fw-8

.fw-8 {
  font-weight: 800;
}

Example 
<p class="fw-8">Things should be what they are</p>

Things should be what they are

.fw-9

.fw-9 {
  font-weight: 900;
}

Heaviest font weight.

Example 
<p class="fw-9">Things should be what they are</p>

Things should be what they are

Styles Variants

Font styles and variants.

.fs-normal

.fs-normal {
  font-style: normal;
}

Normal styling, typically roman.

Example 
<p class="fs-normal">Things should be what they are</p>

Things should be what they are

.fs-italic

.fs-italic {
  font-style: italic;
}

Italic or slanted styling, depend on the font.

Example 
<p class="fs-italic">Things should be what they are</p>

Things should be what they are

.fv-sc

.fv-sc {
  font-variant: small-caps;
}

Small caps variant

Example 
<p class="fv-sc">Things should be what they are</p>

Things should be what they are

.fv-normal

.fv-normal {
  font-variant: normal;
}

Normal variant

Example 
<p class="fv-normal">Things should be what they are</p>

Things should be what they are

Tracking

Letterspacing/tracking. This scale is semantic, since you likely don’t need that many values to achnieve whatever design you are looking for.

.tracked

.tracked {
  letter-spacing: var(--ls-tracked);
}

Slightly increased spacing, useful for cleaning up all-caps titles.

Example 
<p class="tracked">Things should be what they are</p>

Things should be what they are

.tracked-tight

.tracked-tight {
  letter-spacing: var(--ls-tight);
}

Tight spacing.

Example 
<p class="tracked-tight">Things should be what they are</p>

Things should be what they are

.tracked-mega

.tracked-mega {
  letter-spacing: var(--ls-mega);
}

Significantly increased spacing, useful for special effects.

Example 
<p class="tracked-mega">Things should be what they are</p>

Things should be what they are

.tracked-none

.tracked-none {
  letter-spacing: var(--ls-none);
}

Normal letter spacing.

Example 
<p class="tracked-none">Things should be what they are</p>

Things should be what they are

Leading/Line Height

Line heights/leading. This is a semantic scale providing three useful values.

.lh-solid

.lh-solid {
  line-height: var(--lh-solid);
}

No line height, for creating solid blocks of text.

Example 
<p class="lh-solid measure">
  A core tenet of design is that same should be same, while
  different be then different. Meaning: if two elements are
  intended to be the same sort of thing, or reference the
  same sort of information, they should have clear
  consonance and harmony. Conversely, if two elements are
  unrelated, they should be quite clearly different.
</p>

A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.

.lh-title

.lh-title {
  line-height: var(--lh-title);
}

Leading appropriate for titles, which can be somewhat tighter than normal text.

Example 
<p class="lh-title measure">
  A core tenet of design is that same should be same, while
  different be then different. Meaning: if two elements are
  intended to be the same sort of thing, or reference the
  same sort of information, they should have clear
  consonance and harmony. Conversely, if two elements are
  unrelated, they should be quite clearly different.
</p>

A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.

.lh-copy

.lh-copy {
  line-height: var(--lh-copy);
}

Leading appropriate for copy or other longform text.

See Also
Example 
<p class="lh-copy measure">
  A core tenet of design is that same should be same, while
  different be then different. Meaning: if two elements are
  intended to be the same sort of thing, or reference the
  same sort of information, they should have clear
  consonance and harmony. Conversely, if two elements are
  unrelated, they should be quite clearly different.
</p>

A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.

Text Align

Text alignment.

.tr

.tr {
  text-align: right;
}

Right alignment

Example 
<p class="w-100 tr">Things should be what they are</p>

Things should be what they are

.tc

.tc {
  text-align: center;
}

Center-aligned text.

Example 
<p class="w-100 tc">Things should be what they are</p>

Things should be what they are

.tl

.tl {
  text-align: left;
}

Left-aligned text.

Example 
<p class="w-100 tl">Things should be what they are</p>

Things should be what they are

Text Transform

Text transformations.

.ttn

.ttn {
  text-transform: none;
}

.ttu

.ttu {
  text-transform: uppercase;
}

.ttl

.ttl {
  text-transform: lowercase;
}

.ttc

.ttc {
  text-transform: capitalize;
}

.tdn

.tdn {
  text-decoration: none;
}

.tdu

.tdu {
  text-decoration: underline;
}

.u

.u {
  text-decoration: underline;
}

.tds

.tds {
  text-decoration: line-through;
}

.tdo

.tdo {
  text-decoration: overline;
}

Indent

Text indents. This is a seven-step scale with -3 to positive 3.

.indent--3

.indent--3 {
  text-indent: calc( -1 * var(--indent-3));
}

.indent--2

.indent--2 {
  text-indent: calc( -1 * var(--indent-2));
}

.indent--1

.indent--1 {
  text-indent: calc( -1 * var(--indent-1));
}

.indent-0

.indent-0 {
  text-indent: 0;
}

.indent-1

.indent-1 {
  text-indent: var(--indent-1);
}

.indent-2

.indent-2 {
  text-indent: var(--indent-2);
}

.indent-3

.indent-3 {
  text-indent: var(--indent-3);
}

Text Overflow

Text overflow

.truncate

.truncate {
  text-overflow: ellipsis;
}

.clip

.clip {
  text-overflow: clip;
}

Whitespace

Whitespace

.ws-normal

.ws-normal {
  white-space: normal;
}

.ws-nowrap

.ws-nowrap {
  white-space: nowrap;
}

.ws-pre

.ws-pre {
  white-space: pre;
}

Measure/Text Width

Maximum widths useful for text blocks.

.measure

.measure {
  max-width: var(--tw);
}

A standard text width useful for any occassion. This should provide a comfortable reading experience for any font and size.

Example 
<p class="measure">
  A core tenet of design is that same should be same, while
  different be then different. Meaning: if two elements are
  intended to be the same sort of thing, or reference the
  same sort of information, they should have clear
  consonance and harmony. Conversely, if two elements are
  unrelated, they should be quite clearly different.
</p>

A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.

.measure-wide

.measure-wide {
  max-width: var(--tw-wide);
}

A slighter wider, but still readable width.

Example 
<p class="measure-wide">
  A core tenet of design is that same should be same, while
  different be then different. Meaning: if two elements are
  intended to be the same sort of thing, or reference the
  same sort of information, they should have clear
  consonance and harmony. Conversely, if two elements are
  unrelated, they should be quite clearly different.
</p>

A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.

.measure-narrow

.measure-narrow {
  max-width: var(--tw-narrow);
}

A slighter narrower, but still readable width.

Example 
<p class="measure-narrow">
  A core tenet of design is that same should be same, while
  different be then different. Meaning: if two elements are
  intended to be the same sort of thing, or reference the
  same sort of information, they should have clear
  consonance and harmony. Conversely, if two elements are
  unrelated, they should be quite clearly different.
</p>

A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.

Typography Aliases

Aliases to save precious keystrokes.

.p

.p {
  max-width: var(--tw);
  line-height: var(--lh-copy);
}

Set reasonable typography for some text, namely, setting .measure and .lh-copy at the same time.

Example 
<div class="p">
  A core tenet of design is that same should be same, while
  different be then different. Meaning: if two elements are
  intended to be the same sort of thing, or reference the
  same sort of information, they should have clear
  consonance and harmony. Conversely, if two elements are
  unrelated, they should be quite clearly different.
</div>
A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.

.b

.b {
  font-weight: bold;
}

Shorthand for a bold font.

Example 
<p class="b">Things should be what they are</p>

Things should be what they are

.sc

.sc {
  font-variant: small-caps;
}

Shorthand for small-caps

Example 
<p class="sc">Things should be what they are</p>

Things should be what they are

.i

.i {
  font-style: italic;
}

Shorthand for italic

Example 
<p class="i">Things should be what they are</p>

Things should be what they are

On this Page