This site with comic sans as the main font<\/figcaption><\/figure>\nIf by this point you’ve made your font accessible, as well as diverse, you still may not have picked a good font. Take this site for example and see how it looks by changing the font to (the dreaded!) Comic Sans. Absolutely nothing has changed except the font, and yet it has now drastically changed the presentation. I would hope readers are in agreement that it looks very poor.<\/p>\n
Ultimately, font choice is a hard one to know when it’s right but quite easy to know when it’s wrong. To an extent, content will dictate what looks right (which is why it’s important to get the content first) and each design will obviously be different. Depending on how you design, you may prefer to choose your fonts first and then go with what works, or you may prefer to layout the structure and content and then pick an appropriate typeface.<\/p>\n
Letter spacing<\/h2>\n As touched on in the previous section, this is a good way of customising a font and make it stand out from the preset version. Letter spacing basically refers to the space between each letter in a word. Using the body text from this site, the examples below show the way the font can change, using letter spacing ranging from -3 pixels up to +3 pixels.<\/p>\n
The quick brown fox jumps over the lazy dog<\/span><\/p>\nThe quick brown fox jumps over the lazy dog<\/span><\/p>\nThe quick brown fox jumps over the lazy dog<\/span><\/p>\nThe quick brown fox jumps over the lazy dog<\/span><\/p>\nThe quick brown fox jumps over the lazy dog<\/span><\/p>\nThe quick brown fox jumps over the lazy dog<\/span><\/p>\nThe quick brown fox jumps over the lazy dog<\/span><\/p>\nLine height<\/h2>\n Line height is a good way to make body text more readable. It has a few options, in that you can define it as a specific pixel height, or you can define it as a height\u00a0relative to the\u00a0size of your font i.e. if your font size is 14 pixels and your line height is set to 1.5, it would make the real pixel line height 21 pixels. Using a relative line-height throughout your site can be a good way of ensuring that your text is consistently spaced. If you use an actual pixel height throughout the site, this can become an issue when using bigger fonts i.e. if you used the above example of 21 pixels as a line height, fonts that are bigger than 21 pixels in size would then end up having the space between lines reduced and in some cases, may overlap.<\/p>\n
Below is an example of various different line heights:<\/p>\n
Relative line height of 1<\/h3>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<\/span><\/p>\nRelative line height of 1.4<\/h3>\n It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/p>\n
Relative line height of 2<\/h3>\n It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/span><\/p>\nPicking the right line height is important for accessibility and as is evident from the above, it’s the difference between making text more spaced and readable, and making it almost appear as if each line is unrelated.<\/p>\n
Font weights<\/h2>\n Using font weights is a great way to change emphasis between different parts of your site. I personally prefer to use lighter weights for body text and heavy weights for titles, as demonstrated on this blog. One of the main reasons behind using a lighter weight for body text, is it really highlights the difference between titles and any bold text that may be within the body in order to stand out. If the body text was simply a medium weight, the difference becomes less subtle and the emphasis can then be lost.<\/p>\n
As per with letter spacing, font weights can completely change the look of a font to the point that it can appear as if it’s a completely different family.<\/p>\n
Things to avoid<\/h2>\n There are two pet peeves of mine when it comes to font styling. The first is excessive use of colours. When picking a theme for a site, I tend to try and not have too many base colours (5 or 6 at most tends to be appropriate) but in particular, I look to stick to the same colour of body text throughout. Sometimes a secondary colour is perfectly appropriate (such as for links, or emphasis), although I prefer to use the method described above using font weights to differentiate.<\/p>\n
However, using multiple colours for body text looks so unprofessional and nostalgic for all the wrong reasons. There’s nothing worse than seeing a nicely designed site that has been ruined by lines of<\/span> text that<\/span> are coloured<\/span> in different<\/span> ways<\/span>. See. It’s difficult to read and it doesn’t add emphasis to the text. Please don’t do it.<\/p>\nThe other thing to avoid has already been touched on. Comic Sans is a horrible font that should not be used in any professional environment. Just stay well clear of it, as it’s not going to help you in any way.<\/p>\n
Font Resources<\/h2>\n In terms of places to look to find fonts to use on your site, my main preference is Google Web Fonts<\/a>. It offers a great variety of fonts as well as an in-browser preview of how the font will look on your site. The fonts are also loaded via a Content Delivery Network, so theoretically it should download faster regardless of location.<\/p>\nIf you have desktop fonts that aren’t on Google, some alternatives are:<\/p>\n
https:\/\/typekit.com \nhttp:\/\/www.fontsquirrel.com (allows you to upload desktop fonts to be converted into a web font) \nhttp:\/\/www.dafont.com<\/p>\n
and for icons in a font format<\/p>\n
http:\/\/fortawesome.github.io\/Font-Awesome\/ \nhttps:\/\/icomoon.io<\/p>\n","protected":false},"excerpt":{"rendered":"
When designing a site, the one part I sometimes find the hardest, and ultimately most crucial, is the font choice. For me, this can completely change the way the site looks, even if the structure and content doesn’t change at all. In this blog, I want to explore the various different aspects of fonts and what a subtle font change can do for your presentation and accessibility. The topics I will discuss are:<\/p>\n","protected":false},"author":1,"featured_media":222,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[42,43,44,24,45],"acf":[],"yoast_head":"\n
Web Design Glasgow - Best fonts for websites<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n \n\t \n\t \n\t \n