The next thing we are going to do is work on the default font styles for our professional services website. Let’s come over here to the dashboard and then over to Thesis and Skin Design.
Again, the reason why we set up these default font styles at the beginning is because they’re the other piece of the equation in calculating sizing of everything. That’s why we just set our site dimensions and image sizes up in Agility.
Using Golden Ratio Typography
Agility 3.2 embraces Chris Pearson’s Golden Ratio typography concept. The golden ratio typography says that for a given width of content, there should be anywhere between ninety and one hundred twenty characters per line. And in order for it to be readable and those characters should be a certain height and there should be a certain spacing above them below them.
This changes depending upon how wide the text is. So when a text is really wide it’s going to have a different spacing than when the text is really narrow.
What Agility does is it takes the typical content area, typical content width and the typical font family and the typical heading font family and calculates everything based on that. It also calculates the sidebar stuff based on the width of the sidebar and again the typical font family and the typical heading font family.
It’s one of the reasons why you first setup your typical desktop width and then the second is set up your font styles.
Again, this is the kind of thing that can change. You can change any time you want to but you get a better picture of what your website is going to look like if you make decisions about font styles early and then implement them. That way things don’t shift and spacing doesn’t change.
Choose Typical Web Fonts or Google Fonts
You have two different choices. You can choose the typical font family for text and the typical font family for headings or you can choose from a fairly long list of Google fonts. The world’s your oyster here.
And now you see that you can change this for all kinds of different elements and Agility will recalculate based on your changes but the purpose for this is to set up default conditions.
We could choose PT Sands as our typical test font. They say PT Sands and Merriweather look good together. Choose Merriweather for the typical heading and save those font options. Let’s go to the site and see what the site looks like with these fonts.
A Note About Google Fonts
Something to bear in mind is that Google fonts slow your site down. Google fonts require the browser to load fonts in the display of the web page. So if you use fonts like Arial and Georgia, that is, fonts that are not Google fonts the browser doesn’t have to load those because those fonts are already resident in the browser or in the computer.
So if you’re looking for a really fast site then you don’t use Google fonts. They don’t necessarily slow it down horribly but it is something to bear in mind that if you had five Google fonts on your site, it will be a lot slower than if you had no Google fonts.
Can You Add Other Fonts?
Richard asks “can we add another font”. It depends on what you’re talking about but the answer is, of course, yes you can always add more fonts. If you want to add Google fonts so they can be chosen from a dropdown list, you have to be a PHP programmer but I do have a filter that a PHP programmer can use to add additional Google fonts so they show up in the list and so that they get written into CSS.
You can add your own, you could add typekit fonts. The problem with the typekit font is that there isn’t really a way for that type kit font to show up in one of these dropdown lists which means that you will hard code the font family in custom CSS.
So just like any website can use any kind of font so can Agility use any kind of font though it is built to use a certain set of fonts. It has the built in ability for a programmer to add additional fonts to options and additional fonts to the CSS writing system. So you don’t have to use custom CSS but otherwise you’re you’re doing what you normally have to do which is add stuff from the head of the document and then write your own custom CSS to make it work.
What Thesis Boxes Do?
Robin asked if I’ll be talking about Thesis Boxes. Yes, I’m going to talk about boxes next week but essentially a Thesis Box is like a plugin. Thesis boxes adds some kind of functionality to the website.
Come over and look at byobwebsite. I use a bunch of my own boxes on my site. You can see the boxes I have under member benefits on the menu. Members of my site have access to twenty boxes but I’ve actually got about 45. I’m working on publishing all of those.
Let’s take a look at an example. Come over to the Thesis and manage boxes. I have a box called Display Content by Device. This allows me to display some things to a mobile device and other things to the desktop. I have one called Display Content by Role. Obviously my site is a membership site and this box allows me to display content to paying members, other content to free members and yet other content to people who aren’t members but who are visitors.
I’m using the Filtered Query Box allows me to create a grid of posts that can be filtered by a taxonomy. Come over to member benefits and Thesis 2.3 boxes. The filter box is the box that lets me show you all the different ways you can find related boxes. That’s what these buttons are here. Click on one and you see all the boxes that relate to that topic. You can see ones that work on display control or menus or eCommerce, etc.
Click on mobile and you get Display Content by Mobile Device and I also have a specialized mobile menu if you don’t like the behavior of the typical Thesis menu. In fact I use that specialized mobile menu on mobile views out of this site.
If we look at membership, I have this Display Content by Rule box. This is that filter box.
I’ve got an Archives Results Filter which is a little bit different than this. You can use it to filter products on an eCommerce store. And I’ve got WPE store Product Elements which lets you put price and buy now buttons, that sort of thing on a page for a product.
I’ve got all kinds of content ones so I’ve got the video publishing system and I’ve got the testimonials publishing system. Earlier in the course I showed you that that londontranslations.co.uk site that was built in part using the byob testimonials publishing system.
The video publishing system is for video sites or sites that have lots of videos on them. If you’ve got a category you don’t want to show up on your blog page or your posts you can use this box to exclude really any taxonomy, not just categories. It could be a category, tag or custom taxonomy and it will exclude those posts from the posts .
You may have some tracking script you want only on one page. There are all kinds of reasons why you might want a script only on one page. This page specific scripts box does that.
Those are the sorts of things that boxes can do. They’re all just like plugins that do various things for you on your site depending upon what it is you want. We will talk about them further because we will be installing and implementing them over the next week.
Can Boxes Slow Down Your Site?
Roscoe asks “do too many boxes slow your site?” Theoretically, yes too many boxes can slow your site down. Let’s look back at my site. You can see I use ten boxes and forty three plugins and my site is quite fast but I’m very selective about what I use and I am working to be more selective.
So yes too many of any of these things can slow your site down. They all take processing power one way or the other especially things like display content by device and display content by role. This happens every time a page loads. So before the page gets sent back to a browser the servers have to decide what kind of device it is and which piece of content to display to it depending upon what device is asking for it. That is processing power that is taken up by this box.
The same thing is true with display content by role. Pretty much all these things require processing power before pages are rendered. Although, I think my site is pretty fast and it’s gotten way faster in the last few months.