Monthly Archives: December 2013

Life Drawing: Draw Small, Think Big

Luís Figueiredo, found this on Facebook; absolutely amazing, an excellent display of S curves and C curves.

Demonstration of S curves and C curves



Glen Keane Life Drawing

Force: Dynamic Life Drawing for Animators



Video Reference


One line per energy or idea

  1. Here is our curved line with force and direction. The one line addresses one idea. The line starts somewhere, does something, and goes somewhere. This is achieved with a confident stroking of the paper with the pencil. The arrow example shows you the direction of the energy or its path. This is directional force.
  2. Applied force – Besides the line giving us a linear direction or path of force, it also tells use how much force is being applied upon it. This is extremely important because the force applied upon the line will be a previous directional froce. That previously directional force dictates how strong the applied force is.

The Rod of Rhythm

A rhythm is the beautiful and seamless interplay of different forces in the body that helps it stay in balance, or creates equilibrium.  Rhythm exists in all living things. Your understanding of rhythm will help you create living drawings.

Gravity is the reason we have rhythmic balance in our bodies.

“The aim of every artist is to arrest motion, which is life, by artificial means and hold it fixed so that a hundred years later, when a stranger looks at it, it moves again since it is life.” – William Faulkner

Bridgman’s Complete Guide to Drawing From Life




Typography: Font Design, typeface and Text for Website Page Design


When we built websites we usually started by defining the body text. The body text definition dictates how wide your main column is, the rest used to follow almost by itself.Used to. Until recently, screen resolution was more or less homogenous. Today we deal with a variation of screen sizes and resolutions. This makes things much more complicated.

In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing solely on the aspect of our latest experiment: responsive typefaces. Without knowing the history of iA, you’d miss some key aspects to the responsive typography and design in our relaunched site. Instead of mashing up all our articles on the matter, I decided to start from scratch and explain responsive typography step by step. This is step one.

To avoid designing different layouts for every possible screen size, many web designers have adopted the concept of Responsive Web Design. In a nutshell this is the idea that your layout automatically adapts to the screen definition. There are different ways to define it. I like to put it this way:

  1. Adaptive layouts: adjusting the layout in steps to a limited number of sizes
  2. Liquid layouts: adjusting the layout continuously to every possible width

While both have advantages and disadvantages, we believe that adaptive with as few as possible break points is the way to go, because readability is more important than having a layout that is always as wide as the viewport. This is a debatable opinion on a complex matter in itself, but optimal readability requires a certain amount of control over the measure (column width) of the text, and in this regard a liquid layout creates more problems than it solves. More about that another time.

Note: Responsive design already incorporates a lot of macro typographic issues (type size, line height, columns width). So responsive design already incorporates responsive typography in many ways. What we focused on in our first post on the responsive typography on our own site, mainly referred to our use of graded fonts. I’d like to talk about grading in the next post and dive right into the basics of responsive macro typography on the screen now.

Line height and contrast

While body text size can be evaluated with that perspective trick, line height needs some adjustment. With more reading distance and (what we call) pixel smear, it’s wise to give screen text a little bit more line height than printed text. 140% is a good benchmark, but of course, it depends on the typeface you use.

Today it’s a given that you make sure that the contrast is not too weak (e.g. grey text on a light grey background) or too garish (e.g. pink on yellow). Since screen typefaces were designed to be displayed black on white, using dark backgrounds is also somewhat difficult, but these can work if done right. With contemporary high contrast screens it’s also preferable to choose either a dark grey for text or a light grey for the background, instead of a hard black on white. But that is, again, not the most important question.

What about desktop computers?

Some people complain about the big font size in Writer for Mac. Just like we had to go for the biggest minimal size choosing the font size for iPad (which is held at different reading distances), we went for the biggest minimal font size on Mac as well. At the time our benchmark was a 24 inch high resolution iMac, where the perceived size is more or less the same as on all other devices.

Since the variety of Mac computers that run iA Writer is finite, we could determine the different possible resolutions. We looked at every possible configuration to make sure that the type size was the best compromise for most machines.

You might ask “Why not just allow the user to choose the type size?” Well, adjusting type size is not a matter of taste, but a matter of reading distance. Since most websites and applications have an overly small type size, new customers would initially choose a type size that they are used to, that is: too small a size, and never experience the full pleasure of our writing app. The main reason is not that we want to force a certain look upon all users: what we want is that iA Writer works without settings without fumbling, that the only thing you can do with it is write. This has been the open secret of its success and changing that would be messing with its core. (What we need to improve are the accessibility integration for people with bad eye sight).

Okay then, why not adjusting to the device’s resolution automatically? Wouldn’t that be true responsive typography? That’s right, and we are working on something similar. Now, in adjusting to the resolution, you also have to choose the right optical weight to make sure that the typeface really works as intended with every size and resolution. With the type size and the resolution optics of the font change as well. That’s why iA Writer for Mac, iPad 1/2 and iPad3 all have different grades as well. To explain the full logic behind grading digital fonts and explain the thoughts behind our new Website, I need a little bit more time and space. So, stay tuned for Part II!

Typography References


Todd Klein


Comic book lettering involves putting in all the words on a comics page, as well as the balloons or borders around them, any signs, titles or sound effects, and sometimes panel borders. In the early days of newspaper comics, the writing, art and lettering were generally done by the same person, but as they became increasingly popular, appearing more frequently, comic strip creators began parceling out portions of their work to different people, perhaps hiring a writer to help with the story, and one or more art assistants to help with the art. Often an assistant was given the task of adding the lettering. By the time comic books came of age in the 1940s, the huge volume of work demanded by publishers had encouraged an assembly-line process, dividing the creation even further into: writer, penciller, letterer, inker, colorist, with any number of people assisting on these jobs. By the late 1940s (perhaps earlier) it became possible to make a living just lettering comic strips and comic books for artists, studios or companies that didn’t have the time or desire to do it in-house. The career of freelance letterer was born, and by the 1950s, letterers such as Gaspar Saladino, Sam Rosen, and Ben Oda were as busy as could be lettering comics strips and pages for publishers like DC Comics, Marvel Comics and King Features. Note that I’ll focus on DC in this account, as it’s the company I’m most familiar with.

Gaspar sample

Gaspar Saladino lettering, early 1950s, ©DC Comics, Inc.


Cover lettering is a specialized subset of comic book lettering, usually assigned to a either a staff letterer or one of a few top freelancers. It may involve standard word balloons, as below:

Teen Titans 40 cover

©DC Comics, Inc.

but usually requires something extra — display lettering. This is lettering that gives an extra visual punch in some way to draw attention. Use of open lettering filled with a color is common. Display lettering is similar to the headlines in a newspaper or the subtitles on a magazine cover. It’s intended to sell the content of the comic to a potential buyer, both visually and in what it says. On occasion, it can be so provocative it becomes the main selling point, as in this famous Flash cover:

Flash 163 cover

Flash #163, ©DC Comics, Inc.

The words, or cover copy, are usually written by the editor, sometimes with suggestions from the artist, and the cover image is based on what the editor considers the most exciting scene inside, though DC editor Julie Schwartz had a interesting alternative, especially for his science fiction anthology books, STRANGE ADVENTURES and MYSTERY IN SPACE. He’d have a brainstorming session with one of his artists, like Murphy Anderson, and they’d come up with a half dozen intriguing cover images, then Julie would pass them on to his writers, telling them to write a story around the picture. Presently many covers have no cover copy, just a hopefully enticing picture, putting the task of selling the book squarely on the artist’s shoulders.


Beginning in the 1940s, but becoming all-pervasive in the 1950s through 1960s, the cover lettering of Ira Schnapp (along with his logo designs) helped define the distinctive look of DC Comics covers. Schnapp was classically trained as a carver of stone inscriptions, and brought that sensibility to his work for comics. (You can read more about Ira Schapp HERE.) Below are some examples of Ira’s work that will be instantly recognizable to longtime comics readers.

Ira Schnapp samples

Copyright © DC Comics, Inc.


When I began in the comics business in 1977, all the elements on a page of comics were done by hand. Today it’s possible for all of them to be done on a computer, though much of the artwork is still done by hand first, then scanned onto a computer. The evolution of desktop publishing powered by inexpensive but powerful desktop and laptop computers, especially those made by Apple, began in the 1980s, and started having an impact on comics lettering soon after, though the effects were gradual.

The first place I recall seeing computer-generated lettering was in the work of writer/artist John Byrne, who made fonts from existing lettering to save time for himself, such as in this example from Hellboy:

Hellboy 1 sample

Hellboy, Seeds of Destruction #1, Dark Horse Comics, ©Mike Mignola

Unfortunately, Byrne made the mistake of using existing lettering by other people without always getting their permission first, as in this case, where the lettering came from artist Dave Gibbons. Another early user of computer lettering was David Cody Weiss. But computer lettering really started making an impact with the availability of the first commercial comic book font, WHIZBANG,which I believe I first saw advertised in The Comics Buyer’s Guide around 1990. It’s still available, though for a time was so prevalent that readers complained about many books having the same look.

In the early 1990s Richard Starkings and his partner John Gaushell began created comic book fonts and started COMICRAFT, which has become the major source of comics fonts, though they have competition from others such as BLAMBOT. Richard was the first to not only promote his fonts by lettering with them himself (and soon developed a staff to help him), but also selling fonts commercially on his company’s website, and has been very successful doing so.

At first computer lettering was always printed out and pasted onto the comics artwork, but after a few years, as comics coloring moved into desktop publishing, digital lettering files began to be used in a more effective way by combining them directly with digital art files, eliminating the physical paste-up stage altogether. When I saw this happening in the early 90s, I realized it would be the way of the future. I had met Richard Starkings and John Gaushell in San Diego in 1993, and in 1994 asked them to help me get started with computer lettering by creating a few fonts for me from my hand lettering. I bought my first Mac computer in late 1994, and started learning how to make it all work, and how to make fonts myself.


The first book that I fully computer lettered was this one, Deathblow #20, for Jim Lee’s WildStorm Productions.

Deathblow 20

©WildStorm Productions

The fonts Comicraft made for me worked well, and I used them as a template to make more, including some of the sound effects fonts seen here. There will always be something missing from computer lettering that I feel I can only capture with hand lettering: a freshness, roughness, variety of letterforms made up on the spot. Computer lettering has its limits, but when done well can certainly do an admirable job, and it provides a lot of technical shortcuts. Even on this early job, the lettering was applied to the colored art files digitally, skipping the tedious physical pasting of the balloons on the art that was the norm at the time, at least when the lettering wasn’t done right on the art before it was inked. WildStorm was ahead of the curve there. Marvel came around a few years later, DC held to traditional production methods the longest, into this decade, but now nearly all lettering is digitally applied. By 1995 the revolution had begun.


When I started working in the comics business in 1977, there were no real publication designers in comics. Companies such as DC Comics and Marvel Comics had art directors, but their job usually consisted of working with the existing artists drawing the company’s stories, especially in creating covers, helping solve any problems with the art in the production process (such as making complex art changes), and finding new art talent. Of course, at the time, comics were largely considered a throwaway medium mainly intended for children. But that was changing even then, as publishers began to cater to adult fans, and soon, to collect their magazines in book-form reprints of various kinds. As they entered the new territory of producing actual books, real graphic design skills were needed, and companies began to hire designers.

In that interim period of the late 70s to mid 80s, anyone with a little graphic design experience was tapped to work on new projects. One of my early jobs working in the production department at DC Comics was putting together a tabloid-size magazine about the upcoming Superman Movie, the first one starring Christopher Reeve. My previous job had been doing graphic design work on air conditioner manuals, so I had some basic skills. Here’s a sample page.

Superman Movie page 1

©DC Comics, Inc.

Pretty simple stuff by today’s standards, but remember, this was in the days before desktop computers and digital design. Each page had to be laid out on paper, the page “mechanical.” A typewritten script was needed for all the type, which was then sized and laid out in rough form by cutting and pasting copies of the script, or by arcane markings and measurements that could be interpreted by a typesetter. These layouts were sent to an outside type house who produced cold type (photographically created rather than with metal type) in galleys, which were then pasted onto the page mechanical by hand. Photographs were indicated by black boxes. Slides or large black and white photo prints were attached to the page when it went to the separation house, who prepared the photos and dropped them into the boxes by physically cutting and stripping in photographic negative film. Color blocks and design elements, such as the ones on this page, were prepared on an acetate overlay using rubylith or red film for the color areas. As you can see, a set of skills was used that are now largely forgotten. Today I could produce the same page in a quarter the time, and without the need of anything other than the script, photos, my desktop computer and a good scanner.

By the way, if you look closely, you’ll see a credit for front cover design of this book: Neal Pozner. Neal was later brought in to DC as their first real publication designer, having had experience with that in the advertising and music fields, I believe. Neal and I didn’t get on well, but he certainly raised the design standards at DC, and made many changes for the better. Though it’s hard to tell from the way the credits read, the actual page layouts on this magazine were done by Joe Orlando. They were essentially comic book thumbnails: small layouts with areas of pictures and type roughed in. It was my job to turn those into finished mechanicals.

I did plenty of that kind of hands-on design work in my ten years on staff at DC, but after leaving to begin full-time freelance lettering in 1987, there weren’t many such opportunites, and to be honest, I had plenty of lettering work, so I wasn’t really looking to do more publication design. But after getting my first desktop Mac in 1994, I soon found there were desktop design programs that would allow me to do that sort of work again if I wanted to. I learned basic skills in Adobe Photoshop, Adobe Illustrator and Quark Xpress in the process of learning how to letter on the computer that would also be useful in page and publication design.

Meanwhile, comics companies were also going through the digital revolution, gradually doing more and more of their work on desktop computers. Covers were the first area to go this route. In 1997 I was asked by DC design director Georg Brewer if I’d like to help them through a work crunch by doing some digital cover design work on their “Secret Files and Origins” series. I said sure, and over the next few months I did several. Here’s an example.

Legion Secret Files cover

©DC Comics, Inc.

This was digital design in baby steps: Georg provided the art, the logos, some of the fonts, and a script. I put things together in Quark Xpress. It was a great way to learn, and I enjoyed the new challenge.

So what does good publication design mean in comics? I think it means tying together the diverse elements of a page with a cohesive plan. In the above cover, the plan is to make it look like a mainstream personality magazine such as PEOPLE, with a bit of tabloid sensationalism thrown in to pique the potential buyer’s interest. That’s the goal, of course, getting someone to buy the product. In comics, a great piece of artwork is the strongest selling point, but good design elements can certainly enhance that, and bad ones can detract from it. Choosing fonts that work well together and support your design plan is important. It’s also the job of the design elements such as the Logo and Cover Copy (the words) to clearly tell a potential buyer what they will find inside the product. If it’s not clear, they may move on to something else. With interior design for things such as text articles and features other than story pages, the same principles apply, but with the emphasis on making the page clear and easy to read, engaging the reader rather than pushing them away with difficult to decipher layouts and hard to read type. In my opinion, simple is always better than complex in this area.

ABC Logo

In 1998 I was hired to letter most of the new line of comics being planned by Alan Moore and his collaborating artists for WildStorm Productions (later part of DC Comics). But in talking to Alan, I found he wanted more from me than just lettering. Using Chris Ware’s ACME NOVELTY LIBRARY as an example, Alan wanted the entire line to have a comprehensive look, a design plan that tied it all together.

“Oh, they have on-staff designers now that handle that sort of thing,” I told him.

There was a pause. Then Alan said something like, “Well, youcould do that, couldn’t you?”

I thought about it for a moment, recalling the hundreds of cover logos and all the cover lettering I’d created, and the at least minimal experience I’d had with digital design at DC Comics, and allowed that I probably could! And thus I began working on cover and interior designs for the America’s Best Comics Line.

Working closely with Alan and the artists, as well as line editor Scott Dunbier, I developed the logos and look for the covers of each of the four initial series: TOM STRONG, PROMETHEA, TOP 10 and TOMORROW STORIES. In addition to the regular series artists, I enlisted the help of premiere comics painter Alex Ross to provide alternate covers for the first issue of each book. Alex also helped me with the design of the ABC “star” symbol, which I had been struggling with. Alex did a terrific job, and he gave me confidence that I could pull this project off.

In the sidebar topics at right I’ve included my favorite ABC designs, with comments. I’ve also included some examples of the interior design work I did for the regular ABC books as well as THE LEAGUE OF EXTRAORDINARY GENTLEMEN, a creator-owned series that began separately, but was added to the ABC line before the first issue was published. I was brought in to design covers and inside text pages beginning with the second volume, and all the collected editions. Finally, I’ve added some other design work done for DC Comics more recently for FABLES and other books. A reasonably complete list of my design work can be found in theKLEIN LETTERING ARCHIVES section of this site under OTHER STUFF.

While comics publication design is not my main focus, I certainly have enjoyed working on these projects, and hope to do more in the future.

A few years ago I was a guest at a convention, doing a panel about myself and lettering. As often happens, someone in the audience asked, “How can I learn more about doing my own lettering?” And for the first time I was able to give an answer I’ve always wanted to give: “Well, you can buy my book!”

DC Lettering Guide cover

Text reference

Comic Book Font Designs

Interactive References


Disney Animated App

Video Reference

Dinsey Animated App Advertisment

Trading Card Review

Dinsey Inifinity Announcement trailer

Image Reference

Interactive Games and Media

Welcome to Interactive Games & Media

Welcome to the School of Interactive Games & Media at the Rochester Institute of Technology. This site contains information about several related academic initiatives and explorations across our campus, located primarily within the IGM School and the B. Thomas Golisano College of Computing & Information Sciences and in affiliation with the RIT Center for Media, Arts, Games, Interaction & Creativity (MAGIC), but with partners both across RIT and abroad. From here, you can find information about our degree programs (such as the Bachelors of Science in New Media Interactive Development, the Masters of Science in Game Design & Development and the Bachelors of Science in Game Design & Development), our labs, our work, our students and our alumni. Through this site, you can find out more about our academic programs, our research and development, and our faculty. IGM at RIT is a community effort in almost every sense—we invite you to see what we’re up to, and, if interested, to join our ever expanding family.

The RIT Center for Media, Arts, Games, Interaction & Creativity

RIT has recently formed the Center for Media, Arts, Games, Interaction & Creativity (MAGIC), as a conscious and deliberate effort to blur the lines between the arts and the sciences, between technology and expression, between the study of the creation of digital media and its impact and effect on society and the human condition. Through collaboration with faculty, staff, students, colleges and divisions throughout RIT, coupled with new and unique models of research and production and a sustained emphasis on multi-disciplinary collaboration, MAGIC represents a one-of-a-kind approach to the study of digital media. Established by RIT President William W. Destler in 2013, the MAGIC Center is a unique and constantly evolving approach to the study of digital and creative media at RIT. IGM has a special and unique relationship with MAGIC as a ‘birthplace’ of this initiative, and MAGIC is now the intellectual home of our scholarship and creativity, as well as numerous student projects and research initiatives. It is, in a sense, our studio.

Disney Infinity Interactive Game Announcement Talks


Dinsey Fantasy Interactive Game Experience

Fantasia: Music Evolved (E3 2013)

Download Fact Sheet

Disney Interactive announced “Fantasia: Music Evolved,” a breakthrough musical motion video game inspired by Disney’s classic animated film “Fantasia,” will be available for Xbox One®, the all-in-one games and entertainment system from Microsoft and Kinect™ for Xbox 360® in 2014. Developed by Harmonix Music Systems, the world’s leading music and motion game developer, “Fantasia: Music Evolved” transports players to a breathtaking world where music and magic combine to transform extraordinary interactive landscapes in entirely new and creative ways!

In this game, players enter the magical realms of Fantasia, selected by the legendary sorcerer Yen Sid to hone their musical and magical prowess as his new apprentice. “Fantasia: Music Evolved” takes players on an interactive and immersive motion-controlled journey through worlds of music and magic, unleashing their creativity along the way.

Using Kinect motion control technology and natural, controller-free gameplay, players will control the music flow from some of the industry’s biggest acts, including electronic DJ and producer AVICII, chart-topper Bruno Mars, and rock royalty Queen. “Fantasia: Music Evolved” gives players creative power to change the mix of their favorite songs in real-time, choosing between the original recording and new remixed versions, or adding new layers of music via magical manipulators that allow them to change music in exciting and surprising new ways!

“Fantasia: Music Evolved” will feature tracks from over 25 leading artists, each featuring two unique remixes in addition to the original recording. The current announced artists and songs that will appear in the “Fantasia: Music Evolved” video game include:

  • AVICII – “Levels”
  • Bruno Mars – “Locked Out Of Heaven”
  • Fun. – “Some Nights”
  • Kimbra – “Settle Down”
  • Queen – “Bohemian Rhapsody”
  • Contact Information:


  • Publisher
    Disney Interactive
  • Developer
    Harmonix Music Systems
  • Release Date
    June 2013
  • Genre
    Musical Adventure
  • Players
    2-player co-op play in structured adventures; up to 4-players in “Toy Box” mode
  • Platforms
    Kinect™ for Xbox 360 ®
  • ESRB Rating
    “RP” – Rating Pending
  • Available

Attendees of the Electronic Entertainment Expo (E3) will have an opportunity to experience hands-on with “Fantasia: Music Evolved” at Disney Interactive’s booth located at #1001 in South Hall.”Fantasia: Music Evolved” is currently not rated by the ESRB.

Harmonix Music Systems, Inc.
Harmonix Music Systems, Inc., based in Cambridge, MA, and established in 1995, is the leading developer of groundbreaking music-oriented videogames. Harmonix was founded by Alex Rigopulos and Eran Egozy, who formed the company to invent new ways for non-musicians to experience the unique joy that comes from making music and have pioneered music and rhythm gaming in the US. For more information please visit

About Disney Interactive
Disney Interactive, one of the world’s largest creators of high-quality interactive entertainment across all platforms, is the part of The Walt Disney Company responsible

Interactive Theme Park Attractions

Mickey’s Magical Map

Harry Potter Theme Park Universal Orlando, Florida


Disney’s Avatar Theme Park Attraction

Typography Project

Aim: To understand typography – context, usage and clarity. Design text language for communication used in your world. Investigate: tangible symbols of communication.

What is Typography?

Why is Typography so important?

Who benefits from Typography?


v  Language for the disabled

v  Sensory software

v  ARCE centre

v  Sign language for the deaf


v  Erik Spiekermann  (Typomania)

v  Ted Talks/YouTube




v  J.R.R.Tolkien Elven Language

v  Indiania Jones

v  Avatar

v  Research movies which use language


  • Who is mean to understand it?
  • What format will be used, symbols or type?
  • Usage – Is its functionality informed by your world?
  • Clarity – Does it work?

Resource/ information found on Creative Bloq

What is Typography? Learn the basic rules and terms of type!

Typography is, quite simply, the art and technique of arranging type. It’s central to the work and skills of a designer and is much more than making the words legible.

Your choice of typeface and how you make it work with your layout, grid, colour scheme, design theme and so on will make the difference between a good, bad and great design.

Good typography is partly down to creative intuition, but it’s impossible to become skilled in typography without understanding the basic rules of the craft – even if you mean to break them.

  1. Size – All typefaces are not created equally. Some are fat and wide; some are thin and narrow. So words set in different typefaces can take up a very different amount of space on the page. The height of each character is known as its ‘x-height’(quite simply because it’s based on the letter ‘x’). It’s generally wise to use those that share similar x-height. The most common method used to measure type is the point system, which dates back to the eighteenth century. One point is 1/72 inch. 12 points make one pica, a unit used to measure column widths. Type sizes can also be measured in inches, millimetres, or pixels.
  2. Leading – leading describes the vertical space between each line of type. It’s called this because strips of lead were originally used to separate line type in the days of metal type setting. For legible body text that’s comfortable to read, a general rule is that your leading value should be greater than the font size; anywhere from 1.25 to 1.5 times.
  3. Tracking and kerning – kerning describes that act of adjusting the space between characters to create a harmonious pairing. For example, where an uppercase ‘A’ meets an uppercase ‘V’, their diagonal strokes are usually kerned so that the top left of the ‘V’ sits above the bottom right of the ‘A’. Kerning is similar to, but not the same as ‘tracking’; this relates to the spacing of all the characters and is applied evenly.
  4. Measure – The term ‘measure’ describes the width of a text block.
  5. Hierarchy and scale – If all type was the same size, then it would be difficult to know which was the most important information on the page. In order to guide the reader, then, headings are usually large, sub-headings are smaller, and body type is smaller still. Size is not the only way to define hierarchy – it can also be achieved with colour, spacing and weight.

Aesc (phonetic: ash) – A ligature of two letters – ‘a’ and ‘e’. The asec derives from Old English, where it represented a diphthong vowel, and has successfully migrated to other alphabets including Danish and Icelandic.

Aperture – The constricted opening of a glyph, as seen in the letter ‘e’. Varying the size of the aperture has a direct effect on the legibility of a letter form and, ultimately, readability.

Apex – the point at the top of a character where the left and right strokes meet.

Arm- A horizontal stroke that does not connect to a stroke or stem at  one or both ends – such as the top of the capital T.

Ascender – the part of a lower case letterform that projects above the x-height and not enough x-height can cause problems.

Baseline – the baseline is where the feet of your capital letters sit. Below this line are descenders and loops.

Bowl – The shapely, enclosed parts of letters such as ‘p’ and ‘b’.

Beak – The Beak – shaped terminal at the top of letters such as ‘a’, ‘c’, ‘f’ and ‘r’.

Bicameral (as opposed to unicameral) – Bicameral refers to alphabets that have upper and lower case letterforms, such as Roman and Cyrillic – as opposed to the likes of Hebrew and Arabic.

Bracket – A wedge – like shape that joins a Serif to the stem of a font in some typefaces.

Cap Height – the height of a capital letter above the baseline.

Copy fitting – the job of adjusting point size and letter spacing in a bid to make text occupy its allotted space in a harmonious fashion.

Counter – the enclosed – or partially enclosed – portion of letterforms, such as ‘c’, the lower part of ‘e’ and ‘g’; easy to get mixed up with the bowl.

Crossbar – The crossbar connects two strokes that cut through the stem of letterforms such as ‘t’.

Serif – a flare or, terminating flourish at the end of a letterform’s strokes, believed to originate from Roman tendency to paint letters onto marble before chiselling them out.

Sans Serif – a category of typefaces that do not use Serifs, small lines at the ends of characters.

Typeface – a particular design of type.

What is Writing?

Writing is a method of representing language in visual or tactile form. Writing systems use sets of symbols to represent the sounds of speech, and may also have symbols for such things as punctuation and numerals.

  • It must have communication as its purpose
  • It must consist of artificial graphic marks on a durable or electronic surface;
  • It must use marks that relate conventionally to articulate speech (the systematic or electronic programming in such a way that communication is achieved.

Languages of the word:







Fictional Language

Avatar –

J R R Tolkien

Stems – vertical and horizontal strokes can have a slight ductus, a subtle reduction of weight towards the middle of the stroke. This is to make the stroke a bit sharper, and reduce some of the weight.

Parameters – 1. A numerical or other measurable factor forming one of a set that defines a system or sets the conditions of its operations. 2. A limit or boundary which defines the scope of a particular process or activity.

Erik Spiekermann  is a German typographer and designer. He is a Professor at the University of the Arts Bremen. Spiekermann studied art history at Berlin’s Free University, funding himself by running a letter press in the basement of his house.


ATCargo - Copy ATCargo2 - Copy AT-02 - Copy BCM2-600x911 - Copy AdventureTimeMagazine6813163715 - Copy AdventureTimeCover bat 0004 dvd o-sleeve adventure_time_logo - Copy 1473881265245247 - Copy 9672776863

NP280_Adventure QnW_00

These were are main source of inspiration for the magazine design; we wanted something that was colourful, simple and was eye-catching/appealing to our target audience. We wanted the cover for the magazine to sell to the audience, a action pack and cool comic book; it had to be something they would want, something that would be cool. We wanted it to be interesting visually; we want to design it for readers, who would not want to put it down.

Magazine Development


Photo 31-12-2013 05 07 55 pm Photo 31-12-2013 05 10 00 pm Photo 31-12-2013 05 08 08 pm

Firstly I began sketching down some ideas for the font I wanted to create for the title/logo. I wanted a strong and bold look, that came across as both warning and Eco friendly. The circle boarder takes inspiration from the Eco friendly logo. Therefore, green was to be my dominant colour for the boarder as the colour green, suggest the sign of good and has a sense of justice about it; it is the kind of colour that best suits within a hero genre, because of it good fib/meaning.

I then researched some font designs that I thought were perfect examples for what I wanted to achieve for the logo’s font design. I really liked a font I found on Dafont; it was called Warrior Nation, it was as though it was faded for the design, (hence the name of the font); I decided that was the font I wanted, however, the selection of the font had the idea I wanted for a font design, but, they were not quite to the standard I wanted. I downloaded the font, and began designing my version of it. I layered the fonts options on top of one another, and change the original colour display, and rearranged the angle to fit the circle boarder; the way I had envisioned as I was working with the design.

The Team also asked me to create the fonts for the names of the characters for the characters’ card designs.

This was the finial design for the title/logo of our product, I presented this to my team members who liked the idea and choice of font. For our card product we need, I thought, a subtitle that would separate it from our animation inspired tv show the Eco Warriors; I wanted a word that would relate to Eco friendly, so, I researched the thesaurus of the word on Google and found; Biohazard, this was a perfect.

Magazine Designs

This was the cover design for the magazine article; I wanted something that would catch children’s eye, and be interestingly appealing visually.

Page Layout Designs

magazine article

magazine article2

magazine article3

Above are some page layout designs for the magazine, I attempted many different stages for the layout of the page design; I knew in my head and from the references of magazines found: what I wanted to create/achieve with this design.

It had to in my opinion have to appeal both informative and attract the attention of a reader, the final design I think was the best, because it has bright colours and to a young audience would be eye-catching and attract attention.

Product Packaging/Advertising design

eco warriors poster

magazine packaging

magazine packaging2

Interactivity Project

Aim: Is to create an interactive merchandise for our world.

What is it? Intellectual Property, someone’s/company’s idea, something someone has the rights to.

Example – Star Wars, Batman and Super Mario etc.

It is rights – legal rights that name a particular company ownership of the merchandise or product they have created.

By Law it protects the original creator as ownership to the idea.

Can Be….





Theme Parks / Theme park rides

For this project we were asked to look at our world and see how we could make it interactive.

Can be any form of interactive idea.

Base it upon technology that exists.

Think of audience it is for.

For Thursday 12th December, we were asked to present our ideas for the project of interactivity. We are to create a single slide presentation as a group, 2mins long.

Questions we must answer:

What is it?

What does it do?

Who is it for?

My team and I began discussing ideas for a possible interactive product/merchandise of our world; we thought of the idea of incorporating both the Typography project and Interactive project. This seemed to be an acceptable idea because our tutors said we could if we wanted to. Our ideas were some sort of interactive storybook, that readers would be able to play along with the story, pushing or swiping the screen; within the interactive storybook we thought it would be nice to have a series of questions that readers would have to answer to see what their animal form would be, as our world involved the characters being experimented on and turned into animals.

We also began to discuss games we had played as kids; some of these were… Mickey Mouse Castle of Illusion, Supermario, Rayman Crash Bandicoot etc. This led our ideas to thinking about Level Gaming or escape games. We now plan to research: How to design an interactive game? How to design a product game? Research Game Concept artists? Research sound effects/soundtracks for games.


7fe16efcffafb2142ac439e06239556b 8bit_story 111AD7EB-FF78-1219-3039C9136E25FAD4 550w_gaming_applejack_1 8149CastleOfIllusion_PackFront_XBLA_no-arcade-banner-copy 27928COI Announcement screenshot (5) 57071-Super_Mario_Bros._2_(USA)_(Beta)-1 080506_physics_donkeykong 080813_disney-animated-announcement-10  2370009-genesis_castleofillusion 9202698_600x338 485689567_screen5 9616469299_2a8fbfd8d5_o

bf418cf9c7af6393ccbaa14db66162314e95a508 - Copy CastleOfIllusion - Copy castle-of-illusion - Copy Castle-of-Illusion-Remake-logo-600x300 - Copy castle-of-illusion-starring-mickey-mouse-1 - Copy Castle-of-Illusion-Starring-Mickey-Mouse-Wallpaper-002 - Copy castle-of-illusion-starring-mickey-mouse-xbox-360-1378230178-064 - Copy

Development of Interactive Product

We finally decided that computer game based products were an obvious theme for this assignment. We decided to go for a different route, in Trading Card merchandising. We also had an idea to combine our Typography project with our Interactivity Project; we decided to create a magazine for the trading cards, and design an internet web page.

The magazine would feature news feeds, and development updates with the brand of the Eco Warriors’ trading cards, and the rules of how to play the game, would be found in the instruction page.

The webpage would be a step further with the magazine, it would be a place where players can interact with other players, in a multi-verse gaming experience. Players can get in contact both by the magazine or online, they can give feedback of new trading cards and also make suggestions for future development on the game; e.g. players can draw on a layout page (found in the magazine) for their own card design and post to the company; these design will then be developed and printed in the new issues.

Our estimate target audience is primary school kids.


Trading card games reference

AT-01 - Copy

Website design references

We also began thinking/talking about how we would display our product to our target audience; we thought about packaging design and advertising.

Character Cards Design

1465300_10201108196327196_1062413903_n 1476653_10201108192287095_979430206_n

Card Layout


This Character card was an idea we had for the magazine and website, it involved children drawing their own character cards and sending them into the company, and they would make their designs into a card, that would then be put into the next card issue. The children could also win prizes for the best character card and most imaginative character.



Card Package design

poster eco warriors 2

eco warriors poster

Website Design

Children design own cards pages


Interactive World Game

A friend invited me to play a game called Dragon City; I was so inspired by this game that I made design one for the team. In our version the gamer collects animals and the gamer can battle these animals against the minions of Lord Evil.

Lord Evil will even steal any of the animals that the gamer owns; to use for his experiment with, thus creating more minions.


Eco Warriors World Game