I have decided to have chunky ‘stamp’ effect category headers on the site. Here are some initial sketches for what I planned to create:
I found a font that would fit the bill perfectly at dafont.com – it’s called “Press Feeling Eroded”.
In photoshop I composed a header for each category using this new font. Here is an example:
I have added a green background to help when composing and editing the images, but I remove this when being saved for web as the background is to be transparent on the web-page allowing the green background of the site to show through.
Here one of the category headers in situ:
I decided to see if I could optimize the file size of these category headers by inputting the headers directly into HTML, positioning as required using transform etc as separate divs within a containing div, and have the font imported to the site via font-face tool. However, before I even got to experimenting with positioning, I realised that the font file that the browser would have to load was very big (1.21MB) and was causing a delay even when opening locally – this would be even worse when online. I did some research into the feasibility of have the font file only containing the specific characters that I require to get the size down, but it the end decided to just stick with PNG files. For some reason, loading the fonts straight into the browser also lost a considerable amount of clarity, which is strange: