Friday 5 April 2013

Typographical Inspiration

GREYSCALEGORILLA:


This is a website dedicated to tutorials for Cinema 4D (industry standard 3D animation software), After Effects (industry standard compositing program) and Photoshop (industry standard photo manipulation software). It has recently been redesigned to be sleeker, smoother and easier to use. The redesign, in my eyes, has been hugely successful. It is almost seamless with and perfect with it's very minimalistic design with bright yet soft colouring and is definitely something I shall draw from when designing my site. However, the aspect I want to focus on is the font. It is sleek, sans-serif and professional looking. 

Below is a section of text from the website:


As you can see it is very nice looking, simple yet sophisticated and professional. It is a designers font. Informal yet presentable and friendly. This is exactly the feel I want to accomplish with my design. I want my website to be educational, professional and reliable without feeling to authoritative and boring. A serif font would seem to much like a text book or an essay that you are being forced to read, dictated in a language that seems to be trying too hard or talking down to you. That is not what I want. I want my website to be conversational and informal. This will help students really engage with the material and not feel as though they are being forced to read it but that they are almost conversing with the site and that the dialogue is helping rather than dictating to them.

I wanted to find out what the font used on this website was and after a bit of digging through the CSS I found this:


The font used is "OpenSans". This is a web-font provided by Google and free to use. I have previously stumbled upon it in my earlier searches for possible fonts. It is great to see it at use in a site I am interested in and see how good it actually looks. I definitely think this is a strong candidate for the font I am going to use due to it's simplicity to find and use.

SMASHING MAGAZINE:


This website is dedicated predominantly to web design. It has really interesting and useful articles which spans from giving designers code for new and interesting buttons/effects to detailed reports into consumer patterns and data. It is a great resource and very well presented. I was drawn to it initially for the colouring however, pretty quickly I was drawn to the font choices. They mix sans-serif with serif, caps with non-caps. It is really interesting and works fantastically well. Now I probably won't be mixing sans-serif with serif fonts but I really like the sans serif fonts and having two of them could work pretty well.

Below is a section of text from the website:


As you can see they mix serif fonts for headings with sans-serif fonts for body text and small links. This works well however, I was mainly interested in the sans-serif fonts. In particular the blue one at the very top for the section header:


I love how blocky and simple it is. It would be really successful at least as a header font but hopefully as well it would look great for body text. I love how it is not too sharp and looks so mathematically perfect even at small sizes. It would be perfect for my design.

I again went digging through the CSS and HTML and eventually found this:


The name of the font is "Proxima Nova". I hadn't heard of this before so I went searching around the web. I found it pretty quickly on sites that allow you to purchase fonts. Probably the best was this http://www.myfonts.com/fonts/marksimonson/proxima-nova/ however, I am a student and would prefer not to be splashing money about on fonts. I wanted to see if I could find it anywhere for free. Unfortunately however, after a fair amount of searching it seems as though it isn't:


Looking back to the CSS it seems as though everywhere that Proxima Nova is used there are backup fonts also specified. Namely Helvetica Neue, Arial and Helvetica. These are all also viable options. I know that Arial is one of the most widely available system fonts available. This is definitely something to consider.

CONCLUSIONS:

After all the research I think that I am going to try and use Arial. After seeing the second site I think I prefer the blockier and more metric look that Proxima Nova and Arial have over the more rounded look of Open Sans. Having said that I am going to use Arial I may look into purchasing Proxima Nova in one of two weights, as it is only $29 for each weight which equates to roughly £19 and I can afford to spare about £30-£40 as I can to use it for a personal project later if need be. However, if I am happy with Arial then I think that is the best bet due to it unparalleled compatibility. 

No comments:

Post a Comment

Blog Archive