Liveblog of 5th ADCV International Typography Congress, Valencia, 2012: Day 2 and 3

These are live blog notes from the second and third days of ADCV Congresso Tipografia; in Valencia, Spain, in June and July 2012.

Usual disclaimer for live blogging: These are informal notes taken by Dave Crossland at the event, and may or may not be similar to what was said by the people who spoke on these topics. Probably if something here is incorrect it is because Dave mistyped it or misunderstood, and if anyone wants corrections, they should email him immediately ( – or post a comment!

Petr Workshop

I dont know anyones background so I suppose no experience in web design.

I want to take you on a journey, in 90 minutes we make a web page that works. may not be an interesting design, that take sketching, redo it, to make it better. but importantly you will understand what you did. so we start from zero.

a browser and an editor is all you need. so i will start and you follow my demonstration. I will copy a folder with some reference things, and a demo of TextMate, a text editor.

What are we going to do? To start from the other end, I show you a project we are working on, The Utah Globe. Made with


The 2 most important books are HTML and CSS3. The number of publications in the world, most are made with HTML/CSS.

If you graduate today, this year, you will be a designer for 4 years. only. no way to predict the world in a few years. Everything changes.

So if you will be a graphic designer for 20 years, what will you do?

my increasingly urgent message to designers is make sure that you know.

it may not be required to be a full programmer. but you need to talk to people who do it for you. a designer says, i dont program as i ask someone todo that? sure. but what do you ask? what do you tell? you have a photoshop document and you ask them to turn it into a website?

If your customer finds the programmer does 99% of the work, they will get rid of you. why can a programmer not do 100%? You must speak their langauge, know what can and can not be done. its likely they will not need you if everything you do can be done.

tonnes of information online. i show you these 2 physcial books, i never use them. i ahve 30 meters of book cases, i never use it any more. i programed since 1980. this i smy 15th language. i never buy a new book – the time to walk 6 meters and get the book is longer than

Books on a shelf are symbols of what you knw. But you can show to clients tha tyou know this.

the iPad changed things. they took courses, did KABK for 4 years, when they started and finished, the world outside totally chagned. the profession is not what it was when they stsarted. every week a new android machine with another screen. retina dispays. it continues to be like this. you can not tell how large a screen is, what circumstances will be for your readers.

some companies do things in parallel, they have 100 designers in indesign, they hold back to the odl ways, desperately want indesign production line. adobe tells them to do it this way, they make software for pritners. indesign is a production tool, not a design tool, though it is used by designers.

but all turns into web. its not indesign that is used, so then, what else? the programming environemtn.

adobe tries ot make it. make output from ndesign to html. but over and over again, oud esign landscape version, portrait, for ipad, for A4, all you must redesign.

you want to tell someone something – do you telephone each individually?

There are not enough designers in the world to design everything. you can afford that.

you need code that works everywhere and that can rearange things.

the future is not in pixels. the first wired ipad app was 550mb, half for landscape and half for portrait. not for iphone as it was too small.

so responsive design. a good name or not? it stuck. thats what it is. one code fits all. this is an example, utah globe.

100,000 titles that are yet to go from a stndard website to a resposnsive website in next few years. most desigenrs dont know how to do this. they can work in indesign, or techniciains do it. so most responsive design is shit. not designed.

change will not stop. css is describing the way websites work. it includes 3d glasses. the speification about how to look at a page thorugh 3d glasses. its being made. its just not for sale yet. but 2 years, 4 years, all ways within the 4 years of graudating.

so what we try is to go on top. a set of templates that work, parameters we change, to change the deign for various formats.

so you have a meta description of how templates should look like, if you dont want to describe them all from scratch.

im still working on htis site, its Ready Media with Roger Black. there were designers who charged $100,000 for one redesign of a paper. but wordpress is now all for for free so a $3,000 must be justified.

so you can see dragging the window size, very small like a mobile its a mobile design, and ipad it has a menu – usefless on a phone so not there – instead you have a drop down control instead of a pop up menu.

staging. its not ‘i design this page’ its changing time, context, in the way the user looks at it. if i go to a sports page, it looks liek a sports page. the content is live from rss feeds. it looks like a newspaper but its just a demo.

everthing here is parameterised. this is a JS overlay ‘window’ so i can say i want a white mastheead, generate again, and you see it now. and left aligned not ceneter. there are many parameters, many dimensions of the design.

The meta design that you do when you do corporate identity. you make a system. these are examples of using the identity guidelines, the system rules, that you can extend.

this is the image of a page, it has repsonsive parameters, how does it work in sizing. if you have menu, it changes as it gets smaller and then disappars. its like a movie, a narrative.

RSS feeds are good because you can never predict how long a line may be. in print you did copyfitting. no more. a designer must solve things on a meta level, because the text changes every 2 minutes.

so one more example. that was a newspaper. this is a publisher in NYC, nomad editions, we made not only the designs but their whole CMS. the screen on the projector is small. ahh, its bigger.

so we made a design, for the amgazines, and for their entire workflow. here its technically a static HTML page, but each palette is movable, it remembers their position – like a PC desktop. anywhere you log in. indesign, you have it on your hard disk and then it chagnes? no, i work online, directly on the surface of the design object.

i can drag article ordering around. like an application. its a website, but an application that builds the wbesite. there is ‘preflight’ information here. i can add images, its like any design desktop, except this is all in the browser and this is live on the server. and its collaborative.

This has 24,000 images in the stock library, inserted in to the texts. This is what the client sees.

This creates the responsive code that we are going to make manually; it makes it from what it finds, the date, the volume, the amount of pictures. it works best on ipad as it was made for that, but it knows the window size, so it works everywhere, and the design is produced when the user loads the page.

the designer makes rules and the rules make the design.

its like old corporate design, with rules that the designer must follow – then they are not a designer, just a worker.

you can see this adapts as the window size is dragged around. I have a 30″ screen at home so the full article can fit on my screen, and it will work. very few users will read it like that, but it works.

So the role of the designer is not to make a picture – they have picture in sketches, or the idea in the head. the designer makes software and the picture is made by the software.

you may not like this, wnat to shoot me, but i am just the messenger.

i like books! i like the feel of books. i cant help the world is changing. you make a fence around you, sure. there are now more horses today than in roman times. but its not for war, its a saturday morning hobby for girls. There are still stone carvers.

Things dont disppaar. but the volume, the amount, and the kind of solutions that people are willing to pay for, that is different. a stone cutter, you may work in science to recreate what they did 10,000 years ago, so you need subsidy, the community pays because its interesting.

so the technology is changing fast, and you can choose how to adapt, to change what you do or do something else.

there ar e alot of books and magazines today, you can keep on doing it forever if you are lucky and smart. but it will be rare to do design the way it was done last year or 10 years ago.

if you WANT to stay where you are, you must know what else is happening so you know you really want to stay, and you know what you are chosing for yourself. you may find that your profession as a designer is making new things, not being an indesign operator.

so now i will pass around a USB stick with a folder with documents and textmate. should work for you. or you can use any text editors. TextMate and TextWranger and BBEdit are good, they know syntax and color code, TextEdit will just be black text.

That will be okay today though, as we are making simple markup.

So, a plain text file. ‘NEW.HTML’ We start from scratch.

If you ‘view source’ on say ther eis a vast amount of code. but its not that cimplicated. its a lot, but is not complex. there is no magic there. understand what happens, and if you, learning a new language, you learn a few words, but to be fluent it takes times.

So this is HTML. its markup. NOT programming. this is coding. open tag bracket, tag name, close tag bracket.

eveyrhting is text unless its marked up as something else.

if i write <html>hello</html> and open this in the browser, you see that text.

This is ‘wrong’ HTML. but if you make a mistake, the browser will solve it for you. if all browsers followed the standards strictly, 99% of websites would not work. So the browsers interpret the code.

it has advantages and disadvantages. if you support sloppy code, it works, but hten code remain sloppy. the problem is that non standard code means it works different in different browsers. if you do it ‘right’ the chance it works well everywhere is much better. you must test in a variety of browsers.

that wont change, most sites have sloppy code.

so this is the most basic page. it has no errors, you see BBEdit highlights the markup. you can see removing the brackets means that html becomes part of the text. so with them, the browser recognises the word is a ‘tag’

and the second tag has a slash / so that it means ‘end of tag’

the web is simple: ‘everything is a text. if its a tag, inside is text or another tag.’

I can add another tag, b for bold. So you see that is inside the html tag. its infinite, its called ‘recursion.’

Now, if i copy the line 10 times, you see the return doesn’t count, a million spaces in a row, tabs spaces returns, all mean one spage. paragraphs are set with a paragraph tag, p. this is responsive, the line length is varying by the window size. very simple. this is used all the time, you change the container and the text inside reflows.

there is more to it. HTML never gets direct text. i have nothing to add information about the page. so you have 2 tags inside HTML that are allowed; HTML has HEAD with meta information about the page, and BODY, with the page contents.

you see i have to close the BODY tag inside the HTML tag. i cant conflict with tags inside tags, they can’t overlap. this can be a problem, suppose i have a bold word here, and this phrase in italic, and i overlap them? browsers will deal with this, but it is sloppy.

That is why WYSIWYG wont work. you need A LOT of markup code to make it work, and you’ll end up with a lot of needless markup.

So what can go in head? TITLE is obvoius – it sets the name of the window.

[DC: Someone is using 🙂 ]

In the body? Headlines are core to texts. H1 for a top level headline. H2, a lower level. the browser adds some styles for these for you. a present at the start, but a drag afterwards because if you forget to style something, the browser will style it for you. and there are no standards for this.

Its good practice. you can copy from my template a line that will RESET everything.

Q: why is my editor indenting things?

well, the whitespace doesnt matter. its a good habit to indent the tags, so you can see that eg everything in here is part of the body, everything here is part of the head, and all is inside HTML. its just for you. it works if you do it manually, but the whitespace can take up bandwidth. so optimized pages will remove all extra white space for a machine to read. indenting is for humans to read.

so if you want to learn CSS or HTML, learn CSS. good html does not have any style, ist just strucutre. so now we have 2 headlines, H1 and H2, and a paragraph with a bold text. this says the structure, nothign about how it looks. the CSS controls how it looks.

so i will type the CSS _inside_ this page, but in a website will 1,000,000 pages, you dont want 1,000,000 stylesheets, you wnat only 1 for all the pages. so you make 1 change and all pages change. that is the coporate manual pricnciple.

The HTML is the filling of the corporate magazine, and the CSS is the style manual. They have to work together, but your main emphasis is on the style; many HTML files and one CSS file.

But for now i do the CSS inside the HTML page. in HEAD i add a STYLE tag, opening and closing. and the browser knows that inside the STYLE tag is another language, with different rules.

CSS is another language, its french and spanish, there are similarities but its really very different.

Here i add BODY to say, any BODY tags, then a curly brakcet, background-color: yellow, close curly brakcet, and in the browser you see it.

i can add to it, add a smeicolon, then color:red; and you see that.

There are TONNES of css instructions. CSS1 to CSS2 doubles. this book shows you all you can do in CSS. if you know how to do CSS, you look it up. i dont know many of them, i just look them up.

evyerhting you can imagine about how to make web pages is on th web.

one i recommend is W3C Schools. its well organizied, it has training chapters, learning HTML is what we do now, and it is all on that website. They have many examples you can try them all out, see the markup and the output live in the browser.

W3C SChools has everything you need to learn there.

So we cannot go through all. You can understand how it works today and learn more yourself.

h1 { color: green }
h2 { color: blue }

This is direct. Its not as direct as InDesign. but you can do it all local, 2 windows. you see how it works, nothing is hidden, as it is in inDesign.

Q: why is your text sans and mine Times?

A: as i said, browsers has defaults. we did not specify a font. the browser picks SOMETHING. it depends on the browser, the version – if you removed times, it will pick another.

You see a great design on the web? someone in australia sees it on MSIE4 on an old computer? they see it – not great. web has always been like that.

now you dont know what system, what browser, and adding to that you dont even know the window size.

designers see this as bad for the designer, i see it as saving you. no one is thinking about multidimensional typography.

[DC: I left to see sol and octavios talks and when I got back it ended! 🙁 ]

@petrvanblokland lecture

‘Design the process’

These are interesting times. Difficult times – for students, designers in the profession a long time. Things are going on outside.

This presentation is to say something if you didn’t know alreayd. If you get scared, thats good. Its about strategies. What needs to be done? Much. Many people needed to do it. They need to know.

Its about practice – and education, more so. If you dont stay a student always, you are in trouble. If you’re not a student any more, you dont feel as a student, you’re also in trouble – but thats your own choice.

Change yourself, keep yourself up to date with what happens. Your customers expect it. This is a movie by Gogle, 10,000,000 hits in 2 days. The paperless interface. THis is what you see in your glasses. NOt there yet, not cheap, but it is real. A mobile phone is old. More old in 5 or 10 years.

You expose the inforatin on the world. This is what Google wants us to think. This is visible 2 days later, more like it! [The ad parody – applause]

So that is how it gets. May not be what we want – what will we do? Alternatives? We must wait for things to happen. If it goes the wrong way, you are responsible.

This is 8 weeks of lecture in 45 minutes. take it how you want.

2060. Students today will work in that year. my parents (pretend) to work today. my mother is 86 (?) and she says should i send this or post it – ‘send’ changed.

Can you have an opinion about today in 1900? things sped up. 50 years time is like 100 years time, 100 years ago. There is no hint of what will happen, and it speeds up.

2022 is vision of today from 1985. No internet, no social media, nothing we consider imortant. thats 5 years after i graduated.

i had 60 graduate students in breda. all graduated in a new world, the iPad was in the middle of their study. The world changed. What will they do about it?

If thats scary, this is scary. 2 programmers – not designers – started – you say you want a website, 250 euros. A lot? nothing for old grpahic designers, who charged 10x that. 300 is the most! wait for 3 days, you choose from 50 designs and pay only one.

you can do this 10 times and its cheaper

Its crap? okay. why? can you tell the client why? they think it looks nice. if you cant say why its crap. you get a PDF in CMYK, but who will do the color transform? the printer just does it, and its different colors. You think that is the design, but its only teh start of a design. Can a design studio fix that?

If that is ‘not’ design, what is design? I dont call that stuff design. Design is nice chairs, religion, medicine, typefaces, architecture, new ways of curating companies. What is design? what does a designer do?

We all think we know what it means. But 200 people make 200 different definitions.

What is comunnication? That word doesn’t exist. We think we know the meaning of design, and we dont. We know that word

What is design education? making nice posters? how is research different from design? what is knowledge?

We think we know, but we dont really know.


We have models, in our head, so we think we understand reality but really we just understand the model.

Models? Intuition, taste, knoweldison, tools, professional opprtunism.

One model: ??? …. !!!

Question, Knowledge, Answer.

True or not, intenionally wrong?

Comany, scale model, building. The architect makes a model only. The architect doesn’t build a building – say ‘you like it?’ ‘no’ and make another one.

Problem, design process, and you’re done. Thats what customers think. You sketch it, you’ll be done, I’ll pay you.

That is production. Not design. If you know what it should be, its production. ‘This, now 100 times’ – no creative additions, its just production.

Design is the fact its never a soution.

Problem, Design, New Problems. You are never done.

Make a sketch, get agreement, its a messy thing. Production is nice, design is fuzzy, never ends.

Chess is like this. Explain chess in 5 minutes, 10^100 moves or so.

Design solutions, there are more than atoms in the unicerse.

Sketching never ends. you can do on and on and on. ARtists like thism ore – is it good? no! lets do another! …until someone says they like it and buy it, or put on an exhibition.

Design is different to art. client pays for it to be done by a time.

So we define and redefine. Book by James Blyke (?) who says mathmaticians prove words have no fixed meaning, because communication redefines meaning. If you cant change the meaning, you can’t improve understanding.

Design is: The skill to kill darlings.

You have to be good at it. Killing your darlings. Problem is not to get new ideas, its to get rid of them. They eat up your mind.

The craft of when to apply skills. When to program that, or sketch it.

The art of creating contrast – if you cant show how its different to what was before, you can’t convince a client to pay – but if its too different, your bief to design a bicycle and you make a spaceship, client wont pay.

Initially its not there. ater you made it, it exists. then you can remake it better.

‘the evoloiv gcraft of detail mamangement by applying resaerch.””

milton glaser ‘fear of failure’ – on vimeo. design is the balance between professinoal success and personal development.

so balance is a core idea of design.

Design should be 20% style, so then 80% functional. any number you get is a key metric from a client on what to do.

‘It doesnt matter what it does, as long as it looks good’

‘it doesmnt matter how it looks, as long as it sells’

design is between each thing.

A flower shop? there is the cliche or something very new. a design to be close to what we know, so we undersatnding.

coherency versus diversity.

should it all appear different, so no identity?

corporate identiyt is to define coherency to create indentity.

you create a *visible grammar*, coherency is logo, color, names and typefaces? or is that what is diverse?

The basis elements and their application.

And today there is managing the details. if you start too small, a page sketch without detail – if you start too big, deciing too many details too early.

a big design job is about reducing the problems.

recuriosn: any design job you can disassamble into prats. but all the parts are designs. every piece has its own design team, time targets, budget.

so you have to work with that. you educate customers, your co workers and yourself. the world changes. you must change with the world. so you must change yourself, educate yourself.

there is no school for designers over 50. so if you teach, you educate yourself, and hear yourself teaching, so you remember what you teach others.

Designers plan the work, 6 weeks, we sketch 3 weeks, then we get busy… how do you know if you can end sketching in 1 week? how can you cost things up front. how to estimate cost? well, what kind of customer are you?

So there is no straight GANTT line. 90% of the work is done in the last week. [laughter]

Recognise this? everyone does. what do you do about it? students like to extend the deadline! we wont postpone the conference because they didnt make the posters on time.

So what is the solution? work harder? better planning? if this whole thing is 6 weeks, its arbitrary. its a coincidence you finish on time. You could pretend the whole job is one day – two days. See what you can do in 2 days. Totally mess up, and do it again. That shows you cost, how to work with the customer. if gives a lot of presentations.

if the customer cuts the deadline by 2 weeks, no problem, this way. dictate the deadline – be the architect of the process and not the slave.

3 days ago i was in Urbino. We did 12 things, 3 or 4 per day. The brief is complex, design an exhibition, 3 areas. they have 60 minutes. they feel very stressed. Its good!

being stressed is something you make yourself. You say its to be done in 2 hours?

then do it 12 times. you try to run a marahon once and say ‘that is my time’ – no, you practice, build up power. do it again and again.

so we make movies. this is a scale model after 1 hour, its 10 cm high. The vieo makes it seem more real. You start from nothing. do it. start again, do it.

This is 10cm high! you dont need big models, 3d renderings. you can get a lot of information in a short amount of time.

I make them judge each other. they judge all others but not self, scores out of 5 with 32 total – you can’t give everyone a mark. this gives a olt of information. the vertical is what they give each other, and the horizontal is what they get.

so you can see the good ones, and you can see who didnt think it was good. you can ask why!

graduate students, present all their work, you cant remember one from the other. here are 144 deicisons in 45 muntes that are documented. then you can go back and ask questions.

I tried this system many times, at start it did’t work. design gets better when you redo it. so repeat it many times.

students see ‘all very interesting, do you relaly need to nkow tall this to be a designer?’ – well, no, but what will you do then?

wrose, a student asks, what you need to pass the class? a hard question.

“Do you need to play 10,000 violin scales to be a professinoal violinist?”

“do you really need to run more than 2km to be in the olympics?”

the only way to get better is to do it 1,000 times. to do that, you need afast method.

sketching is THE tool.

In 30 years, we have 4 years of archives of sketches. When do you sketch and then go to program? 10 minutes sketch, 30 mins programming, then 10 minutes programming.

Skip the details. if this sketch is not right, more detail will also be wrong. adjust the pen nib adjsutts thea mount of detail. playing, the 1 hour assigment is like a game – winners and scoring.

we have a design game, where you only get half the rules. people complain its a stupid game, poorly prepared, but its how customers are! The ‘clients’ in the game say yes, no, or no reply. ???

There is no edge to the tools, the project, and the design job. Its just an emphasis difference.

so make tools! there is no design game tool in a shop. we make it.

This it the idea space, the tool space. the crowded beach of indesign.

why make new tools? it is profitable. the cost of making versus the cost of not having. if you make it, you improve, you do it better.

curiouty! its fun to do this. it focuses you on your job.

left coloum, my contribution to type design applcations, right is other people.

This is 1981, 4 years before the mac. 20 s to render a letter. didnt work well. Plotr.

This is Robofog. Combined python with fontographer. went out of biz with OSX. not Robofab and UFO.

Web Type, I dont trust auto hinting and kerning. How to make a tool? RoboFOnt. we found frederik, he made robofont in 2 years.

we had a graduate sudent, in 2 years they make another in design. a conference about graphic design, 9 of 10 tools

That was the last robothon.

This is what I needed, and maybe others needed it too.

There is a lot of web type to make with eixisting tools.

If this is type deisgn


Then this is hinting

hinting is often seen as apart from design. but its like the spacing, core to the design.

RoboFont is totally python, you can redefine anything. glue in your own code!

This is an image no one knows. its real georgia. This is it just before rendered in pixels. Hinting does this kind of adjustments. not a nice shape.

any time you hear a desiner tell about the lovely shpes, think of this shape. this is what happens online.

Why? you dont draw outlines. you are painting. paint is how much black is in that area. nothing about shape. any shape, many shpes create the same greyness. the outline only counts in large sizes. text, doesnt matter what you do.

Many people wonder about colors in enlarged screen fonts – its fake, phantom colors. the subpixels, you increase X direction resolutioon 300%. You need to see the subpzels, not colors.

So i wnat to see how this looks in subpixels, so you need to make pxel viewer yourself. or get someone to make it for you.

what really matters today?

html5 css3 all those things, @font-face, DOM, UFO, Pythong, SQL, etc etc. its all on the web.

that matters, apps with dedicated formats, sms, flash, word, indesign, corp IDs, printed tooks and file based applicatoins – all dead.

you get a word doc, put it ino indesign, almost finished, and then an updated word document!

anything on your computer is dead. new computers have nothing on them. applicatoins are not owned, not on your machine.

This is the first wired magazine iPad app. 550mb, 10 mins to downlaod, fills an ipad fast. 50% is portrait, 50% landscape. Only pixle.s

A student format. not working on iphone or android. not working on retina as the rez is too low.

why do it?

publishers have 100s of indesign worksers who are just operators, not really designers.

the answer is responsive design. make sure the page is so intelligent that it can deal with different sizes. it means you can ccode the page, not makinga picture of apage.

indesign is useless, because its cant know if those 3 things is 3 cols that could be 5, or 3 separate things. its knoweldge that must be coded.

when you have markup, you can repurpose it. adapt it to new formats, change the identity.

there are not about to program that.

@font-face means you have any font in a webpage.

@media means you have different stylesheets for size and format.

so you have a single document that adapts.

so you sketch and sketch again. you can’t draw all the possiblities in photoshop. you can make a picutre, you cant do it in photoshop, send it to someone els.e

if your customer finds out that the programmer did 99% of the work, they dont use you again.

This is the AmEx travel guide. done in indeisgn, 15 languages. 250,000 copies, printed in 3 days – they pause the press, change the blakc plate for new language and restart the press.

We made a CMS that offers translators, designers, everything online. this is an applicatoin interface, not a website. it looks like a webpage, but its an applcation.

this is a startup in NYC. we started with respsnive design.

the CMS has windows, a W.I.M.P. UI. the page code knows how to deal with this in smaller sizes. It takes design decisoins.

People say yeh yeh yeh, but books will alwys be there. I agree.

but comptuers will disappear. ‘mail’ is now electronics. the word exists, the thing changes. books and magazines will be there.

Who remembers what ebooks weres? you send me the book, or the paper copy?

program! it is not magic. the workshop, we start from 0 and we have a responsive website after 90 minutes. its not magic, there is tonnes of information online.

We made a poster for 25 years of my studio. all the images on my hard disk. 2 hours of programming to make this 2-3 pages of code. To make it manually? well it would take 2 horus to explain it to another programmer.

And its recursive. so there are tiles with previous versions of the poster.

ANother layout, all made by a program with few rules. Here are the simple rules, and i cant tell if a human or a program did it.

You have to choose! limit resources. if you have 3 weeks, make it in 1 hour. limit yourself, its very rewarding.

…as long as it works. if you limit too much, it stops working.

What is more likely? make a living from type, or typography.

make a living from protecting or exploring.

“i know a little trick and i wont tell you”

Survive! never work for friends and family.

how do you want to be paid?

customers what to define everything. define quality, volume, time and money. pick 3 i tell you the other one.

The best you ever did, 1000 pages, 1 week, £100.

This works. Try it – see if you work has all 4 defined by the customer 🙂


future is everything is onien. cmptuers hide fom view – read Sci Fi. ‘e shadow’ is all recent sci fi. bots buy on ebay thing you like without asking you. acess is omnipresent.

volume mangement.

Designers, you have to know, to improve.

what is your profession in 10 years time?

will you do what you wanted to do?

and in 2062?

Design job will stay forever. Its the oldest profession and design, will alawys be there. some cant tell teh difference.

design the process, the tools. enjoy! its a great world.

Thank you very much!

Q Dave Crossland: You said you can reprogram robofont. but robofont is proprietary, and you have the source code but if i download it, i will not have the source code, so i can not reprogam robofont.

A: good quesiton, it can be done. but not right away or by everyone. its a young thing. there are improvement already. if it can be done by anyone, you need full source. its not available. when you buy it, you get features not in the demo. but if we give the source, we would only sell it once. we make an app for designers, not ad agencies, so its a small market. its more than the people in this room [DC: 300?] but thats about it. so its a practical economic thing. if you’re really interested to change something in it, something you dont like, frederik is always there. gustavo has done this, we say, here is a chunk, you can do this, you’ll get there. it CAN be done. we dont have to change the app to give you access. its a different way than to give you all source code. the app has an architecture so that can be done. so if you want to do anything, we can talk about it.

Q gustavo: who influcend you? who are your teachers?

A: A lot starts with gerrit noordzij. i met him in 1976. in his letter lessons, he said to build my own computer. the ‘a’ was 100x100px, a tedious job, all wired and soldered myself. 6-7 yars to be rid of gerrit, also good. edudation takesa while to get rid of your eachers. my heroes are designers but not normally caleld tha.t andrew wiles, a cmabridge mathematician, proved fermat theorum is true/wrong. a good bbc documentary. 7 years on his desk inventing th eproof. 300 pages, no one can undersatnd. but its a drama, 1 day before he publishes, a fatal mistake is found. its all aout his design process, *the search.* then just before the publication, he remembers a japanese mathematician, and these 2 things are like counter shapes, that proove each staement. you can’t do that without design thinking. improving on what you know, going back, rejecting, trying again, and maybe it works. 4 meters of sketches. a live document, much mre live than any digital media. having said that, if you know what you want, you dont want a tedious production, so you program it. so my teahers are scientists, researchers, who think like designers. they enver admit it, but they do the same thing.

– – – – –

Christian Annyas on Movie Titles


Web designer, graphic designer, blogger, curator of @MovieTitles

This is my blog, I post collections of design images. railways brand logos, department store logos, horror movie titles.

The most popular one was a set of speedometers from chevrolet. a suprise for me.

i have a collection of movie title stills. from 1900 to 2012.

this is my twitter: @movietitles

i left it but i am asked to update it so will try 🙂

i want to talk about certain aspects.


This is the oldest i have. this is a french title, most are USA. you may know the name, there is a movie ‘hugo’ about this director, mariez, the first master of cinema.

The title is inspired by its original title card.

This is 1903, 1907, the 4 stars in the corners and the type, you see the change over 10 years.

the early movies added painting frame style borders and all the credits were typographic, with credits at the start of the movie. all information within a minute at the start. or 10 seconds, with a lot more type than we have now.

these are from DVDs, larger images come with blu ray.

Buster Keaton’s films, you see color come in at the end of the 1920s.

1930s the early horror! there had been horror mobies, but Universal Studio was the first to really make a profit there. they made Dracula and Frankenstein. Until the 30s they were all typographic with the directory name, the name of the mobie, and studio all on one screen.

Univeral made several horror movies, until tthe 60s when horror became Sci Fi. The universal studio type was then different for each movie.

When horror movies were set in exotic counties, the type reflected that – it was all hand lettering.

This is all hand lettering.

In the 40s, type changed to more ready made, although its still hand made. then in the 60s with SF, the horror type bfrom before because more futuristic.

Scary animal movies was a genre of horror with a SF feeling in the type.

I planned to make a series of horror stills, but horror movie titles are disappointing after the 60s, the expressive lettering is on the posters, not in the film. I hope next year to have better collection.

In the 30s the Western movie became a big genre. they looked for a way to design in a ‘western’ style, get a ‘western’ feel. They did that with the type we now know as ‘western’ type, from wood press typefaces and others were new lettering styles.

Most of the stills from this era have a copyright notice and the studio logo. each studio had its own team of designers, the designers had their own styles. so its hard to group the stills or tell something about them. they are all different. All very different ways to show the audience they are gonig to watch a western movie.

many stills have the same style of ytpe, but there are rare unique cases. Dribbble has this image ‘The Furies’ – a hipster design.

Western Movies used to be big blockbusters, and they had ornate title cards.

[A NICE 3.10 to Yuma poster image]

Then in the decline, they had a lot of ‘made of wood’ texture type styles, eg ‘Comanche Station’ ‘apache territory’

These are all from the 50s, and these are hte 60s, 70s, 80s you even see helvetica for a western! and the 90s you see things change.

there is not much infmration in the title as all the information is at the end. back in the 50s, all information was at the start.

This must be the worst western movie title ever: ‘the assassination of jesse james by the wrorard robert ford’ – black gorund, white text, a book sans.

this is 2007, 2009, they dont make many, so the modern westerns titles are very different to the classic styles.

okay, another topic.

IN the 1930s, Warner Bros adds the trailers in their DVDs. The titles in the trailers are different to the movie title; often more expressive. Which is VERY different from contemporary practice.

You can see the 1930s had more expressive, decorated type. each movie had its own type, lettering done to tell a story, made for the kind of movie it was. ‘G-Men’ was a crime movie and to me it LOOKS like a crime movie from the type. today, it would be just Bank Gothic – perhaps you know that type – but i prefer the lettering.

Its like casting a new type for each movie. they dont do that many more.

The type almost fills the screen in the 30s. today its less massive.

Another topic. 1940s ‘film noir’ – more a mood than a genre. crime movies, with a femme fatal and a poor guy who doesn’t live long. Many titles made here from the old billboard lighbulb style lettering, dotted line type, with single and double dotted lines.

There is a lot of lighting signage type, neon signs and LCD type.

This is a russian movie, with a apartment buliding with lights in rooms turned on and off to make a word.

Back to film noir, there was very expressive type, and in some of the most famous movies. You can see the studio’s variations. Every title is different in a house style theme; its hard to say anything about genres of type. this is a columbia pictures title from the end of the 40s, they all have condensed serif type in the center, large, with 50% opacity, with a script above it.

in the 40s there was a sub genre of film noir; documentary style film noirs. My favourite is ‘Sunset Blvd’ with a stencil type on a curbside. the 2 main characters end up on the gutter, and thats where the title starts.

In the 50s, the type became more sophisticated looking, more serif text types, also condensed.

in the 30s and 40s, there was a trend to show a title as a book cover, and openign the book it shows the cast on each page. Also they showed images of the labels on office files, meant to be like files in the CIA or FBI.

ANother style was the inivition style, with script type styles and decoration of the invitation with symbols on the film’s topic.

In the 60s there were the 3 hour or longer epics about old roman or greek fables. The titles were roman carved lettering type styles.

There were also many titles that were not static, that moved, so i show several stills.

Another genre; Swashbucklers. The old classic pirate movies.

Another, the movies set in the orient with Chop Suey type.

Here is a oriental movie where they designed the latin type, and there are some unusual type designs there.

In 100 years of sequels, there have been many sequels. In the 30s. The Back to the Future is the most consistently designed. Toy Story, Harry Potter, Lord of the Rings. Bourne Identity triology.

Saul Bass changed movie title sequences, by making them small motion graphics in themslves. I go too fast to do this justice, but his work is very impressive and varied. His type, is all unique, for each movie.

Science Fiction. In the 50s it was ‘creepster’ style, the slanted sans style, the star wars intro text trapezioid type, and so on.

Finally, a spanish director. Painting brush lettering initially, a long marquee title text….

so i will publish some more title images on my blog.

Unger Q: you said one was the worst ever made. did you see them all?

A: I saw many films, but not all.

Q: we have many newly educated type designers these days. do you think all these designers could mean movie titles will again be made for each movie. do you see that trend emerging?

A: It depends. Dylan today said that the prodcer will decide how the type will look. not all producers hae knoweldge of typography. so it depeneds. there is a change in tyep in general, trends from 100 years ago come back. so maybe, education will help rejuvenate movie titles. you can see that they were a lot of intresteing stuff in the past, that i havent seen in film the last 10 years.


Gustavo: Elementar

Gustavo: I am going to use a different presentation to Dave, I am showing screenfonts.

My approach to designing type for screen is different than approach used by most foundries today, based on my experiments over the years.

font -> rasterizer -> pixels

The model of PS and TT relies on a rasteriser, a layer between the font and the pixels that are finally seen. I tried working with that approach, and found several problem.

I wanted to work on the pixel grid. Directly on the media screen. My approach to screen type is more like bitmap fonts. No distance between the fonts and the pixels on the screen.

What I did is to bring the grid to the font designs. I have applied this methodlogy to a series of designs. The first is Elementar. Later, several other fmailies and alphabets.

I will show one project. By the way, a few comments about my presentation. I will use a lot the zoom in OS X. If you have never seen it before, you can find it in the Universal Access, and I was very happy when I saw this feature, so I tell you.

This presetnation is at

I have tried to write in depth about the ideas behind the work in 2 blog posts on my website. Have a look at them please.

So, Elementar is my main work. I started it in 2002, when I was a student in Brasil, and the intention behind the project was to bring the same flexiblity that we have had in print for several decades.

My main inspiration was Frutiger’s Univers system. This illustration shows the grid of styles; vertically are height variations, the letters grow in pixel height, and horizontally, the width changes.

Univers has Multiple Msaters, but each thing here is based on pixel elements.

Here again we have height, and horiztontally, the weight of stems changes. A 3rd axis in the system. If you apply this systematically you get this kind of variations space.

This is not something you can achieve with scalable outline technology. Here you can scale the letters in a non proportional way. PS and TT do proportional scaling. At that stage I realised this method had potential for me. So I continued working on it.

Elementar, I call it a system, as it more than fonts; it is structured in layers. The first layer is the method – the images you saw. Vague visual instructions about how things look. It doesn’t do anything. ANd it would be humanly impossible to do by hand.

On top of that layer are production tools, that transform the method into fonts. It can do things for you to make the fonts you want. With that you make a huge collection of fonts.

But font menus can not handle such an amount of fonts. To use Elementar in Word or Photoshop, you get a huge list of 100s of fonts. To solve this, I build a set of interface tools to navigate the font space in a direct way.

The first layer of the syystem: A base alphabet first, skeletons of letters, that are transformed by parameters to make final fonts. Here is a diagram of the base alphabet and anchor points. Here we have an overview of the alphabet. We see a rounding of the corners to solve ambiguities like U and V

This illustration shows the Elementar and Wil Crowell’s famous New Alphabet. I was concerned that letters from my system could be illegible so I avoided big jumps from conventions, while remaining as flexible as Wil’s system.

Then the quantitive parameters, qualitiative parameters, and element parameters. From the start I was developed with the interface, so I made icons to represent each parameter.

Here is each parameter and what it does. Width, height, weight, contrast direction, archtype styles, and writing systems (latin, cyrilic, greek, hebrew, arabic) and typographic details like number variants.

From 1 pixel to 17, one pixel added at a time, and added in various zones depending on the jump – x height, ascenders or descenders. I tried to keep overall proportions uniform.

Here we have a closer view of the width access. From 1 pixel wide to 9. This is the size of the counter. The side bearings have to be compensated for this.

This shows the 2 stroke axes, not just weight but a space of variations of contrast. Here we have negative contrast, where horizontals are thicker than verticals. Here is the space in letters, the 2 stroke width parameters form a single weight contrast parameter by their ID.

Each font has an ID or co-ordinate. The first 2 digits are the height. Then the 2 stroke weights, and the width.

here are element parameters. you can see the element can be set together, a uniform or plain texture. You can add a negative element, to add space between each pixel element. or each element can be built with a 2×2 pixel grid, with space inside. ::

These 2 parameters can be seen in a ‘pyramid’ diagram.

This is qualitative, its not a measurement of the letters but the details. It is subdivided into subparameters: rounding (where the rounded parts of the letters are, in a systematic way, with no rounding, some parts, more parts to create a sense of cursive style, and fully rounded) serifs (places in different ways) diagonals (reduced totally to -| or slanted) and the connection parameter, how the bowls connect to stems (straight or rounded to different depths) and finally, an alternates parameter to select varoius shapes of a g l i j f and t which can have a variety of skeletons

I have style parameters descriptive names. elementar sans A B C D, elementar serif A B

Now we can see each style in more details.

[DC: A very nice ‘rainbow’ diagram and you can now see how each ‘edge’ of the ‘cube’ fits together; they are prisms]

This is the interface for elementar. Deveoped with Typotheque on

Here is a slider for the height, you can look close and see each step, where it is going. Here we have a slider combing weight and width.

Quantica I is a pixel font with more horizontal variatoin between round and squares to make reading text type. Like Verdana. I tried to use the same method as Mttthew Carter used; draw pixels first and develop and outline based on that and then TrueType hinting for that.

Here we see the same bitmap sizes on different amounts of pixels, with a ‘heatmap’ overlay visulatiisng, for each character. From that, I drew the outline font.

Then I hinted it with TrueType, to reproduce the same pixels I originally designed. This is how I presented this type at the Type and Media programme. I tried my best to get B&W, Greysacle and ClearType rendering. Working on this was very frustrating for me. Macs did not use TT hinting, only Windows. So I decided not to use TT hitning and return to my grid based approach. That means there is no rasteriser layer. This shows the same TT hinted font in various rendering environments.

Next project, Geometrica, uses less than 5 px in the height, so you can not have 3 strokes. This was designed to use this limitation as a feature. It exists in 5 weights, the display version, they can be overlapped to produce this effect.

You can mix the layers, align them, like the hairline and ultrabold to make a skeletal instroke. The text version is spaced differently, for reading.

Modula goes in the opposite direction – the biggest size is 40 elements tall. They all share metrics and construction, but add more and more detail. You can see it uses Elementar’s ideas with a few extra details added.

Gothica: A family of sans and serif, all build on a grid, and all weights have the same width, so they can be overlapped to produce different visual results. The angles used are ‘beautiful’ – isometric angles that work well on pixel screens. Height variations.

ESymbols. A set of symbols for Elementar. Unfinished, and perhaps unfinishable. I don’t know where to stop! The colors show the categories. I love the bug’s growing sizes.

EMono is a special font for coding with text editors. it had to be removed from the system to have special constraints; there is a 13 pixel wide glyph but the monospacing is only 11. I use this everywhere I write on my computer.

Segments. A type family based on the famous segment alphabet from LCD displays. We see this 16 segment version everywhere, uppercase only. Mine is 32 segments so it can show both lowercase and uppercase. It is a system that allows variation of weights and can be overlapped.

???? Some glyphs are the same in both styles. Some are different because of serifs. Here is the full charsets for serif and sans. the regular and bold share the same metrics. This is condensed sans and serif.


To navigate my collection, I made a interface to show how families can work together.

I could not do my work with out these tools: RoboFont, RoboFab, fontTools, vanilla, DrawBot, NodeBox, and I thank their authors as I could not do the work without them.

This entry was posted in Knowledge. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Posted 6 July, 2012 at 4:21 pm | Permalink

    You are the open source notepad 😉
    Great to have all that quotes together!

Post a Comment

Your email is never published nor shared. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


  • What we do

    Understanding Fonts is a type design training business. If you'd like an event in your college or city, let Dave know: