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:

Image

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:

Image

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:

Image

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:

Image

 

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s