Chunky category headers

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 – 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:





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s