When choosing the subject for this project I felt CSS3 could offer a a whole new level of engagement for children’s fiction. Writing for children breaks almost all design principles that go into web design. For instance, the limit of font styles I can include is lifted providing the typeface is fit for purpose.

Choosing the base font

As I knew my webpage would include many unique fonts, I decided that the base font needed to be legible and child friendly as it was to be use for the majority of the content. There is a growing popularity of the Opendyslexic typeface by Abelardo Gonzalez that was designed to aid those is poor visiblity or visability issues. The typeface has been adopted by many applications including Instapaper. However, research Tina Burgess (The Examiner) shows that when testing on a class of pupils aged from 10-18 the typeface received some mixed reviews. Some pupils found the font helpful whilst others were nonchalant. The general concensus in the end was that many of the pupils who found the font helpful at frist found themselves wanting to revert back to a normal typeface. Seeing my webpage will already be calling on many novel fonts I decided to explore the possibility of using a font that pre-installed on a large majority of devices.

“When selecting a typeface for a children’s text, look for a warm, friendly design with simple, generous letter shapes. The counters (the enclosed shapes within characters) should be rounded and open, not angular or rectangular.” ~ Ilene Strizver

A study by SURL (Software Usability Research Laboritory) which was conducted on participants aged 9-11 (reading age for the book is 6-12) indicates that children found Comic Sans MS and Arial, both set in 14pt, as their preferred font choice. As both these fonts are widely available worldwide I felt my choice was to be between these two typefaces. Although Comic Sans MS was marginlly the preffered choice of the children, it has poor font stacks available to it. should the event arise that Comic Sans is unavailable, the default cursive typeface (for at least the iMac) is really challenging to read and unsuitable for my target audience.

The decision to choose Arial as my base type had been made. I took extra care to tailor the typeface for my target audience by boosting the base font size to 18px as well has giving the passages a generous line-height of 1.8em. This should help the unconfident reader keep their place amongst the text which getting a clear view of each character as they attempt to deciphr each word.

As I felt satifsfied that the majority of the text met a certain standard that’s suitable for children, I decided I could be more leaniant on my font choices for specific words I highlight within the text. As these highlights are sparsely distributed throughout the text I felt the reader could overcome their complexity as they’re able to focus in on the word as it approaches. I also took this opportunity to push the text further than what a printed copy can offer. With the use of CSS3 animations I was able to bring some subtle dynamics to the text which, I hope, engages the reader and helps illustrate the atmosphere of it’s meaning.

Why the white* background?

Because of the range of colour I wanted to use with the text I opted to use a bland background thus reducing the risk of clashes within the colour scheme. For good readability I haven’t used a pure white and black. The harshness of the contrast is unpleasant to look at for long periods of time, particularly the brightness of the white.

* Kind-of white