Build Your Own Business Website header image

Styling Fonts in Agility – the font pattern

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that that we have spoken about the patterns you’ll find in Agility’s Skin Design Options, let’s talk about styling fonts.

Dimensional Element of Fonts

The typical text font family and the typical heading font family are two of the dimensional elements in Agility. We talked in a prior session about how desktop with typical content with a typical sidebar width set the size of fonts. Well, those font sizes change depending upon the font family because some fonts are narrow while some fonts are wide.

The golden ratio typography is trying to get an ideal number of characters per line and so this character per line gets calculated differently for different fonts, for Georgia differently than it does for Arial. Again, it’s different for Arial Black than for Arial Narrow. So this ends up being part of your calculation.

What Affects the Sizing

It takes the width of the page, the width of the columns and the font families and sets up all the typical fonts, all margin, all padding, all line-heights and all font sizes. It takes all of that into consideration and then sets all of that up automatically for you once you have set those options.

That’s why these font families for the typical text and the typical heading are set aside separately from the rest of the font styles. These two are critical for calculating the size of things on the site.

But then you have sort of the typical style options. Let’s look at Heading 3 here for a second. We’ve got our font family, our font size, our font color. We’ve got additional font style options such as font weight, font style, font variant, text transform, text align, letter spacing and line height.

Automatic Calculation

Now line height is automatically calculated for an h3 tag and so is the font size but if you change the font type here or the font family for heading 3, it will automatically calculate size and a line height for that particular heading.

However, if you don’t like the way it’s calculated you can change the font size and you can change the line height.

I do a ton of automatic calculation for you but if you don’t like it you can change it. Automatic calculations are based on Chris Pearson’s golden ratio typography system. I calculate it all for you and you never have to set those but if you’re not happy with it when you look at it you can always set them yourself.

0 Comments… add one
0 comments… add one

Leave a Comment