Typographic Overview

This project aims to explore text in many forms: graphic and pictorial, structural, and interpretative. Students are encouraged to not only consider text graphically and pictorially, but also engage with the manipulation of the structure and meaning of text.

We will look at text as a malleable encoded form, demonstrate how to assemble and disassemble it, use it as a data form, and more. Areas of particular interest are formal rule systems for type layout and letterforms.

Students will also visit the Reid Building case room to witness the physicality, history and methodology of letterpress printing.

Work Mode



Processing – http://processing.org

Adobe After Effects

Reference material

Thinking With Type – Ellen Lupton
Typography – Denise Gonzales Crisp, William F. Temple
Pioneer of Swiss Graphic Design – Josef Muller Brockmann – Lars Muller
Typography, referenced: a comprehensive visual guide to the language, history, and practice of typography – Jason Tselentis



Students are expected to create artwork based around the title of the project – Typographic – all work should be the result of consideration of the subject. The works could take many forms eg. print, video, photography – but must always contain elements of computational method in their production. It is expected that a typical student submission would involve design and software manipulation of text and resolve as either image, video, sculptural or realtime code experiments.

Learning Outcomes

  • Demonstrate knowledge of key development production stages
  • Appraise aesthetic components and navigation structures in interactive screen-based imagery and installations
  • Generate, visualise and pitch a creative concept to an audience of peers and staff

Assessment Criteria

You will be assessed on your ability to:

  • Demonstrate your ability in using software to create the work
  • Demonstrate creative insight in the realisation of the final work
  • Articulate critical reasoning to justify your creative choices

Submission Details

  • Learning journal in form of blog/Sketch-book work / evidence of concept exploration
  • Final artwork with any accompanying code
  • Any studies with supporting images

Create a folder called ‘Y2_Typographic_YourName‘. Within this create 2 folders: ‘Code’ and ‘Media’. Put any Processing sketches in the folder called ‘Code‘. Put any images, videos or other final media in the folder called ‘Media’. Zip the entire outer folder and upload to Canvas.

Your final submission will be a link to this file.

Friday 23rd March 2018


Unfortunately, due to surgery I missed this project but I thought I would come in the final week before our three week spring break so I wasn’t completely left in the dark.

It was interesting to see in which directions people had taken the same brief to different outcomes. One conversation at the end of the presentations that caught my interest was when Zhixi was on a text programme, Microsoft Word I think, but was writing in Chinese. The class became inquisitive of this and began querying what Chinese looked like in familiar fonts. There was particular commotion when the class wanted to see what Chinese looked like in Comic Sans, and to their disbelief it actually looked quite pleasant.

My Idea

I’d originally had an idea linked to braille but this conversation has led to want to explore different languages in various fonts. A brief idea that has come to mind is to create a Processing sketch that randomises a language and a font, but also has the English text and font name above so we understand what it is we’re looking at. I thought that this would provide a short insight into other languages and how people in those countries experience their language on a daily basis. When you step off the plane in a new country one of the first things I notice is how everything is now signposted in the new language of the country I’ve stepped in, sometimes with the English translation besides it depending on where you are. This is the idea that I’d like to recreate and explore.

It may be wise to use the same sentence “The quick brown fox jumped over the lazy dog” in order to simplify things and this sentence uses all of the letters in the alphabet so we are able to analyse the entire alphabet if needs be.

I could also use a set selection of languages/fonts so we don’t see five variations of Arial when what we really want to see is Wingdings!

I remember seeing how I can do this by revisiting the data tutorial by Danial Shiffman that I read for the last project. It’s a really long document but this is what it says on text files:

Working with Text Files

“Let’s begin by working with the simplest means of data retrieval: reading from a text file. Text files can be used as a very simple database (you could store settings for a program, a list of high scores, numbers for a graph, etc.) or to simulate a more complex data source.

In order to create a text file, you can use any simple text editor. Windows Notepad or Mac OS X TextEdit will do; just make sure you format the file as “plain text.” It is also advisable to name the text files with the “.txt” extension, to avoid any confusion. And just as with image files, these text files should be placed in the sketch’s “data” directory in order for them to be recognized by the Processing sketch.

Once the text file is in place, Processing’s loadStrings() function is used to read the content of the file into a Stringarray. The individual lines of text in the file each become an individual element in the array.”

All of this information was really helpful and has allowed me to get the ball rolling for this project. I am going to create a .txt file using Notepad (since I’m a Windows user aha) and put each sentence on a separate line. Then I can use the random function to select what language is shown. I’m simply going to use Google Translate to translate the sentences. I chose the languages:

  • English
  • French
  • Italian
  • Spanish
  • Dutch

This is because other languages such as Chinese won’t allow to be saved as a .txt file. I can maybe overcome this at a later date by exporting the sentence as an image and importing this image into Processing. This is fine for now as we have plenty of other language to choose from. I have only selected 5 for now but I can expand this later if I choose to.

fox notepad

I went to http://www.designingletters.com/html/alphabetsentences.html to see what sentences there are that use every letter in the alphabet in short as a sentence as possible, apart from the one stated earlier. This websites lists 28 other options and I thought that maybe, once I have got the primary function sorted with the original sentence, I could expand into including these other sentences.

I managed to create a Processing sketch that uses a string array to read the .txt file:

Test 1

I then had a look at the folder where my fonts are kept on my laptop:


I then consulted Processing’s reference library to brush up on how to use Fonts. It said that I will need to select fonts and copy them into my data folder, and this links up with my previous statement that I’d like control over the fonts that I use so this allows me to do so. There is also a way of listing the fonts installed on the system and so I might have a go at this and see if I can randomise a single font. I know this immediately goes against what I just said but it offers an immediate solution to my idea. I will try this first and then try out the more selective process.


Upon doing this it says my system has 614 fonts.

Test 2

Daniel Shiffman’s tutorial on Strings and Drawing Text states that “Because of limitations in Java, not all fonts can be used and some might work with one operating system and not others” so this might make it unable to randomly choose any of the fonts from my system.

I’m now going to explore the random command. I did some more googling (if it’s not a word then it should be) and came across https://forum.processing.org/one/topic/random-text.html which had an interesting comment section. It allowed me to figure out how to pull lines from my .txt file at random.

Test 3

I then decided to randomise the fonts using the same technique.

Test 4

Instead of it randomising each time I open the sketch, I decided to add a mouse click command that would allow me to keep the sketch up and running and change the language/font easily.

I got a bit confused between mousePressed() and mouseClicked(). The mouseClicked() function is called after a mouse button has been pressed and then released, and so this was the command I’d need.

Mouse and keyboard events only work when a program has draw(). Without draw(), the code is only run once and then stops listening for events.

Test 5

Friday 30th March 2018

Continuing with Coding

I managed to create a sketch where a user can click the mouse button and the sentence “The quick brown fox jumps over the lazy dog” appears on screen in a foreign (maybe) language in a random font. Each time the user clicks the mouse they are presented with a new language mixed with a new font. I now want to structure the visuals so that the user knows what to do when they approach the sketch and what they are seeing. In order to do this I wish to create a table effect where the heading is at the top of the table which will be the English translation (which suggests that my audience will speak English) and the name of the font that is applied to the result which will be in the row below. The style of the table will be considered during the process, eg: colours, viability of borders, distance between cells, width/height of rows/columns.

*insert sketch of how table will look*

Another hurdle of coding that I need to cross is to figure out how I print the name of the randomised font. When I type “println (font1);” so see what comes up in the console box it prints “processing.core.PFont@” followed by an 8 digit combination of numbers and letters which must refer to the font being used.

Test 6

Obviously the users won’t be able to interpret what this means. I think in order to rectify this I will need to do what I had originally said I’d do and select certain fonts. Instead of copying the files into my data folder, I thought I’d have a go at creating a notepad file with a list of the fonts I’d like to try, and then loading them in as a string in Processing. Then I should be able to print the individual names of the fonts without using Processing’s interpretation of it.fonts 1

It did manage to load in the name of the font but it didn’t recognise it’s format.

Test 6.2

I did as it suggested and went to the original file and edited the filenames so that they also contained the path.

fonts 2

It worked!

Now, in order to be able to use this randomised font in one than more line within my sketch, I needed to create another variable that I could insert into these lines of code. I simply wrote:

num = int (random(4));
println(num); – to see if it worked

To randomise a number between 0 and 4. This meant that instead of writing:

font1 = createFont(fonts [int (random(4))], 32);

I could write:

font1 = createFont(fonts [int (num)], 32);

and it means I can use the same randomised font later on in my sketch by inserting (num) so I can call it in as text so the users know what font the writing is in.

Test 6.3

In order to structure all my text in a way that is aesthetically pleasing I’ve decided to turn the original fox.txt string into a table to display text of what language it’s in. After looking at Daniel Shiffman’s data tutorial again he has a section on tabular data:

“A table consists of data arranged as a set of rows and columns, also called “tabular data.” If you’ve ever used a spreadsheet, this is tabular data. Processing’s loadTable() function takes comma-separated (csv) or tab-separated (tsv) values and automatically places the contents into a Table object storing the data in columns and rows. This is a great deal more convenient than struggling to manually parse large data files with split().

Instead of saying:

String[] stuff = loadStrings("data.csv");

We can now say:

Table table = loadTable("data.csv");

One way to access the data, would be to request a value by its numeric row and column location (with zero being the first row or first column). This is similar to accessing a pixel color at a given (x,y) location, though in this case the y position (row) comes first.”

*insert updated notepad*

I got a bit confused and so I decided to create a final outcome without the table and once that’s completed then I can move onto the table.

I decided to randomise the background colour to make it look visually interesting so it’s more than just text.

Test 8.1

Test 8.2

I didn’t really want the file path originally but I actually quite like it. It does it’s job in telling the users the name of the font, but it also tells them what they’re looking at is a font name because it’s a file path. I believe there’s a method of removing parts of text, or to tell Processing to read from a certain point onwards and so I may have to implement this effect in order to get rid of the file path part. It’s ‘C:\Windows\Fonts\’ on every entry and so I’d just tell Processing to remove that part. I can always try this and see how it looks but if I’m not keen on it then I can always revert back to the file path version.

I acknowledge that this project was a bit rushed and so if given more time I would re-do this project with the image idea I had earlier.

I would also create a final outcome that was a bit more polished.

This was the project that I was going to try and re-do/revamp in the week before the deadline.

Previous: Design Domain (Part 2)

Next: Mixed Reality


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 )

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

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: