Adjusting font size

small

Make type smaller (.9x):

This is a small paragraph.

<p class="small">This is a small paragraph.</p>

medium

Make type the default size, usually as an override:

This is a medium paragraph.

<p class="medium">This is a medium paragraph.</p>

big

Make type bigger (1.25x):

This is a big paragraph.

<p class="big">This is a big paragraph.</p>

huge

Make type huge (1.5x):

This is a huge paragraph.

<p class="huge">This is a huge paragraph.</p>

headline text

The composables work on headline text too:

Whoa.

<h1 class="huge">Whoa.</h1>

Enforcing text measure

The composable text-width enforces a standard text measure. Text measure is how many characters fit on each line. This paragraph is set to this standard text measure.

A smaller version of the same concept is card-width, which works for pull-out quotes, notations or other smaller blocks of text.

This paragraph is inner-card-width.

<p class="inner-card-width">This paragraph is inner-card-width.</p>

Responsive text

Text size is responsive, meaning it's smaller on small screens and larger on large screens. This behavior is automatic, set in properties.less in the Less version.

Helper classes

text-center

Center text:

Centered.

<p class="text-center">Centered.</p>

text-padding

Give text padding, which is great for colored backgrounds:

This text doesn't go right to the edge.

<p class="text-padding red">This text doesn't go right to the edge.</p>

text-margin

The same as text-padding, but applied to margin:

This paragraph has a slight margin.

<p class="text-margin red">This paragraph has a slight margin.</p>

text-shadow

Gives the standard shadow to text.

This paragraph has a shadow.

<p class="text-shadow">This paragraph has a shadow.</p>

Text effects

Make text bold, italic, or underline with the corresponding composable classes.

<span class="bold">bold</span>, <span class="italic">italic</span>, or <span class="underline">underline</span>

Font families

Cavepaint's font stacks are designed to use system fonts, or in other words designed to already be on the user's computer.

sans-serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu bibendum urna, eget volutpat arcu. Donec consequat eros purus, vel ultricies libero dictum et. Sed tempor turpis in ipsum iaculis viverra. Donec vitae auctor urna.

<p class="sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu bibendum urna, eget volutpat arcu. Donec consequat eros purus, vel ultricies libero dictum et. Sed tempor turpis in ipsum iaculis viverra. Donec vitae auctor urna.</p>

serif

<p class="serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu bibendum urna, eget volutpat arcu. Donec consequat eros purus, vel ultricies libero dictum et. Sed tempor turpis in ipsum iaculis viverra. Donec vitae auctor urna.</p>

monospace

<p class="monospace">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu bibendum urna, eget volutpat arcu. Donec consequat eros purus, vel ultricies libero dictum et. Sed tempor turpis in ipsum iaculis viverra. Donec vitae auctor urna.</p>

Like any CSS, Cavepaint will work fine with web fonts. The font stacks can be edited in their corresponding CSS custom properties.

Changing text color

text-color

Use the .text-color composable with any color class to specify that you want to color the text, not the background.

A red headline

<h1 class="text-color red">A red headline</h1>

Dark gray paragraph text makes for de-emphasized but still readable text.

<p class="text-color dark gray">Dark gray paragraph text makes for de-emphasized but still readable text.</p>

Bold red paragraph text may elicit memories of grade school grammar teachers.

<p class="text-color red bold">Bold red paragraph text may elicit memories of grade school grammar teachers.</p>

A dark gray headline with a third tetrad span

<h3 class="text-color dark gray huge text-crunch">A dark gray headline with a <span class="text-color third tetrad">third tetrad</span> span</h3>