Tekst opmaak is minstens zo belangrijk als het gebruik van beeldmateriaal. Het maakt de boodschap van jouw webpagina toegankelijk, prettig leesbaar en bevordert de gebruiksvriendelijkheid van een website. Wij, als mediavormgevers willen onze boodschap meestal visueel ondersteunen. Typografie is daarbij een heel belangrijk middel.
Typografie komt overal voor. Als mediavormgever moet je typografie kunnen toepassen bij zowel print, in video of in een website of app. Het doel is hetzelfde. De middelen zijn anders. Bij deze opdracht leer je de style declaraties die je kunt gebruiken om tekst voor web op te maken.
Google Fonts & Adobe fonts
Typografie op een website begint meestal met het uitkiezen van een mooi bijpassend lettertype. Met Google Fonts en Adobe Fonts is dit heel eenvoudig.
10 tips voor web typografie
Lees in ieder geval deze 10 tips met do’s en don’ts over typografie in webdesign: 10 tips on typography in webdesign
Wil je echt de diepte in? Wil jij het nieuwste van het nieuwste toepassen in jouw pagina’s? Lees dan eens dit artikel over variable fonts: https://variablefonts.io/about-variable-fonts/
Opdracht 1: Songtekst/gedicht
Maak een HTML-pagina (index.html) en een CSS pagina met de CSS-declaraties die worden behandeld in bethuelheldt.nl/css-typo.
Begin met een lege CSS pagina.
Tip: Download hier de HTML pagina om mee te starten
Gebruik de tekst van een song-tekst van een artiest of een gedicht in deze pagina. Natuurlijk bevat je pagina een <head> en een <body>. Voeg aan je pagina een externe CSS toe (zoals bij je portfolio pagina).
Maak in die pagina:
- kopjes (
<h1></h1>), - subkopjes (
<h2></h2>) - broodteksten (voor elke alinea een
<p></p>), - Een streamer (kijk hier wat een streamer is)
<p class="streamer">Tekst van jouw streamer</p> - en gebruik ook minimaal 1 keer
<span></span>voor het selecteren van een individueel woordje of paar woorden<p>Een tekst met een opvallend <span>woord</span> in de zin.</p> - Maak gebruik van 2 fonts van Google Fonts of een andere font-bibliotheek. 1 font voor je titel(s) en 1 voor je broodtekst.
- Verwerk ook een plaatje in je tekst. Je kunt dit plaatje links of rechts plaatsen met de style-declaratie float.
<img src="images/mijn-plaatje.jpg" style="float: right; width: 300px; height: auto;"> - Gebruik de CSS-declaraties uit de typografie tools pagina
- De CSS declaraties moeten werken en zichtbaar zijn. Dus als je met
line-heightje regelafstand aanpast moet dat wel zichtbaar zijn. - Zet je songtekst/gedicht ook in een kolom zodat je songtekst/gedicht niet over de volle breedte van je pagina loopt.
Die kolom kun je maken- Zet dan in je HTML je songtekst binnen een div
<div class="kolom">… songtekst …</div> - Zet in je CSS bijvoorbeeld deze code:
.kolom{
margin: 0 auto; /*hiermee zet je je kolom in het midden*/
width: 500px; /*kolom is nu 500px*/}
- Zet dan in je HTML je songtekst binnen een div
- Voldoende: jouw pagina bevat in ieder geval de 12 rode CSS-declaraties. En je past minimaal 2 tags of classes aan met de
font-familyaan met Google Fonts of een andere font-library.
Jouw pagina staat online in het mapje typo-css. Noem je paginaindex.html - Goed: jouw tekst heeft een duidelijke en heldere indeling. Je ziet kopjes, subkopjes en broodteksten
- Excellent: je hebt jouw pagina ook nog mooi en typografisch verantwoord opgemaakt. Jouw pagina is geen kakofonie of rommeltje. Je voegt bijvoorbeeld een bijpassend en niet storend achtergrondplaatje toe of je doet iets met randen of kleur (vorige module)
Instructievideo’s
Opdracht 2: opdracht pagina’s portfolio
Maak de opdracht pagina’s in jouw portfolio op. Maak gebruik van de CSS-declaraties die je in bovenstaande link hebt leren kennen. Je hoeft ze niet percé allemaal te gebruiken.
- Basis (6): jouw pagina’s zijn goed leesbaar, de tekst is niet over de volle breedte van het scherm. Je tekstregels bestaan uit ongeveer 60 characters (inclusief spaties). Je hebt een lettertype gekozen uit fonts.google.com.
Je hebt tenminste de volgende style declaraties gebruikt:- line-height,
- font-weight,
- font-size,
- font-family
- Gevorderd (8): Je gebruikt nog meer style declaraties om jouw opdracht pagina goed op te maken.
- Excellent (10): De layout van jouw pagina is echt goed gelukt. Je deelt je pagina in in kolommen met afbeeldingen en tekst. Al jouw afbeeldingen en pdf’s zijn vergrootbaar (linkje naar grote versie).
Let op: Deze opdracht lever je niet in met een inleverformulier. Jouw portfolio staat al online en die link is al bekend bij de docent. Check hier of jouw link nog klopt.