Typography and Colour

    Today I looked at how to implement different fonts into my website, how to add colour schemes, and how to add background images. Firstly, I looked at a styleguide, a web page that documents the font, colours, layout and more for a certain company. Here, the company detailed all the different colours that they use throughout all of their presence, and the use of each individual colour (eg. green is positive, yellow is warning). They also detailed the different areas where different font sizes are used, such as which one is used for headings, which for paragraphs etc.

A style guide for Marvel, displaying the different colours they use throughout their brand

    I looked at implementing my own consistent style on my website, beginning with fonts. I used Google Fonts, a resource that hosts hundreds of different fonts that are completely free to use on your own site. Simply select the fonts that you like, and Google provides you with the HTML link to add inside the tags. This will link these fonts to your website, and you can then add the CSS style 'font-family: ****' to individual elements to give specific fonts to specific areas of a site. It is important to have a font that looks good and fits with the style of your site, but it is equally important that your text is readable and accessible. Having elaborate hand drawn fonts may look nice, but if it makes your text hard to read then users will struggle to see all of the great content you have.  tags, and the CSS rule for adding this font to specific elements. This is a simple way to get different and unique fonts on your webpage.

Google Fonts gives you the code, ready to be copied and pasted into your own HTML and CSS files

    The next thing I looked at was colour, and a tool called Adobe Kuler. This tool presents you with a colour wheel and some colour rules. When selecting a colour on the wheel, dependant on the colour rule you have selected, Kuler will select four additional colours that combine to give you a colour scheme. This rule could be 'analogous', where Kuler will pick four additional colours that are in a similar area on the wheel, or it could be 'complementary', and give four additional colours that are completely opposite on the wheel, or it could be a number of other rules that provide other results. This tool is a simple way to find a colour scheme without having to have an extensive knowledge of colour theory or spend to long finding complementary colours, as Kuler does all of the work for you. You can even create a colour scheme from an image, where Kuler will analyse the colours in the image and return a scheme that contains similar colours to those in the image. Colour, like font also plays a big role in the style of your site, but also the functionality. Having big, bold colours will make your site pop and will draw people in, but you still need to ensure that your content is clear and legible.

The Kuler colour wheel, a great tool for finding cohesive colour schemes

    I also learnt how to add a background image to a div, and how to do this from a file as opposed to a URL. I added some images to the background areas where I want my project images to be, across the page. Having the files load from your local area will help with load times, something that can become an issue if you have several large images that are sourced from links. Local files also means that your content won't ever go missing if a webpage deletes the image from the link you're sourcing from.

My portfolio site in it's current state, work in progress

    I have created a GitHub repository for my portfolio site, and have created a gh-pages branch in order to get my site visible in a browser. There is a link to this site on my blog homepage, just under the homepage header, to make it easy for anyone viewing my blog to jump quickly over to the portfolio.

The link to my portfolio on my blog homepage