Typography

Pack name: seed-typography

Typography pack for Seed

Contents

Install

npm install seed-typography --save

Dependencies


About

Seed CSS introduces a new prefix to compliment those defined ITCSS. The new prefix namespace is tx, which is reserved for typography.


Alignment

All of the following classes support responsive modifiers.

Class Text alignment
tx-justify justify
tx-left left
tx-center center
tx-right right

Example

Hey! I'm in the center :)
Oh, that's cool. I'm on the left
<div class="tx-center">
  Hey! I'm in the center :)
  <div class="tx-left">
    Oh, that's cool. I'm on the left
  </div>
</div>

Break

Class Word break
tx-break-all break-all
tx-break-normal normal
tx-break-keep-all keep-all

Decoration

Class Text decoration
tx-no-decoration none
tx-no-underline none
tx-overline overline
tx-strikethrough line-through
tx-underline underline
I'm underlined! I must be super important.
<span class="tx-underline">I'm underlined! I must be super important.</span>

Headings

All of the following classes support responsive modifiers.

Class Font size
tx-h1 3rem
tx-h2 2.25rem
tx-h3 1.5rem
tx-h4 1.25rem
tx-h5 1rem
tx-h6 0.875rem

I may be an H1, but I look H3

<h1 class="tx-h3">I may be an H1, but I look H3</h1>

Headlines

All of the following classes support responsive modifiers.

Class Font size
tx-headline-1 5rem
tx-headline-2 4.5rem
tx-headline-3 4rem
tx-headline-4 3.5rem

I'm so big.

<h3 class="tx-headline-3">I'm so big.</h3>

Line heights

All of the following classes support responsive modifiers.

Class Line-height
tx-lh-none 0
tx-lh-reset 1
tx-lh-heading 1.2
tx-lh-body 1.5
tx-lh-copy 1.6

Title: Heading line-height

This line-height is better for copy.

<h3 class="tx-lh-heading">
  Title: Heading line-height
</h3>
<p class="tx-lh-copy">
  This line-height is better for copy.
</p>

Sizes

All of the following classes support responsive modifiers.

Class Font size
tx-lead 3.5rem
tx-xl 1.28rem
tx-lg 1.14rem
tx-md 1rem
tx-sm 0.92rem
tx-xs 0.72rem
I'm super small.
<span class="tx-xs">I'm super small.</span>

Smoothing

Class Font-smoothing
tx-smooth antialiased
tx-smooth-auto auto
tx-smooth-initial initial
tx-smooth-none none
I so smooth. I totes not smooth.
<span class="tx-smooth">I so smooth.</span>
<span class="tx-smooth-none">I totes not smooth.</span>

Transform

Class Text-transform
tx-capitalize capitalize
tx-lowercase lowercase
tx-uppercase uppercase
Ah! All caps!
<span class="tx-uppercase">Ah! All caps!</span>

Truncate

You can truncate text by adding the .tx-truncate text class to the selector containing the text.

Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced by Pixar Animation Studios and released by Walt Disney Pictures. Directed by John Lasseter, Toy Story was the first feature-length computer-animated film and the first theatrical film produced by Pixar.
<div class="tx-truncate">
Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced
by Pixar Animation Studios and released by Walt Disney Pictures. Directed by John Lasseter,
Toy Story was the first feature-length computer-animated film and the first theatrical
film produced by Pixar.
</div>

The CSS method of truncating requires the selector to be display: block. For selectors like <a> or <span>, we recommend you use the utility class of .u-d-block from seed-display to update the display property to block.

<a class="tx-truncate u-d-block" href="#">
Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced
by Pixar Animation Studios and released by Walt Disney Pictures.
</a>

Weight

Class Font-weight
100 100
200 200
300 300
400 400
500 500
600 600
700 700
800 800
900 900
lighter lighter
normal normal
bold bold
bolder bolder

I so thin.

I so bold.

<h4 class="tx-300">I so thin.</h4>
<h4 class="tx-800">I so bold.</h4>

White-space

Class White-space
tx-ws-nowrap nowrap
tx-ws-pre pre
tx-ws-pre-line pre-line
tx-ws-normal normal

Wrap

Class Word-wrap
tx-wrap-break break-word
tx-wrap-normal normal