Typography

A beautiful, consequent and system for typography and text.

Font sizes related

The paragraph text and headings are all well proportioned. Just set one basic value for all your fonts sizes for easy and full control.

Flexible font sizes

Isotoop provides your basic settings for headers and paragraph font sizes. Still you will have the flexibility to change the font size.

Smart responsive

Isotoop focuses on responsive, device-agnostic interfaces. A perfect design system at scales objects and text intelligently.

Proportions

Typography and fonts
in beautiful proportions

The paragraph text and headings are by default well and equally proportioned.

The font size is defined by the basic default fontsize (em) of your WordPress thema. This is usually 16 pixels. When you change this em-value all you headings (H1, H2, H3) will increment with the same proportion.
More about changing em font sizes

isotoop wpgridsystem typo paragraph text heading combination
isotoop-wpgridsystem-typo-heading-proportion-font-size-golden-ratio

All Headings are related

The headings are by default well proportioned and the size is incremented by the same value which is the defined by the Golden Ratio (1.618). The font size of H5 is the same as your regular paragraph text.
Fontsize H3 = Golden Ratio x Fontsize H5
Fontsize H2 = 2 x Fontsize H5
Fontsize H1 = Golden Ratio x Fontsize H3
Fontsize H1 = 2 x Fontsize H4

Don't worry. It's all set up for you in Isotoop.

Flexibility

Flexible typography and font sizes

Isotoop provides your basic styling on headers and paragraph texts and typography.

In this example, you can see 1 header tag in a few different sizes. This makes it possible to vary with font sizes with the same tag.

t-xs Pro

t-s Pro

t-n Free

t-l Free

t-xl Pro

t-xxl Pro

Variable headings and text

So all heading sizes are predefined and determined by your default font size (em). You still have the flexibility to change the heading font sizes. The paragraph text and all headings H6, H5, H4, H3, H2 and H1 are provided in 6 sizes.

6 sizes:

XS
S
N
L
XL
XXL

Example flexible font size

An example of plain paragraph text.
The text in the green box is the default text (em-base value).
The texts with the t-l and t-xl class (style) are bigger.
The texts with the t-s and t-xs class (style) are smaller.
This system applies to all texts and headings.

typography-font-sizes-text-example

Overview of all text styles

See the different values you can apply to your paragraph text and all headings H6, H5, H4, H3, H2 and H1.
Isotoop Free has the t-n and t-l styles. Isotoop Pro has also all other styles.

Variables

xxs
xs
s
n
l
xl
xxl
xxxl

Styles

t-xxs
t-xs
t-s
t-n
t-l
t-xl
t-xxl
t-xxxl

H1 | Heading 1

t-xxs
t-xs
t-s
t-n free
t-l free
t-xl
t-xxl
t-xxxl

H2 | Heading 2

t-xxs
t-xs
t-s
t-n free
t-l free
t-xl
t-xxl
t-xxxl

H3 | Heading 3

t-xxs
t-xs
t-s
t-n free
t-l free
t-xl
t-xxl
t-xxxl

H4 | Heading 4

t-xxs
t-xs
t-s
t-n
t-l
t-xl
t-xxl
t-xxxl

H5 | Heading 5

t-xxs
t-xs
t-s
t-n
t-l
t-xl
t-xxl
t-xxxl

H6 | Heading 6

t-xxs
t-xs
t-s
t-n
t-l
t-xl
t-xxl
t-xxxl
isotoop wpgridsystem typo heading font size h1 heading1
isotoop wpgridsystem typo heading font size h1 heading1
isotoop wpgridsystem typo heading font size h1 heading1

Responsive

Advanced responsive typography

By default the font sizes are already scaled by the Golden Ratio based on the em-size. Isotoop comes with advanced responsive features.

For example

An xxl H1 heading is pretty huge on a big screen. If it scale to a mobile version or smartphone the text would not fit. Isotoop automatically scales the XXL Heading to a smaller size so it fits on smaller screen sizes. This is a huge benefit and time saver.

isotoop-responsive-phone-desktop-900px

Text Color

Color palette for text and typography

Use 250 Isotoop colors for your typography. A complete color palet for all your texts, paragraphs, intros and headings. The Pro version consists of 19 colors. All in 13 tints.

More about Isotoop colors

Isotoop Pro Colors

Red and purple

Red free
Pink
Purple
Violet

Blue colors

Indigo
Blue
Aqua
Cyan

Green colors

Teal
Green
Pear
Lime

Yellow and Orange

Yellow
Amber
Orange
Fire

Brown grey dusty

Brown
Bluegr X
Grey free

White

Black

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Tschichold

Garamond

Adrian Frutiger

Matthew Carter

John Baskerville
Perfect headings

Red 01

Red 02

Red 03

Red 04

Red 05

Red 06

Red 07

Red 08

Red 09

Red 10

Red 11

Red 12

Red 13

13 tints and shades for text color

Every color has 6 steps to white and 6 steps to black.
A complete color palet for all your heading and paragraph texts and typography.

 

t-red01

t-red02

t-red03

t-red04

t-red05

t-red06

t-red07

t-red08

t-red09

t-red10

t-red11

t-red12

t-red13

 

t-grey01

t-grey02

t-grey03

t-grey04

t-grey05

t-grey06

t-grey07

t-grey08

t-grey09

t-grey10

t-grey11

t-grey12

t-grey13

Be consequent

For most WordPress themes

Works with WordPress Gutenberg editor

Easy to use

Will work for years

Stay flexible

Consequent design layout

No coding skills requiered

Consequent design colors for WordPress websites

Save time and energy

How does Isotoop work?

Isotoop consists of prefab simple shortcodes. Paste the shortcode in the existing class (style) field anywhere on your website. This applies to blocks, columns, rows, text and all other elements that have a so called class field in WordPress.

Where to apply style?

You can find the class field in most cases under the advanced tab in your editor, basically everywhere in WordPress.
This way the design is everywhere the same all over your website where you used the style. The bigger the website the more handy, fast and consequent it gets.

Easily add styles

In this example you will see how this works in the WordPress Gutenberg editor. It also works out of the box with the most common page builders like Elementor, Beaver builder, WP Bakery Builder.

Click to enlarge demo

Simple style names

All hundreds of styles have very simple names to make it easy for you to learn and remember. In practice you will use te same codes all the time. For example everything with text starts with t-...

Some examples

Styles text size:

t-xs | t-s | t-n | t-l | t-xl | t-xxl

Styles text color:

t-red03 | t-red07 | t-red13
t-blue03 | t-blue07 | t-blue13

Styles background color:

purple02 | purple06 | purple11
green03 | green07 | green13

Spacing for elements:

margin normal: m-n
margin top: m-t
margin right: m-r

Scroll to Top