Typography[ Variable Reference ]

Jellyfish provides default styling for all standard typography tags.

For easy spacing, Jellyfish removes the top margin and applies a bottom margin to block elements which can be defined with the $element-margin variable. Text sizing is set with em, cascading from the root. You can use the grid breakpoint settings to alter the root font size and line-height at different breakpoints.

Headings <h1-h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Ordered List <ol>

  1. Sed quanta sit alias, nunc tantum possitne esse tanta
  2. Nam si propter voluptatem
    1. quae est ista laus
    2. quae possit e macello peti
  3. Nam, ut sint illa vendibiliora
  4. haec uberiora certe sunt

Unordered List <ul>

  • Sed quanta sit alias, nunc tantum possitne esse tanta
  • Nam si propter voluptatem
    • quae est ista laus
    • quae possit e macello peti
  • Nam, ut sint illa vendibiliora
  • haec uberiora certe sunt

Definition List <dl>

Term 1
Sed quanta sit alias, nunc tantum possitne esse tanta.
Term 2
Nam si propter voluptatem, quae est ista laus, quae possit e macello peti?
Term 3
Nam, ut sint illa vendibiliora, haec uberiora certe sunt.

Anchors <a>

Text hyperlinks are styled with a simple hover animation for accessibility. The animation uses the smooth(color) mixin for a consistent transition to the text color. See mixins for more information.

Blockquote <blockquote>

A journey of a thousand miles begins with a single step.

Lao Tzu

Pre-formatted Text <pre>

console.log("JellyFish is Awesome!");

Text Formatting

Element Example
<strong> or .bold This text is important however the .bold class can be applied for the same effect without the implied semantics.
<em> or .italic This text has emphasis however the .italic class can be applied for the same effect without the implied semantics.
<u> This is underlined text
<s> This is strikethrough text
<a> This is an anchor
<small> or .small

This text has been defined via .small but you can also use the small tag where semantically appropriate.
<sup> This issuperscript text
<sub> This issubscript text
<code> This is code text
<samp> This is sample text
<var> This is variable text
<kbd> This is keyboard text
<abbr> This is abbreviation text
<del> This is deleted text
<ins> This is inserted text
<mark> This is marked text

Utilities

Simulating headings

You can use modifier classes to simulate heading hierarchy on a non-heading level element.

CSS Tag Example
.h1 I'm the same font-size and line-height as a h1 tag
.h2 I'm the same font-size and line-height as a h2 tag
.h3 I'm the same font-size and line-height as a h3 tag
.h4 I'm the same font-size and line-height as a h4 tag
.h5 I'm the same font-size and line-height as a h5 tag
.h6

I'm the same font-size and line-height as a h6 tag - even though I'm semantically a h3!

Font Weight

Providing your typeface supports these weights, you can use weight-* modifiers to change text weight.

  • .weight-hairline
  • .weight-thin
  • .weight-light
  • .weight-normal
  • .weight-medium
  • .weight-semibold
  • .weight-bold or .bold
  • .weight-xbold
  • .weight-black

Keep words together

If you need to keep certain words together (e.g. brand names), wrap them in a span with the utility class .nowrap.

Note: This may cause elements to break out of their container and for paragraphs to be ragged - you have been warned!

Since the early 1980's, Jellyfish stingers inc. have been producing high-quality replacement stingers for injured jellyfish.