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
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.
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
Styles
H1 | Heading 1
H2 | Heading 2
H3 | Heading 3
H4 | Heading 4
H5 | Heading 5
H6 | Heading 6
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.
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
Blue colors
Green colors
Yellow and Orange
Brown grey dusty
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
