Noter om typografi. Noter taget i sommer 2019 p\u00e5 Multimediedesigner, MMD. Undervisning afholdt af Andrea Cirone N\u00f8rregaard.<\/p>\n\n\n\n
Som forberedelse l\u00e6ste vi Typography sektionen\/kapitlet fra https:\/\/designingfortheweb.co.uk<\/a>.<\/p>\n\n\n\n Det f\u00f8rste typograhy lignede materiale var huletegnigner i stenalderen.<\/p>\n\n\n\n Det n\u00e6ste store fremskridt var hieroglyffer. Det var sv\u00e6rt at forst\u00e5, for betydningen af bestemte tegn og sammens\u00e6tninger kunne \u00e6ndre sig baseret p\u00e5 geografiske omr\u00e5der.<\/p>\n\n\n\n Symboler er universelt forst\u00e5eligt i koncept.<\/p>\n\n\n\n De tidlige alfabeter bestod af flere tegn der kunne sammens\u00e6ttes. Et tidligt alfabetet opstod fra dette i gr\u00e6kenland. Alfabetet opstod herfra i Rom. Vi anvender en variation deraf i Danmark.<\/p>\n\n\n\n Manuskripter blev skrevet af munker, oftest i religi\u00f8se sammenh\u00e6nge. De var skrevet i h\u00e5nden og betragtet som skatte. Manuskripter var tidskr\u00e6vende at producere (14-20 dage at skrive en side).<\/p>\n\n\n\n De tidlige printere tog kun f\u00e5 dage at ops\u00e6tte, og kun timer at printe og f\u00e5 dage at sammens\u00e6tte, hvilket \u00e5bnede muligheden for print der ikke var religi\u00f8s, da print-processen blev meget hurtigere.<\/p>\n\n\n\n Printerne bestod af blokke der blev dyppet i bl\u00e6k og derefter presset p\u00e5 papiret. Efterf\u00f8lgende blev det bundet sammen.<\/p>\n\n\n\n Typografi er en afg\u00f8rende del af at sende et budskab.<\/p>\n\n\n\n Hvorfor man b\u00f8r leje med fonte:<\/p>\n\n\n\n Tekst skal v\u00e6re forst\u00e5eligt. Det kan give v\u00e6rdi hvis man laver noget interessant med det.<\/p>\n\n\n\n Tegnene er s\u00e5 kendte hos os, at vi ikke beh\u00f8ver at se det hele for at genkende det.<\/p>\n\n\n\n Ved at blande fonter kan man skabe kontrast. <\/p>\n\n\n\n Fonter kan kommunikere tone of voice (stemning). Det kan p\u00e5virke perception\/associationer. Man kan lide og hade individuelle typefaces (skrifttyper).<\/p>\n\n\n\n Skriftst\u00f8rrelser er vigtige, og b\u00f8r ikke v\u00e6re for store eller for sm\u00e5.<\/p>\n\n\n\n Fordele ved centrering – Ligesom med h\u00f8jre og venstre sidestilling, en designer kan styre afstanden mellem bogstaver.<\/p>\n\n\n\n Ulemper ved centrering – Det kan v\u00e6re sv\u00e6rt at finde start og slut i en s\u00e6tning, n\u00e5r man ikke kan finde starten af linjer til venstre, pga. manglende alignment.<\/p>\n\n\n\n Fordele ved justify – Det kan give indtrykket af at v\u00e6re uniform og klart. Det giver et kasse design.<\/p>\n\n\n\n Ulemper ved justify – Det er sv\u00e6rt at styre afstanden mellem ord.<\/p>\n\n\n\n Der var nogle elementer fra forberedelsesmaterialet jeg mener kunne v\u00e6re s\u00e6rdeles brugbart, der ikke blev d\u00e6kket i undervisningen. Jeg har derfor valgt at opdatere indl\u00e6gget med denne information. Der er flere brugbare ting, men jeg v\u00e6lger at fokusere p\u00e5 hvad jeg personligt mener er vigtigt.<\/p>\n\n\n\n Fonte har et klassisk hierarki, der er blevet brugt over 400 \u00e5r. De blev listet som f\u00f8lgende:<\/p>\n\n\n\n 6pt: nonpareil<\/p> 7pt: minion<\/p> 8pt: brevier or small text<\/p> 9pt: bourgeois or galliard<\/p> 10pt: long primer or garamond<\/p> 11pt: small pica or philosophy<\/p> 12pt: pica<\/p> 14pt: english or augustin<\/p> 18pt: great primer<\/p> 21pt: double small pica or double pica<\/p> 24pt: double pica or two\u2013line pica<\/p> 36pt: double great primer or 2\u2013line great primer<\/p><\/a>https:\/\/designingfortheweb.co.uk\/part3\/chapter13\/<\/a><\/cite><\/blockquote>\n\n\n\n De bruges ikke s\u00e5 meget i nyere design. Designere v\u00e6lger oftest st\u00f8rrelser som de lyster.<\/p>\n\n\n\n Til hjemmesider definerer man oftest skriftst\u00f8rrelser i CSS. Man kan definere st\u00f8rrelser p\u00e5 mange parametre. I browsere er alting rendered med pixels, hvilket giver det mest n\u00f8jagtige m\u00e5l. Forskellige browsere og styresystemer differentierer dog stadig mellem visningen og st\u00f8rrelser p\u00e5 tegnene.<\/p>\n\n\n\n 11px \/ 16.5px \u2013 Body copy and leading. Ofte ikke s\u00e5 h\u00f8jt prioriteret, s\u00e5 er print til websider noget man kan, og ofte b\u00f8r designe. Siderne har en rimelig defineret brede, og b\u00f8r kunne indeholde de samme elementer. Skriftst\u00f8rrelser b\u00f8r ogs\u00e5 defineres i pt frem for px. Br\u00f8dtekst b\u00f8r ikke v\u00e6re st\u00f8rre end 12pt.<\/p>\n\n\n\n Vi spillede eller fik foresl\u00e5et at spille:<\/p>\n\n\n\nHistorie<\/h2>\n\n\n\n
Symbolik<\/h3>\n\n\n\n
Manuskripter<\/h3>\n\n\n\n
Tidligt print<\/h3>\n\n\n\n
Typografi<\/h2>\n\n\n\n
Vigtige udtryk<\/h3>\n\n\n\n
Legibility<\/h3>\n\n\n\n
Centrering<\/h4>\n\n\n\n
Justify<\/h4>\n\n\n\n
Forberedelsesmateriale noter<\/h2>\n\n\n\n
Vigtige udtryk<\/h3>\n\n\n\n
Hierarkisk design<\/h3>\n\n\n\n
Skriftst\u00f8rrelser p\u00e5 internettet<\/h3>\n\n\n\n
24px \u2013 Main heading used as section headings on the home page, portfolio home page and entries.
18px \u2013 Headings for journal entries and portfolio subheadings.
16px \u2013 All navigational and content tertiary headings.
13px \u2013 All other headed elements.
This would give me the following styles visually:
These translate in the following way in CSS, using percentages for scaling purposes, basing the scaling from an 11px base size.
11px \/ 1.5em \u2013 Body copy and leading.
218% \u2013 Main heading used as section headings on the home page, portfolio home page and entries.
164% \u2013 Headings for journal entries and portfolio subheadings.
145% \u2013 All navigational and content tertiary headings.
118% \u2013 All other headed elements.
So, within my CSS file, it looks like this:body { font: 11px\/1.5em \"Georgia\"; } h1, h2, h3, h4, h5, h6 { font-family: georgia, times, sans-serif; font-weight: normal; } h1 { font-size: 218%; } h2 { font-size: 164%; } h3 { font-size: 145%; } h4 { font-size: 118%; }<\/code> <\/p>Et udsnit fra https:\/\/designingfortheweb.co.uk\/part3\/chapter13\/<\/a> . Dette udsnit definerer en m\u00e5de at lave et harmonisk design, baseret p\u00e5 Gergia-fonten i skriftst\u00f8rrelse 11px som reference. Det sker ved at definere st\u00f8rrelserne med udgangspunkt i det hierarkiske skriftsystem beskrevet tidligere.<\/cite><\/blockquote>\n\n\n\nWeb print-design<\/h3>\n\n\n\n
Materiale<\/h2>\n\n\n\n