Agility Skin for Thesis header image
The Optimum Mix of Power and Simplicity

Smart Typography

Golden Ratio Everywhere!

I’m a big fan of Chris Pearson’s Golden Ratio Typography.  The old Agility did a decent job of this as long as you were using the 2 column 2/3 + 1/3 layout.  And it really only worked with text and not headings.

And actually it’s easy to do the calculation if you know the font size, font family and content width.  But it becomes a real challenge when you put Google fonts, headings, 6 content widths and 5 site widths!

Add to that your ability to use custom sized fonts and it gets really hairy.

Agility 3 can do it all

Set your primary font size, primary font family, heading font family, site width configuration and column configuration and Agility takes care of the rest!  It will calculate all heading sizes, line heights, padding and margin for every possible condition – including small mobile devices.

5-26-2015 3-36-13 PM

Plus you are still in control

If you want to change the font size, or font family in one location or another – Agility automatically calculate the Golden Ratio stuff for that section with the new font as well.  Agility has 72 separate areas where you can customize the font size and family.  Each one of those customizations will result in the exact right settings for font size, family and content width.

5-26-2015 3-38-13 PM

For the Nay Sayers

OK, perhaps you think the line height might look better a little smaller?  No problem.  Anytime you can specify a font size, you can specify a line height.  You don’t have to – it’ll be automatically calculated – but you can!

5-26-2015 3-39-36 PM

Google Fonts

Agility includes a google load of Google Fonts to choose from.  And the savvy web designer can even add their own.

5-26-2015 3-41-14 PM

H1 – Examples of default typography

H2 – Agility can do it all

H3 – Agility can do it all

Paragraph text in between headings. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac odio id nisl volutpat tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rhoncus, tellus vel ornare maximus, mauris augue posuere lorem,

blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac odio id nisl volutpat tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rhoncus, tellus vel ornare maximus, mauris augue posuere lorem,

H4 – Agility can do it all

Paragraph text in between headings. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac odio id nisl volutpat tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rhoncus, tellus vel ornare maximus, mauris augue posuere lorem,

  • ordered list item
  • ordered list item
  • ordered list item
  • ordered list item
H5 – Agility can do it all

Paragraph text in between headings. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac odio id nisl volutpat tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rhoncus, tellus vel ornare maximus, mauris augue posuere lorem,

H6 – Agility can do it all

Paragraph text in between headings. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac odio id nisl volutpat tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rhoncus, tellus vel ornare maximus, mauris augue posuere lorem,