Archive for the ‘Typography’ Category




My main client for web design is my partner Paul who is a photographer and asked me to help design and build his website. What he actually meant was can I build it to his design? It had been a while since I had done this and so we spent some time putting together his online portfolio in time for his graduation from Staffordshire University in 2007. I used flash for the galleries as I wanted to get back into the program, I like the smoothness of it and it makes it a little more difficult to just right click and save an image. The link on the front page was a flash banner with separate buttons on it and the colour scheme was selected to match his Willford Photographic company colour scheme with the layout based on his business card. All in all we were very pleased with it and got some good comments.



He has spent the year since his Graduation building up his photography portfolio and has been worried that as a portfolio it doesn’t do him justice, so recently he has been asking if I can fit in an update of the images.

As it happens, I have lost all the flash files I made the galleries with. I had a different layout saved that I had used briefly for another photographer, but that is a very different story about trying to do someone who calls themselves a friend, a favour. I would have had to completely rework the layout though, so I began to look at other ways of making the galleries which didn’t involve an adobe-make-it-for-you type of thing.

I was chatting about it when someone mentioned the ‘light box’ gallery idea. It’s just a bit of code, I was told. I should have known better. I can barely remember the very short lived introduction I had to HTML and I never really got the whole CSS idea. But I thought it would be a good idea to try something new so I did a Google search and came up with a link to the website of the producers of the light box, by Lokesh Dhakar at

It all seemed very simple and straightforward but I wanted to see it in action so I found another site which was using it to see how it might work.

I also found a link for a site using ‘shadow box’ which seemed to be much the same thing only slightly different.

I found a site which used the lightbox for its gallery and I realised that it would be a nice way to display the images on Pauls site and as he had previously asked about a similar effect, I thought he might be pleased about it.

As it turns out Paul was thrilled with the idea and so I went ahead and made new gallery pages applying some CSS to the fonts but did not figure out how to apply the CSS to use again. So to save time, as I had given myself a week to finish this, I just copied and renamed all the subsequent gallery pages. I then resolved to figure it out afterwards when I had a bit more time.

I decided on a layout and prepared all the portfolio images, resizing them and making the thumbnails, I also applied a drop shadow to the images so they stood slightly out from the light box area on screen.

I also did a few HTML tutorials at which got me back into the swing of things enough to feel confident that I could apply the light box script to my web galleries and then spent 2 days trying to figure out what I had done wrong. At this point, and very late in the day, I took some screen shots of what I had done and emailed them to a programmer chap that Paul knows with a big sheepish ramble asking for help and copied the same thing to Luke as he had been so adamant that it would be really easy. E.g.

It was silly o’clock in the morning and no one seemed to be online for me to IM and ringing people up was out of the question so I gave up in disgust at myself and with the situation and went to run a bath. While it was running I started to look on the net for a solution, it couldn’t be this hard could it? I knew it was probably something I hadn’t done properly but couldn’t just place it and I did not have any real knowledge of java scripting. I looked at the source code for the site I got it from to see how the code differed.

My searching led me to forums. I cannot remember the place I found it as I was so excited to have figured it out I didn’t bookmark the site nor take a screen shot. I didn’t find an answer to the questions I had asked, but I found a question from someone else about a different issue, but the way in which the question had been formulated gave me the information I needed. I hadn’t put the Java script into its own folder because I had not realised that needed to be done. I did this and then found I had a couple of glitches so I printed off the code I had and went away to read it in the bath. I noticed a couple of things I had put in the wrong place and when I fixed these I began to sort out the individual images, their alternative text and so on.

I eventually sorted out my glitches and got it all working. I then linked up the pages keeping the navigation as simple as possible. I would like to use the idea on the website which makes the font bigger or smaller at the choice of the person viewing the page. And I will be looking further into accessibility this summer as I realise there are many different ways for a website to be used and I would like to see how far one needs to go as far as the artistic portfolio type of sites need to be as a lot of my associates are visually based artists and it will be interesting to see how things like the copy right of an artist is balanced against the need for a visually impaired person to see the work well, or who is responsible for describing a piece of abstract work to be read by a screen reader as art is relative to a person’s own experience and cultural understanding therefore could one be held responsible for the ‘misrepresentation’ of an image? And other questions.

As it stands Paul is very pleased with his website and he has had some very good feedback from his clientele which includes council dignitaries about how nice the site looks and what a good selection of images he has. The website can be found at










Signs as True Type

Posted: February 26, 2008 in Font

Signs True Type

My Font

Posted: February 26, 2008 in Font

My Font Elements

Typography Module General Write up

Posted: February 26, 2008 in Typography




Typography – a dying art form?


Mark Boultons page is one I have bookmarked for future reference.


An interesting page. The initial article asks a very simple question, which is answered eloquently and not without some passion by the various contributors to the page. It seems to me that there is a definite feeling that Type as a craft, as something to be taught properly and appreciated for it’s own artistic merit and craftsmanship is lacking.


There is a definite leaning toward a hope of seeing type evolving with the ever better tools at our disposal as web developers/designers. I can see the point one person made about the trades in which you would have learned to become a craftsman at Typography are dying out, and the opinion that “we’re currently in a much better place than we were even a few years ago, which, in my opinion, is strong evidence for typography’s continued vitality as an art form and indispensible communicative entity.”




The sentiments of the above page, are echoed in the introduction of Robert Bringhurst’s book The Elements of Typographic Style, the bulk of which can be found here


“For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.”



The next thing I looked at


“sIFR-One way to use embodied fonts or as the page is titled;”

sIFR 2.0: Rich Accessible Typography for the Masses

This is definitely something that I shall be looking into further as I continue through the module as it will take some looking into.

As an aside I do like to see the old ‘Hacker ethic’ still alive and kicking at the forefront of the industry.

“We’ve released sIFR to the world as open source, under the CC-GNU LGPL license, so anyone can use it free of charge.”

I do think following some of the links provided are worthwhile too, this one is the original post that Mike Davidson made about this.

I shall be looking onto this a bit more as I would like to incorporate this type of text into some of my web design, as previously I have created text in Photoshop and used the jpg image in a web page to ensure that a particular piece of text looks that same regardless of the browser.


The Makings of A font.

Posted: February 26, 2008 in Font

Having spent some time with Luke photographing various shapes that might either provide a letter shape or some element of on, I then started to sketch some of the shapes roughly into my pad. The photographs can be veiwed here;

I read through the various links on the Moodle site page that were provided. I have written about those as in the overall module report as I think they are pertinent to the whole module.

I found that I particularly liked the shapes from the Dummy photograph and some of the iron work from the church gates. some of the shapes reminded me of the crop circles I had cause to research and I decided to follow that as a theme for my font.

So I tried a few different ways of mark making but I struggled to get the perfect lines and circles that I felt I needed if I were using my Crop Circle influence. Most of the images I have seen and the one crop circle I have actually been in, most of the lines and cirlces tend to be as perfect as you could make them.

I began by making a document in Photoshop. I made several layers which contained the common elements I would use in the letters. I then opened a small document in which I was able to drag elements over from the main document and create my font that way. I saved each letter as a layered psd and then flattened the image to drag and drop the finished letter into the main large document.

Saving the PSD layered version enabled me to reuse parts of the letters as elements for new ones. I feel this enabled me to easily keep some kind of uniformity and this in turn gave me scope to play around with the various ideas which suggested themselves to me whilst I was working.

The next step was to check out the FontCreator program which I downloaded. Admitedly it was the trial version but enough for the sake of this project and to get a taste of the program and for making Fonts.

I had a good look through the User Manual before making the font, as I too often just open new software and jump in before really getting a good idea of how to use it. This has, in the past proved to be one way of learning a program but considering the time limit on this part of the module, it seemed wisest to at least read the instructions. The manual does make it seem remarkably easy.

There is some interesting information regarding ‘True Type’, ‘Open Type’ and ‘Font Copyright’ which, I believe, should be read for future reference by anyone making a font.

Film Titles

Posted: February 21, 2008 in Film Titles

5.jpgFilm Titles 4Film Titles 3Film Titles 2Rugs of Wrath sequence 16.jpg7.jpg8.jpg9.jpg10.jpg11.jpg12.jpg13.jpg14.jpg15.jpg16.jpgrug1.jpg

Cross-Media Movie Advertising Campaign


I decided to choose the water horse as my film to research as it was actually a roadside billboard that made me notice this film. Even though after the fact, I realised I had seen a trailer for it, there was something about the image and its title that made me want to check it out.


It may have been the romance of the image, it’s reminded me of some of the Yes and Asia Album covers.

I checked it out on the web and remembered seeing or, more accurately, half seeing, the trailer from the film. I don’t mind admitting I was a little disappointed.

The film poster I saw would have been enough to get me to the cinema to see this film but as I saw it around the time of this project, I thought it would be pertinent to use as a point of reference.

I don’t often go online to check out films before I watch them. I see the billboard posters when I am out and about, and the TV is on most evenings in my house, even if I am not the one watching it. So I quite often see trailers for things I might like to watch. This is pretty much how i have chosen the films I watch. Since starting this course I have actually started to ask people for their recommendations and I have seen some films that I would never have previously picked up for example, ‘Tartan Asia Extreme, Three Extremes’ 3 horror films which have English subtitles. I think that for some people it is best not to have too much information about the film before hand as this can put you off something that may have contained some cutting edge formula or technique, or have a quality you wouldn’t see anywhere else.

So I began to look for printed copy of the Water-Horse film, magazines and newspapers. This proved to be more difficult than i first thought. I don’t regularly buy a newspaper and the only magazines I buy with any regularity are Digital Arts and .net. I snooped through the recycle piles of family and friends and have actually come up with nothing at all. I assume there must have been some kind of printed media campaign but the only evidence I can find of this is the Billboards and bus stop posters that I have seen.

I checked out the website

This opened up with a similar image to the one I had seen but then loaded up into another screen.


There was a ‘Learn more’ Link which takes you to a page which contains information about the film, the book it was based on, the area (Loch Ness) that it was based in right through to where Crusoe (the Water-Horse’s name) came from to activities based on the aforementioned themes. this can be found at



If you follow the obvious path though the Story and Production Notes to Cast and Crew pages, you actually get a massive insight as to what is involved in making a film. It is a far cry away from the films of my childhood where the magic of movies was only spoilt by some clever adult telling us how it was done. Said adult was usually the type to go and watch subtitled ‘artsy’ films and often bought the types of magazines that, well helped them stand out from a crowd and had films like The Wicker Man (the original one)in their video collection. I have to say that if this kind of information, so nicely presented, had been available to my friends and I as teenagers we may well have been able to convince our parents that going to Art College was in fact a good career choice at that time. It may have helped us to better understand what we were looking at and on the whole be much more critical of the movies we watched. But hey, that’s progress for you.


Although the Flash built site can take a little time to download the various pages it is very beautiful to look at, there are some really nice extras like Games to play,


Screensavers and Aim Icons for fans to download, there is a Video gallery too and the Photo Gallery is quite extensive.


Aside from the main website, the trailer can be found on


and there are too many places to list to find movie reviews on the world wide web, and some of these are actually reviews that have been printed in the worlds media and press.


As with any other art form, all views are subjective and relative to the person holding that view. For example on one forum you have a grandparent to a 3 and 4 year old who thinks the film is fantastic and in the same forum a father, who’s 8 year old daughter was so upset that he felt the need to warn other parents of the dangers of this film. I suppose that being able to visit a forum like this may well help parents to make the choice about their own individual child’s personality and make a desision as to whether to let that child watch the film or not. For anyone who remembers the cinema filled with the sound of wailing children at Walt Disney’s Bambi when Bambi’s mother is shot, may well appreciate this opportunity.

As it is I still haven’t gone to see the film, and I may well now wait until it comes out on video before I do, and I shall reserve my judgement until I have seen the film, as to letting my 2 and 4 year old see it yet.