hello web typography

- 1

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

h

hello!

hello!

hello!

o!

hello!

nice to meet you!

I’m web-typography.

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 //

hello! { Analysis about Web typography and some babbling } Caroline Peni 59510 / w3a1

All images used in this report are owned by its respected owners

2 3

- 3 2

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 I. Table of contents

1. inspiration /weight /composition /curves /colour /medium /3D

4 5 9 13 16 21 25

2. articles

27

3. assignment 1 /inpiration /brainstorming /sketch /digital sketch

34 36 38 39 40

4. assignment 2 /sketch /digital sketch /website

42 43 44 46

5. assignment 3

48

6. conclusion

52

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration

inspiration

I’m not as original as Jan Tschichold or any other typography expert. But I copied all style that inspire me and mix them up together.

4 5

- 5 4

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / weight

Inspiration for WEIGHT

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / weight

Weight is important to stress the attention viewer should give. Every typeface have different weight and font character also determines the weight. In typography art, font-weight gives thickness because it fill the space. Font-weight is colour opacity.

Paper and sceen are different. Paper is static, it is as it is on every people. But screens are various in resolution and quality. Measuring font weight for typography that will be shown on screen is important. We have to be sure that the reader will be able to see the content clearly and the font is not pixelated by the weight. It is common already that web designer use different font-weight, for example some content that need to be highlight.

6 7

- 7 6

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / weight

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / weight

8 9

- 9 8

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / composition

Inspiration for COMPOSITION

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / composition

10 11

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 11 10

1. inspiration / composition

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / composition

Composition is everything typography is about. Good composition has good grid, active white space, and it has to filled with the whole content. Good composition could also lead to good usability / user experience. We don’t need fancy graphics to make a good webdesign as long as we could place the content on the right place.

On prints, it’s easier to composite the text and it’s more free. But making text composition in screen is hard. Then again, it depends on the screen resolution. If we demand people to scroll everytime because of the composition we made that doesn’t meet the proper size, people will be annoyed and leave the page imidiately.

Composition is not always about grid and white space. Sometimes, it also depends on colour and fon’t weight.

12 13

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 13 12

1. inspiration / curves

Inspiration for CURVES

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / curves

14 15

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 15 14

1. inspiration / curves

I love curves, don’t you?

Curves in web-design we could see mostly on serif fonts. There are some script font style that well applies in screen, for example Sadey Ann, Lavender Script Pro, or Melville. But not all script styles work on web. If we are using @font-face generator or so, we have to carefully choose some spesific font that doesn’t pixelated as it’s rendered. And scripts style is very risky to be use as default font.

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / colour

Inspiration for COLOUR

16 17

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 17 16

1. inspiration / colour

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / colour

18 19

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 19 18

1. inspiration / colour

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / colour

Deciding colours is the most fun part while designing. I agree that colour is an obvious aspect in design that really shows the creativity of the designer. Aside from the designer personal choice, colour choice also depends on many things, for example: concept, font-weight, or to difference some text from another for attention making.

Colour could also be a dangerous part of design. Too many colours (especially for text) is not readable for some specific users. Background colour/images also an aspect that web designer have to take into concideration while deciding on what colour should the text be.

And as for me, I ‘rock’ black and white for their naturalness because I love to put colourful images on my web design. So just let the images give colours.

20 21

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 21 20

1. inspiration / medium

Inspiration for MEDIUM

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / medium

22 23

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 23 22

1. inspiration / medium

Typography in enviroment is everywhere to be seen. One of the example is from street graffity.

We also call it typography. Talk about enviroment and medium, Web Designer medium to make his typography is very limited, that is screen. His expression of typography must also be brought together with his skill in progamming or scripting and his understanding of user experience. Crazy typography art in web is rarely to be found. But the good thing is, web is digital. Everyone can access as long as they have internet. Web designer can share his typography art to larger number of audience.

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / medium

24 25

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 25 24

1. inspiration / 3D

Inspiration for 3D

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / 3D

Making 3D typography is cool (and makes you proud) it is challenging also since we have to dwell with kerning, and the portion of the letters. With 3D as the topic I can’not say anything about web design typography. Because for me, 3D is something real and has volume. Although I acknowledge there’s something called 3D in the computer, I still think it’s 2D because it’s flat.

26 27

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 27 26

2. articles

articles

For once in a lifetime, I tried to read any design related articles.

I was striked by this information architech’s statement and I started to follow him on twitter.

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 1. inspiration / 3D

28 29

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 29 28

2. articles

Yes, it says that 95% of web design IS typography The article came from www.informationarchitects.jp. A website that owned by Information Architechs and they are very international. They concern the most about user experience design and highly related to information design / information architecture.

Information Architech is not just a web designer, but also a typographer and experience designer. They are limited edition

Interesting fact I got from his article:

• Information design is not about the use of good typefaces, it is about the use of good typography.

• Even though we can choose among millions of colors, it’s not art, what we do, its product design.

• “Text as user interface” (is a concept and notion coined by Cameron Moll.)

• In order to find a nice grid, into which I could fill the usual modular navigational and content elements, I should start with the text mass and organize it with a grid that guarantees optimal readability.

• Content is the center of attention, content deserves the most love from the designer • Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal user experience.

• Our medium is very tricky.

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 2. articles

30 31

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 31 30

2. articles

5 Simple Step to Better Typography

“

“

It’s our respons­ib­il­ity, as design­ers, to embrace the rules which are born of a craft which goes back hun­ dreds of years.

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography This article (and tips) by Mark Boulton is really helping. It reminds us on how important it is to remember the forgotten rules that typographer had hundreds years ago. He discuss about 5 simple steps to better typography: 1.Meas­ure the measure

2.Hanging punc­tu­ation

3.Lig­at­ures

4.Typo­graphic Hier­archy — size

5.Typo­graphic Hier­archy — weight Readability and Legibility, that’s what this tip is all about I think. But what is Readability and Legibility? What’s the difference?

“

Legibility is a function of typeface design. It’s an informal measure of how easy it is to distinguish one letter from another in a particular typeface. Readability, on the other hand, is dependent upon how the typeface is used. Readability is about typography. It is a gauge of how easily words, phrases and blocks of copy can be read. http://www.fonts.com/AboutFonts/Articles/Typography/Legibility.htm by Allan Haley

“

So I assume is that Legibility is micro, and Readability is macro.

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 2. articles

32 33

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 33 32

2. articles

The title says eveything http://www.webscienceman.com/2009/01/13/50-typography-resources-you-must-look-at/ Article by Khaled

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 3. assignment 1 / index

NAi (web design / Digital sketches) Basic Information NAi is an Architecture Museum based in Rotterdam, The Netherlands. The museum and library has a really modern building as we all can see from the official website.

Their official website mostly using San serif font such as Verdana and Arial. The composition of the fonts they are using can be seen on the difference weight of the title and the body text and it still gives enough white space.The NAi publisher on the otherhand has a different look. They have bigger letter space and it’s more chaotic than the official website.

What I’m going to do I will combine the modern look and classic old style look just to give a fresh and different look from they original house style. Serif will be used more often for serif fonts is better in legibility.

Hell yeah serif-san.

Serif-くん ROCKS! さよなら!

3

assignment 1 / NAi

This refers to Japanese way of saying names. -san means Mister. I just flip san from san serif to the back.

34 35

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 35 34

3. assignment 1 / index

Official website

Publisher website

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 3. assignment 1 / inspiration

Inspire me, please.

Inspiration could comes from everywhere around us, and even toilet is no exception.

36 37

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 37 36

3. assignment 1 / inspiration

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 3. assignment 1 / brainstorm

Brain Storming

I wish I was in NAi when the storm came.

Dutch different

modern

NAi

unique

museum

classy

architecture

country’ assets

38 39

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 39 38

3. assignment 1 / sketch

{ SKETCH }

Sketchy sketch is sketchy

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 3. assignment 1 / digital sketch

40 41

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 41 40

3. assignment 1 / digital sketch

The whole idea of it was to stress modernity as Dutch architecture is modern but still ellegant in its own way. The home page is illustrating a dancing movement like music. And further page, I was trying to illustrate a perpective, but I think it’s just doesnt work on website. So I just put different weight on some parts that needs attention.

final product home page & architecture page

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 4. assignment 2 / index

Dunya’s cake store (website with CSS3) Basic Information Dunya is a cake store that also share infos. The original website has a lot of content. And pretty plain without pictures.

What I’m going to do I’m going to give it a POP feeling into it. Bright colours and feeling. But since the audience is also grown ups, I wil minimal the amount of colour so it won’t look to childish. Vintage style will also take parts in it

CAKE!

assignment 2 / Dunya’s

4

42 43

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 43 42

4. assignment 2 / sketch

The whole idea of it is to make a pop-up shout boxs telling that they are aiming cake from Dunya’s.

The whole style should be minimalist.The font styles that would be use is san-serif monospace font and decoration style font for ‘‘Dunya’s’’

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 4. assignment 2 / digital sketch

44 45

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 45 44

4. assignment 2 / digital sketch

I didn’t realize how chaotic this design was when I made this.

Don’t blame me, I made this first and then read the typography articles. I’m innocent!

Font used were Sniglet (for “Dunya’s”) and Ubuntu-title (for menus). Myriad Pro was used for content.

Sniglet Ubundu Myriad

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 4. assignment 2 / website

46 47

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 47 46

4. assignment 2 / website

So what happen?

It seems that Sniglet is too pixelated in web. And as the replacement, I looked for some typeface that similar to Sniglet but has better look in web, and so I found Vanilla-webfont. I remove the blue and replace it with black. And as for the content, I use Calibri instead of Myriad because calibri looks better and not pixelated because the weight is perfect with font-size 13 and line-spacing 15o%.

I serve 1/4 space for content, and the rest is images and white space. Really the opposite of the real website which all filled with text.

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 5. assignment 3 / index

Freestyle YO! Basic Information The assignment was to make anything related to typography.

What I’m going to do POSTER! I made three posters (A3) that related to what I’ve learn from the article of Information architect website (that discussed about 95% of website is typography).

The first poster is not merely a photography. I stressed the fact that some people (including me) still treat text badly by putting them together with busy picture. Colours also font weight also takes part in this disturbtion.

The second poster is as it mention in the article : ‘Our medium is tricky” I really agree with that.

Being an Information Architect is harder than we think. Our medium is different to everyone.

The third poster is also inpired by the article that says “Typography is not about choosing font, but it’s ahout sharpening it for user experience”. This is pretty striking, and I don’t believe it 100%. I still think the choice of type face is important for readability and legibility.

Type is my best friend. I treat them with love ♥. assignment 3 / Freestyle

5

48 49

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 49 48

5. assignment 3 / poster 1

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 5. assignment 3 / poster 2

50 51

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 51 50

5. assignment 3 / poster 3

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1 6. conclusion

CONCLUSION! yes, I’ve learned something too

Typography for website always related to what we call information design/architect. The typography that we are talking about now is not art; it’s design! It has to be useable and has function.

Being information designer (or architect) should not only good at techinique but also designing a composition. He thinks more than just techinuqe. He also thinks about how to deliver amount of information in such a good way that please the eyes of the audience/reader.

There is not alotof freedom for information architect to express their creativity in web typography.

Some aspect have to get more attention from information architect : Usability, Readability, and Legability ; and all together determines whether good or bad is the experience of the user while visiting the website he made.

Images, colour, and how flashy is the website are not the main thing information architect concern about. Text/type composition is his concern. Good type composition makes good usability. After he comes with a good usability, he can manage how he will put other colour into it, or where he will place the image, ect.

Alot of research of screen resolution and quality, and processor is also important. Calibri in Mac screen is different from Vaio for example. And It’s totally different in my mom’s computer, because she’s still using old windows, and my calibri turns into times new roman.

I agree that composite type (or so they called sharpening type) is important but I also think that the type face choice is also important. Font style should be fit with the whole layout of the website and it also should be readable. For safety reason, I prefer to use website default type faces to minimalize an error.

and I will stop because I’ve talked too much.. this talkative parrot will fly off

52 53

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

- 53 52

//

bye!

2010 GLR / THIC3 / Web Typography / Caroline Peni / 59510 / w3a1 / v1

54 -

hello! { Analysis about Web typography and some babbling } Caroline Peni 59510 / w3a1

All images used in this report are owned by its respected owners