A Simple Typography Guide
Why I am writing this guide
OKJ Discoveries is still in its infancy with many changes done every month. One area that has gone through such change is typography.
I had largely ignored the slew of choices that Microsoft Word provides, using only the default font (Time News Roman) or Arial when my polytechnic project guidelines request it. Of course, on some rare occasions, I tried out new fonts, though these fonts were selected blindly through the skimming of the list with no appreciation or knowledge about it.
Having started OKJ Discoveries, I once again used this same mindless path of default settings, and while they weren’t necessarily bad, I started to notice how typography affects the overall reader’s experience – how it provokes familiarity and clarity. I started playing with the news application (Weave News Reader) on my Windows Phone, and found out that they had the option to change not only the fonts but also the background colours.
A few minutes of exploring the different combinations, it was clear that I should do something about my blog regarding this area. Thus I dived into the world of typography and like sailing across the ocean without knowledge about navigation, I was hopelessly lost. However, through the journey, I took baby steps, and started to learn bits and pieces that accumulated into this new found knowledge which aided by journey in gaining more.
This guide highlights some of the resources I had used as well as some tips that will guide you to typography enlightenment. While I am not promising that you would grasp this subject entirely (honestly I am still dizzy from it), I feel that with a first-time blogger’s perspective, this guide will hopefully be something useful for others like myself.
1. Take Baby Steps so that You Won’t be Lost
Take a quick search on the internet and you will find that there are many more fonts than those just found on Microsoft Word. However, there isn’t much in terms of understanding why there are so many. And rushing down to the library to borrow some books on typography will not help because they are still just paper with words you don’t understand, mocking you as you browse through the pages with a clueless look.Thus, start with these 2 resources before heading out on this journey:
“The History of Typography” Youtube Video This is a very creative introductory video. With typography having such a long history, there is no better way to jump into centuries of this art form’s history in 5 minutes than with this paper-letter animation.
Interactive Guide to Blog Typography This guide is straight-forward, interactive, and truly the one of the best resources you will find in understanding the jizz about typography and more specifically, how to optimize it for blogs.
I am unable to find other guides that provide such specific information regarding blog typography that is easy to digest – making it ideal for those who do not have any prior knowledge about typography. I urge all who wants to improve or learn more about typography to use interactive guide as a starting platform.
For some, the “Interactive Guide to Blog Typography” would be enough, as it would have guided many to the answer they were looking. However, I personally wanted to find out more about typography, of which the interactive guide only provides a glimpse of. If you are like me - requiring more information before acting on improving your typography, move on to Step 2.
2. Go to the Library. Its Free and Near Effortless
The 2 resources highlighted previously would have built a decent foundation in which we can use to increase our knowledge on this art form and truly understand what typography is, what they do, and how can they ultimately be utilized for our various purposes.However, to continue further, we will have to leave the Internet, and go to the offline database, known as the library. There should be loads of books about typography, but as this subject as vast and will take years to master (at least for me), do look about for those most relevant to our situation, that being blogging.
Here are the books I borrowed:
- >Type< for the Internet and Other Digital Media by Veruschka Gotz
- Basic Design: Typography by Ambrose/Harris
- White Space is not Your Enemy by Kim Golombisky & Rebecca Hagen
- The Complete Guide to Digital Type by Andy Ellison
Of these 4 books, I would highly recommend the first one.
“>Type< for the Internet and Other Digital Media” is a book that covers the brief history of typography, typography on paper and on screen, and most importantly, the answer to our question, which fonts are suitable for the screen and how to improve suitability on screen.
Of the 4 books, it is the one most relevant to us. And also provides insight on other important factors influencing typography and the overall reader experience, such as colour.
Do also read the “Basic Design: Typography”, as it is part of a series which cover other related aspects including Layout, Image and Colour, with each a book on its own.
The last 2 books are great sources of inspiration. While “White Space is not Your Enemy” is more towards typography on paper and other physical medium and “The Complete Guide to Digital Type” is more towards the designing of a font, both will help in a higher level of improving the aesthetic beauty of our blogs and works.
3. Play Around With What You Had Learned
I prefer learning through application, so use what you have discovered in step 1 and 2 in your current or upcoming works and blog posts. This simple guide is one example of this very step.In this guide, I had chosen Helvetica, a neo-grotesque san serif which had become a classic and one of the most popular fonts to use on screen. The reason, as highlighted in >Type< for the Internet and Other Digital Media, was because of the elevated x-height (height of lowercase letters).
This makes the Helvetica font easy to read on screen, and with so many notable websites using this font, it is recommended to use Helvetica as a starting font in your posts while diving more into typography and discovering other fonts that may better suit your style.
As for the headings and sub-headings, that I had chosen Rockwell, a slab serif designed in 1934, which quickly became an American classic. It displays well on screen with its determined linearity.
Distinguished by its uncompromising formal design, the Rockwell font is emphatic (expressing something forcibly and clearly), therefore making it a great choice in use as headings and sub-headings.
4. Continue To Discover This Art Form
Chances are by the time your loan on the book expires, which mine will in 3 weeks, you will still find yourself scraping at the basics of typography. It will spark a new journey, and will open you up to so much more, such as Colours, Layouts and Images, all of which play a vital role with Typography to alleviate your blog or work to "Design Nevada".
Other more immediate elements, such as line height, font sizes, are also crucial to this entire topic - of which I had kept the font size at its default 100% but increased line height to 1.8em. This is because my posts are viewed in full width, and thus the increased line height is necessary to provided sufficient leading for comfortable reading.
While I am still at the start of this journey, and while my fonts are set for now, it may change in the near future as I learn more about what other fonts are and what they do in affecting the overall reader’s experience.
There are more resources out there to help with this learning journey. If you were to search for fonts on the internet, you would see sites like Dafont and 1001 Free Fonts. This may leave you dizzy, so try Typesetter, a site that lets you compare different fonts side by side.
Also, if you are using wordpress.com without the custom design pack, you will find it slightly troublesome to change the fonts. There is no easy way to do it, but to learn how, check out this link here.
It is worth the time, for the readers, and for the satisfaction of a post well written.
The time needed to implement the code changes will be reduced once you get used to it. Another way of reducing the time taken is to create code strings and copy on a notepad, which can be pasted immediately onto the html page of the post. This method also ensures that all post typography is consistent.
I hope that you had found this guide useful in starting yours, and I will definitely write more about it as I continue to learn. If you got any other resources to recommend, do comment below and I'll put it up for all others to see! Do also like this post if it helped you in anyway =D
Till then, Cheers!