Tools web-developer/ US/firefox/addon/10909?

Transkript

1 Tools web-developer/ US/firefox/addon/10909?src=api WDWK E2009 week 5 Links gwithtype/

2 Basic knowledge : Three issues when using typography Functionality Legibility Readability Aesthetics Tradition/Fashion Form / content Technology Possibilities Limitations

3 Basic knowledge : Two different kinds of typography - With and without serifs: serif A Antikva A Grotesk

4 Basic knowledge : Uppercase letter Lowercase letter Alpha bet Serif Ascender Counter x -height Serif characters Descender Sans Serif characters

5 Basic knowledge : A proportional typeface displays glyphs using varying widths, while a nonproportional or fixed-width or monospaced typeface uses fixed glyph widths. However, many proportional fonts contain fixed-width figures so that columns of numbers stay aligned.

6 Five classic typefaces

7 Renaissance antikva Garamond: Garamond is an example of a: Renaissance antikva or Oldstyle typeface Early 1600s Still primitive printing techniques A typestyle with relatively thick strokes and heavy serifs

8

9 Transitional typefaces Baskerville: Baskerville is an example of: Pre-classicistic antikva or Transitional typeface Made by John Baskerville in Smoother paper, better printing techniques. A typeface with more refinement. Increased contrast between thick stroke and thin stroke. The serifs are more sculpted.

10 Baskerville Baskerville is a transitional serif typeface designed in 1757 by John Baskerville ( ) in Birmingham, England. Baskerville is classified as a transitional typeface, positioned between the old style typefaces of William Caslon. transitional serif Baskerville elegant English legible formal fiction poetry 1700s technical roman serif valuable sensible neutral text book feminine static 1970s german 1990s modern style

11 Modern typefaces Bodoni: Bodoni is an example of: Empire, classicistic Antikva or Modern typefaces Made by Giambattista Bodoni in the late eighteenth century Further refinement of the printing techniques Bodoni created a typestyle with extreme contrast between thin and thick stroke. The Serifs are reduced to fine hairlines.

12 Bodoni Many digital versions of Bodoni suffer from a particular kind of legibility degradation known as "dazzle" caused by the alternating thick and thin strokes, particularly from the thin strokes being very thin at small point sizes. 1700s 1960s 1980s 1990s business text conservative decorative Didone elegant feminine formal Italian legible magazine narrow neutral sensible serif static valuable

13 Slab Serif typefaces- Rockwell l Designing with type Rockwell is an example of: Egyptian or Slab Serif or Square Serif typefaces Around After Bodoni it became a question of artistic expression. The Slab Serif or Egyptian show a return to very little contrast between thin an thick strokes. They are characterized by heavy serifs.

14 Slab Serif slab serif legible magazine modern news headline text humanist clean editorial elegant newsletter geometric masculine slab workhorse business text egyptian formal book text monoline oldstyle numerals fashionable book

15 Grotesque typefaces - Helvetica Helvetica is an example of: Sans Serif or Grotesque typefaces The twentieth century (1957). Typefaces without serifs. The most widely used of all sans serif typefaces.

16 Helvetica(?) You ve read the everything in the last 50 years now see the film sans-serif grotesk legible modern headline magazine modest business text signage swiss technical tech pubs linear 1980s static heavy rounded corporate linear sans narrow fashionable geometric German information

17 The difference between Helvetica and Arial

18 Type classifications

19 Type styles:

20

21 Type crimes

22

23 Cross browser Font list - Vista - IE7

24 Cross browser Font list - Vista - Firefox

25 Cross browser Font list - MacOSX - Firefox

26 Font-list-Ubuntu7-Gnome

27 When you design display typography it is important that form and function add up. The way the display typography is designed tells something about the content of the site What does the typeface tell about style, eg. modern, dynamic, classical Think contrast eg. Serif if you use sans-serif in the body text

28 Display typography Display typography is designed to catch the attention of the user. Try to make it unique so the user remembers it. Aesthetics are just as important as readability

29 Reading typography The term bodytext indicates larger amounts of text, that are meant to be read. This has to be as easy as possible for the user so readability is more important than aesthetics

30 Reading typography The typographical arrangment of a text on a web-site is crucial for whether the text seems readable and inviting or difficult and confused. You must choose * font * size * length of line * line spacing * Lay-out Avoid large sections of text only in italics or majuscules.

31 Reading typography - paragraphs When you split up a paragraph You should use A sub heading The space above a sub heading should be bigger than the space below what is close together belongs together. Sub headings should be set in 12 pt and upwards or be enhanced in some other way. The blank line indicates that you are at the beginning of a new paragraph, but that it isn t that different from the previous. If the text has many paragraphs you can use breaks, So that the text chopped into to many pieces. This is an example of a break in a text. Between the bigger paragraphs that have sub headings you can use a blank line

32

33

34

35

36

37 How do we read? When we read, once in a while we will try to fixate in the upper part of the text line. An adult reader is able to perceive around 12 signs on every site of a fixation. We don t really read letters or single words we read groups of words and search for the context!

38 How do we read? Christmas?

39 How do we read? Christmas?

40 How do we read? Have a nice day!

41

42 raeladbe or not?

43 Left right center justify:

44 T Y P O G R A P H Y How do we build the text? Beware of extension and condensing T y p o g r a p h y Typography Space between words the small i Theiassignmentishouldicontainibothithe suggestionsiforiaivisualiidentityiand. Loose left margin difficult to read! The assignment should contain both the suggestions for a visual identity and a brief report where you put the above-mentioned information about the company and most importantly your explanations and argumentation for the chosen visual identity. Fixed left margin more easy to read! The assignment should contain both the suggestions for a visual identity and a brief report where you put the above-mentioned information about the company and most importantly your explanations and argumentation for the chosen visual identity. Centred text also difficult to read The assignment should contain both the suggestions for a visual identity and a brief report where you put the above-mentioned information about the company and most importantly your explanations and argumentation for the chosen visual identity. Fixed margins causes flooding! The assignment should contain both the suggestions for a visual identity and a brief report where you put the abovementioned information about the company and most importantly your explanations and argumentation for the chosen visual identity.

45 Kern Track Lead: Kerning: When you kern type, you increase or decrease the space in between two letterforms. Figure 5-2 shows the word "Kern" straight from the computer and after space is added between the "r" and "n." Tracking: Tracking type increases or decreases the space evenly between multiple letterforms. Figure 5-3 shows the word "Track" straight from the computer and after I added space between all the letters. Leading: The amount of space between lines of type Remember the butterfly

46 Screen fonts: TrueType (TT) and PostScript Type 1 (PS1) are both multi-platform outline font standards for which the technical specifications are openly available. "Multi-platform" means that both font types are usable on multiple sorts of computer systems. "Outline font" means that they describe letter shapes ("glyphs") by means of points, which in turn define lines and curves.

47 Screen fonts: This representation is resolution independent, meaning that outlines, by their very nature, can be scaled to pretty much any arbitrary size. Depending on the particular program being used and the operating system it's run under, there may be upper and lower limits to the size the font can be scaled to, but few users will ever encounter these limits. An outline font must be represented by the dots of the output device, whether it's screen pixels or the dots of a laser, ink-jet or wire-pin printer. The process of converting the outline to a pattern of dots on the grid of the device is called "rasterization."

48 Screen fonts:

49 Screen fonts: When there aren't enough dots making up the glyph (such as at small sizes or low resolutions), there can be inconsistencies in the representation of certain letter features, at a single size, due to different rounding based on how the outline happens to sit on the grid. A common form of this is that the widths of the letter stems can vary when they shouldn't. Worse, key features of the glyphs can disappear at small sizes.

50 A hint s as good as a nod: However, PostScript Type 1 and TrueType fonts both have a means of dealing with these inconsistencies, called "hinting." This consists of additional information encoded in the font to help prevent these problems

51 Colour & design d.com.au/graphic-designprinciples/

52 INTRO TIL CSS

53 SÅDAN SER CSS UD

54 KONTROL FRA EN ENKEL FIL

55 FJERNER UNØDVENDIG KODE

56

57 FORDELE VED CSS - Kontroller præsentationen: - Måden hvorpå dokumentet bliver vist - Mange flere muligheder end med de (forældede) præsentations-elementer, som HTML kan tilbyde. - Adskil præsentation fra indhold: - Muliggør at ændre præsentation henover et helt website fra en enkel fil. - Muliggør at angive forskellig styling alt efter medie. - Forbedrer tilgængeligheden. Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

58 CSS v Version 1 (1996): - Font, color, background, margin, padding, border, float - Manglende browsersupport. - Version 2 (1998): - Positioning (absolute, relative, fixed, z-index), mediatype (print, handheld), selections. - Version Version 3 (?): - Vertikal tekst, font resources, kolonner, animationer. Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

59 SYNTAKSEN

60 SYNTAKSEN Deklarationer fordelt på flere linjer (nemmest at læse): p { font-size: 12px; font-family: Verdana, sans-serif; } Deklarationer samlet på en linje p {font-size: 12px; font-family: Verdana, sans-serif;} Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

61 TILFØJ CSS TIL HTML - 3 måder: - Inline: Styling tilføjes inden for element tagget som en attribut (bør undgås). - Embedded: Styling tilføjes inden for HTML dokumentets head tag. - Eksternt style sheet: Separat dokument indeholdende al styling (mest udbredt). Webdesign & webkommunikation #3, IT Universitetet E2009, Sigurd Trolle Gronemann

62 INLINE Stylingen tilføres hun det anførte element <h1 style= color: red >This is a red header</h1> <h2 style= color: red; font-family: Courier New,serif >This is a red header with another font</h2> Undgå brug af inline styling. Webdesign & webkommunikation #3, IT Universitetet E2009, Sigurd Trolle Gronemann

63 EMBEDDED <style> </style> Stylingen tilføjes inden for (X)HTML dokumentets head tag og virker dermed kun i det dokument. <head> <style type= text/css > h1 {color: red;} p {color: blue; font-size: 12px;} </style> <title>stylesheets embedded in HTML</title> </head> Webdesign & webkommunikation #3, IT Universitetet E2009, Sigurd Trolle Gronemann

64 EKSTERNT <style> </style> Stylingen tilføjes inden for (X)HTML dokumentets head tag og virker dermed kun i det dokument. <head> <link rel= stylesheet href= styles/mystyles.css media= screen type= text/css /> </head> <head> <style> url(styles/mystyles.css); --> </style> </head> Webdesign & webkommunikation #3, IT Universitetet E2009, Sigurd Trolle Gronemann

65 SET MEDIATYPE <link rel= stylesheet href= styles/mystyles.css media= screen type= text/css /> - Screen: Til visning på computerskærme. - Print: Til udskrivning. - Handheld: Til mobiltelefoner, PDA er - All Webdesign & webkommunikation #3, IT Universitetet E2009, Sigurd Trolle Gronemann

66 SELECTORS

67 SELECTORS - Kroge til ens (X)HTML elementer. - Forskellige typer: - Element selectors - Contextual selectors - Class and id selectors - Pseudoselectors Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

68 ELEMENT TYPE SELECTORS - Den mest basale selector-type, enkeltstående eller grupperet. h1 { } color: blue; h1, h2, p { } color: blue; Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

69 INHERITANCE

70 PARENTS + CHILDREN

71 INHERITANCE

72 HIERARKIET/KASKADEN - Browserens (default) indstillinger - Brugerens indstillinger ( reader style sheet ) - Eksternt stylesheet #2: link) - Embedded styles - Inline styles -!important (#1: bruger, #2: udvikler) - Specificitet (Selector order) - Regel rækkefølge (Rule order) Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

73 SPECIFICITET - De mest specifikke selectors vinder. - Rækkefølge fra med mest specifikke til mindst: 1. ID selectors (#) 2. Class selectors (.) 3. Contextual selectors (space, >, +) 4. Individuelle element selectors (p, h1, em ) - Regel rækkefølge: - Sidste regel vinder. Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

74 CONTEXTUAL SELECTORS

75 CONTEXTUAL SELECTORS - Descendant selector li em { color: blue; } li a em { color: blue; } - Child selector (IE7+) p > em { color: blue; } - Adjacent sibling selector (IE7+) h1 + p { color: blue; } Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

76 ID + CLASS SELECTORS - Krogene som knyttes til element-indikatorerne i (X)HTML dokumentet. - ID: #idnavn #idnavn { color: blue; } - Class:.classnavn.classnavn { color: blue; } Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

77 (X)HTML REPETITION: ELEMENT INDIKATORER - Meningsskabende elementer er fundamentet men er dog slet ikke udtømmende for ens behov. - HTML blev skabt som et mark-up sprog og ikke som et interface sprog - hvor er eksempelvis menu elementet? - ID og Class er skabt til at give dokumentet struktur samt som kroge for ens CSS kode. - Hermed kan man skabe sine egne elementer, hvis der ikke er et passende i det forudbestemte udvalg af elementer. Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

78 ID - Bruges til at give et unikt navn til et specifikt element. - Må kun bruges én gang i hvert (X)HTML dokument. - Er anvendelige til at identificere gennemgående strukturelementer, som eksempelvis menu og indholdsklynger. - Det er muligt at rette ens CSS mod det element, som er navngivet med id, deraf krog metaforen. - Mere om dette når vi skal arbejde med CSS næste gang. - Tænk CSS, men tænk også struktur - element indikatorerne er til for begge dele. Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

79 CLASS - Kan modsat id tildeles så mange elementer som nødvendigt i ens dokument. - Er dermed anvendelig når ens indhold skal grupperes henover et dokument. - Et element kan tildeles både et class og et id, id er mere dominerende end class. - En enkel CSS stil kan dermed tildeles alle de elementer, som man ønsker. Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

80 CLASSITIS - LAD DIG IKKE RIVE MED - Enormt fleksibelt og meget kraftfuldt redskab. - Jo flere classes, jo mere finkornet kontrol? - Hvorfor overhovedet bruge id, når man kan bruge class? - Dårlig vane (den nemme løsning). - Tilføjer unødvendig kode til ens dokument og er på mange måder ligeså skidt som at bruge tabeller til ens layout (Budd et al., 2006). - Den finkornede kontrol kan skabes gennem CSS (cascade, specifity, inheritance). - Derfor ligger udfordringen i at skabe et fleksibelt dokument uden at overforbruge div-elementet og class-identifikatoren Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann

81 NAVNGIVNING

82 PSEUDOCLASS SELECTORS a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: none;} - Rækkefølgen skal være: - :link, :visited, :hover, :active (LoVe, HA!) - Flere pseudoclasses (IE7+) - :focus - :first-child Webdesign & webkommunikation #4, IT Universitetet E2009, Sigurd Trolle Gronemann