hello web typography

nice to meet you!I’m web-typography.

hello!

hello!hello!

hello!

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

2 - 23 - 3//

hello!

{ Analysis about Web typography and some babbling }

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

Caroline Peni59510 / w3a1

2 - 23 - 3 I. Table of contents

1. inspiration 4/weight 5/composition 9/curves 13/colour 16/medium 21/3D 25

2. articles 27

3. assignment 1 34/inpiration 36/brainstorming 38/sketch 39/digital sketch 40

4. assignment 2 42/sketch 43/digital sketch 44/website 46

5. assignment 3 48

6. conclusion 52

4 - 45 - 51. 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 to-gether. 1in

4 - 45 - 5 1. inspiration / weight

Inspiration for WEIGHT

6 - 67 - 71. 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 be-cause 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 - 67 - 7 1. inspiration / weight

8 - 89 - 91. inspiration / weight

8 - 89 - 9 1. inspiration / composition

Inspiration for COMPOSITION

10 - 1011 - 111. inspiration / composition

10 - 1011 - 11 1. inspiration / composition

12 - 1213 - 131. 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 usabil-ity / 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 eve-rytime because of the composition we made that doesn’t meet the proper size, people will be an-noyed 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 - 1213 - 13 1. inspiration / curves

Inspiration for CURVES

14 - 1415 - 151. inspiration / curves

14 - 1415 - 15 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 ap-plies 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.

16 - 1617 - 171. inspiration / colour

Inspiration for COLOUR

16 - 1617 - 17 1. inspiration / colour

18 - 1819 - 19 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 read-able 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 - 2021 - 21 1. inspiration / medium

Inspiration for MEDIUM

22 - 2223 - 231. inspiration / medium

22 - 2223 - 23

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 ac-cess as long as they have internet. Web designer can share his typography art to larger number of audience.

1. inspiration / medium

24 - 2425 - 251. inspiration / medium

24 - 2425 - 25 1. inspiration / 3D

Inspiration for 3D

26 - 2627 - 271. 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 - 2627 - 27 2. articles

For once in a lifetime, I tried to read any design related articles. I was striked by this information ar-chitech’s statement and I started to fol-low him on twitter.2ar

28 - 2829 - 291. inspiration / 3D

28 - 2829 - 29 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 Ar-chitechs and they are very international. They concern the most about user experience design and highly related to information design / information architecture.

• 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 prod-uct design.

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

• Inordertofindanicegrid,intowhichIcouldfilltheusualmodularnavigationalandcontentelements,Ishouldstartwiththetextmassandorganize it with a grid that guarantees optimal readability.

• Content is the center of attention, content deservesthemostlovefromthedesigner

• Typography in practice is not choosing fonts or making fonts,it’saboutshapingtextforop-timaluserexperience.

• Our medium is very tricky.

Interesting fact I got from his article:

Information Ar-chitech is not just a web designer, but also a typographer and experience de-signer. They are lim-ited edition

30 - 3031 - 312. articles

30 - 3031 - 31

5 Simple Step to Better Typographyhttp://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typographyThis 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 Leg-ibility? What’s the difference?

Legibility is a function of typeface design. It’s an informal measure of how easy it is to distin-guish one letter from another in a particular typeface. Readability, on the other hand, is de-pendent 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.

2. articles

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.

32 - 3233 - 332. articles

32 - 3233 - 33 2. articles

The title says eveything

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

34 - 3435 - 353. assignment 1 / index

NAi (web design / Digital sketches)

Basic InformationNAi 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 big-ger letter space and it’s more chaotic than the official website.

What I’m going to doI 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! さよなら!

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

34 - 3435 - 35 3. assignment 1 / index

Official website

Publisher website

36 - 3637 - 373. assignment 1 / inspiration

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

36 - 3637 - 37 3. assignment 1 / inspiration

38 - 3839 - 39

NAimuseum

modern

country’ assets

classyunique

architecture

different

Brain StormingI wish I was in NAi when the storm came.

3. assignment 1 / brainstorm

38 - 3839 - 39

Sketchy sketch is sketchy{ SKETCH }

3. assignment 1 / sketch

40 - 4041 - 413. assignment 1 / digital sketch

40 - 4041 - 41

final producthome page &architecture page

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.

3. assignment 1 / digital sketch

42 - 4243 - 434. assignment 2 / index

Dunya’s cake store (website with CSS3)

Basic InformationDunya 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 doI’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

42 - 4243 - 43 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’’

44 - 4445 - 454. assignment 2 / digital sketch

44 - 4445 - 45 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 typogra-phy articles. I’m innocent!

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

SnigletUbundu

Myriad

46 - 4647 - 474. assignment 2 / website

46 - 4647 - 47

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 Myr-iad 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.

4. assignment 2 / website

48 - 4849 - 49

5assignment 3 / FreestyleFreestyle YO!

Basic InformationThe assignment was to make anything related to typography.

What I’m going to doPOSTER! 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 ♥.

5. assignment 3 / index

48 - 4849 - 49 5. assignment 3 / poster 1

50 - 5051 - 515. assignment 3 / poster 2

50 - 5051 - 51 5. assignment 3 / poster 3

52 - 5253 - 53

CONCLUSION!yes, I’ve learned something too

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

Typography for website always related to what we call information design/architect. The typogra-phy 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 mini-malize an error.

6. conclusion

52 - 5253 - 53

54 - 54

hello!

{ Analysis about Web typography and some babbling }

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

Caroline Peni59510 / w3a1

hello web typography

Documents

Transcript of hello web typography

Web Typography Haig

Beautiful Web Typography (#5)

Fluid Web Typography - SXSWi 2010

Web Typography: An Overview

New Web Typography

Typography in web (modern web 2015)

Mastering web typography

Web Typography For Skeptics

Dominating the Web Typography

Art Directed Web Typography

Webfonts and Web Typography

Chapter 6 Web Typography

Chapter 7 Web Typography

Typography on the Web

Web Typography Fundamentals

Web Typography - eyelearn

Web Typography with CSS3

Web Typography & You

Web Typography

Great Web Typography