Steps letterproof-typography InDesign-Web

LETTERPROOFLEERJAAR 1 VORMGEVING

MAAK EEN LETTERPROEF IN INDESIGN EN KIES HET JUISTE LETTERTYPE

de juiste fonts kiezen

auteur: Raoul Postel

BRIEFING EN OPDRACHT

▸ Schrijf kort op wat de opdracht inhoudt.

▸ Maak een lijst van de producteisen en specificaties, zoals: formaat, kleur of zwartwit, medium, letters voor web of voor druk/print.

▸ Omschrijf het doel/thema van de opdracht.

▸ Omschrijf de doelgroep.

▸ Krijg antwoord op vragen die je nog hebt bij de opdrachtgever.

▸ Stel de deadline vast.

V

LETTERPROOF TYPOGRAPHY INDESIGN

http://www.designtrainingen.nl


IDEE & SCHETSEN

▸ Google ‘letterproef’ ter inspiratie en leer wat er mee wordt bedoeld.

▸ Maak een lijstje van onderdelen die er zeker in moeten komen, zoals: ruimte voor minmaal 6 font-variaties, kop, subkop, leestekst, citaat, onderschrift.

▸ Kies minimaal 6 verschillende lettertypes. 3 schreef- en 3 schreefloze letters voor print.

▸ Het zelfde ook voor web via Adobe Typekit of Google Webfonts.

V




FONTS VOOR DE BEGINNENDE VORMGEVER

▸ Helvetica (schreefloos, zakelijk)

▸ Futura (schreefloos, zakelijk)

▸ Garamond (schreef, klassiek)

▸ Caslon Pro (schreef, klassiek)

▸ Gill Sans (schreefloos, vriendelijk)

▸ Univers (schreefloos, zakelijk)

▸ Avenir (schreefloos, zakelijk, modern)

Bij al deze fonts is er een ruime keuze in variatie:

▸ roman, regular (normaal)

▸ light (dun)

▸ bold (vet)

▸ cursief, italic (schuin)

▸ condensed (smal, hoog)

▸ extentended (breed, laag)




BEGRIPPENLIJST

▸ font = lettertype

▸ interlinie = regelafstand

▸onderkast = kleine letter

▸kapitaal = heefdletter

▸cursief = schuingedrukt

▸vet = dikgedrukt

▸condensed = smal en hoge letter

▸extended = breed en lage letter

▸corpsgrootte = lettergrootte

▸ spatiering = ruimte tussen woorden

▸kerning= ruimte tussen enkele letters

▸kopwit, snijwit, staartwit, rugwit = witruimte of marges van een pagina




OPZET ADOBE INDESIGN

▸ Maak een nieuw document aan en stel een A3 formaat in, geen afloop.

▸ Zet de marges op 15 mm kop- snij-rugwit en 20 mm staartwit.

▸ Kies voor 6 kolommen met een tussenruimte van 6 mm.

▸ Plaats een horizontale hulplijn (liniaal) in het midden. (= stramien).

▸ Vul de eerste kolom met plaats-aanduidingstekst (placeholder text).

▸ Tekst op basislijnraster (baselinegrid).

V




TYPOGRAFIE PRINT

▸ Kop 3-5 woorden: corps 18/22pt.

▸ SubKop 5-8 woorden: corps 12/15pt. Vet gezet.

▸ Citaat 10-15 woorden: corps 21/25pt.

▸ Onderschrift 5-8 woorden: corps 7/8pt.Cursief gezet.

▸ Leestekst tekstblok: corps 9/11pt.Leestekst tekstblok diapositief: corps 9/11pt wit.

▸ Maak een zwartwit print en controleer of de tekst goed leesbaar is.

V




CORRECTIES EN PRINT PDF

▸ Maak vanuit InDesign een PDF voor Print, ZONDER afloop en snijtekens.

▸ Bespreek dit met de opdrachtgever.

▸ Voer de correcties door.

▸ Maak vanuit InDesign een PDF voor Print, ZONDER afloop en snijtekens..

V




OPZET HTML WEGPAGINA

▸ Maak een nieuw document aan in een code-editor, zoals Textwrangler, Brackets, of SublimeText.

▸ Start met de HTML-opbouw: doctype, html, head, title, body

▸ Bewaar als: index.html in de root-map

▸ Plaats de tekst tussen de body-tags

▸ Breng teksthierarchie aan met:h1, h2, p, p.diap, a, em, span

▸ Koppel een CSS-document in de Head-section en plaats daarin de stijlen voor bovenstaande tag’s

V




TYPOGRAFIE WEB

▸ Webtypografie test je het beste via een wegpagina en CSS. Voeg fonts toe met:

▸ Google Webfonts

▸ Via Adobe Typekit

▸ Kopieer de link (include) die bij het webfont te vinden is en plak deze in de Head-section van een html-webpagina.

▸ Stijl de typografie met CSS

V




TYPOGRAFIE WEB

▸ Kop 3-5 woorden: h1 { font-size: 26px; }

▸ SubKop 5-8 woorden: h2 { font-size: 18px; }

▸ Citaat 10-15 woorden: span {font-size: 42px; line-height: 84px; letter-spacing: 2px; color:#CCC; }

▸ Onderschrift 5-8 woorden: em { font-size: 10px; font-style: italic; }

▸ Leestekst tekstblok: p { font-size: 14px; color: #333; line-height:19px; }Leestekst tekstblok diapositief: p.diap { font-size: 14px; color #FFF; line-height:21px; background-color: #333; }

▸ Link tekst: a { color: #000; font-weight: bold; } Link rollover: a:hover { text-decoration: underline-none; color: #999; }

V




CORRECTIES EN WEB PDF

▸ Bekijk de wegpagina in de browser en corrigeer de tekst naar optimale leesbaarheid.

▸ Bespreek de letterproof voor print en web met de opdrachtgever

▸ Voer de correcties door

▸ Lever de PDF en webpagina op aan de opdrachtgever

V



Steps letterproof-typography InDesign-Web

Education

Transcript of Steps letterproof-typography InDesign-Web