Selecting your Website Fonts & Sizes
Selecting your Fonts
- More than likely, you have already established brand guidelines prior to your website build. It is very helpful if the fonts that you selected for your brand are either Google fonts or websafe fonts. Don’t worry, this doesn’t include your logo! Logos are typically pngs (images), so the font selection doesn’t apply here. Chrome has a fabulous extension called WhatFont if you want to know what font another website is using. Techy Tip: Sometimes WordPress wont allow you to upload additional fonts. Upload the plugin Easy SVG Support and try again!
- Stick primarily with a serif or sans-serif. Anything else can be difficult to read. Here’s a helpful article with an infographic.
- Make sure that your font family includes at least one websafe font and ends with the generic family. Here’s an example: font-family: Montserrat, Helvetica, sans-serif;
- Your web designer or developer will upload the fonts to your website and/or use Google Fonts to get the embed code. I personally like Montserrat because the available styles go from very thin to very thick. Techy Tip: The best practice is to include Regular, Italic, Bold, and Bold Italic weights in your upload.
Font Size Hierarchy
When structuring your website with HTML headings (h1, h2, h3, etc.), it’s essential to consider both visual hierarchy and accessibility. The h1 tag represents the main title or topic of your page, often the most significant text. Subsequent headings like h2, h3, and so on, should be used to denote subtopics or sections. Google uses the headings to understand the content and structure of a webpage. The more Google understands the topic, the more times your content will be served for relevant search queries.
Think of it as a book’s table of contents: h1 is the book’s title, h2 chapters, h3 subchapters, and so on. This structure not only makes content visually organized but also aids screen readers for those with disabilities, making your website more inclusive and user-friendly. The more accessible a website is, typically, the better SEO- it makes for easier crawling.
Start with your Body Text
This is the primary text that you see. Font, color, size (at least 16px), and line height. The line height is typically more important here than the headings because headings tend to be shorter.
Techy Tip: The body tag represents the whole page, and on a page, there can be many paragraphs (paragraph tag) that separate the text as a group on a page. So, the paragraph tags will always be inside the body tag.
Then Move on to your Headings
H1 will be your most significant text. This font must stand out since it is the most important content on the page. Take a look at an example CSS below for ideas. Think of h1 as the name of your book, h2 as your book sections, h3 as your chapters, h4 as your subchapters, and so on. Scroll down for example CSS.
I hope this was helpful!
Doing this BEFORE you start building your website and writing blog posts is so much easier. Trust me, I learned the hard way! Please leave a comment if you have any questions, or additional helpful tips.
Body {
font-family: Montserrat, “Open Sans”, sans-serif;
font-size: 16px;
font-weight: 400;
color: #5F5F5D;
line-height: 1.7em
}
h1 {
font-family: ‘Playfair Display’, ‘Linotype Didot’, serif
font-size: 36px;
color: #76A5AF;
line-height: 40px;
}
h2 {
font-family: Montserrat, “Open Sans”, sans-serif;
font-size: 30px;
color: #76A5AF;
line-height: 1.5em;
}
h3 {
font-family: Montserrat, “Open Sans”, sans-serif;
font-size: 18px;
font-weight: 500;
color: #76A5AF;
line-height: 1.5em;
}
h4 {
font-family: Montserrat, “Open Sans”, sans-serif;
font-size: 18px;
color: #5F5F5D;
line-height: 1.5em;
}