Gigadesign, XHTML-CSS website maken

Speciale lettertypes gebruiken

Tekst in speciale lettertypen weergeven, iedereen doet het, de ene al wat meer als den andere, en ook zijn de manieren zeér verschillend. Van CSS naar text-replacement met afbeeldingen naar sIFR tot Cufon.

Eén regel, één wet en maar één manier

Ik heb eens ooit de shorthand methode aangeprezen en uitgelegd, maar ik heb er nooit bij stilgestaan dat er bijvoorbeeld bij de font shorthand methode één regel is die je moet volgen.

Als je gaat CSS schrijven om te printen

Meestal is het toch zo als je een artikel o.d. van een webpagina wenst af te drukken je niet de gehele opmaak/visualisatie ( afbeeldingen, banners, versieringen ) ook wenst af te drukken maar wel de tekst.

En liefst van al wil je dat je printerinkt een beetje gespaard wordt door zwarte tekst op een witte achtergrond te printen.

Dikke ballen, maar echt dikke

Onlangs bij een opdracht van het omzetten van Photoshop PSD naar XHTML/CSS echt gefrustreerd geraakt.

Door de speciale opzet van de site zelf was het mogelijk voor mij om volgende zaken te ondervinden:

Speciale tekens op je website

Zoals je wel weet kan je bepaalde characters niet zomaar ingeven in je HTML document, naargelang de charset zou je rare dingen op je website toveren. Sommige tekens staan op je toetsenbord, maar ze gewoon zo ingeven in je document kan tot problemen leiden, denk maar eens bijvoorbeeld als je > zou ingeven, de browser zou denken dat het gaat om een afsluiting van een tag.

Wat je moet weten

En velen niet durven te vragen

Als je in CSS word-spacing, de hoeveelheid witruimte tussen woorden, gebruikt moet je weten dat deze reeds een waarde heeft, namelijk de waarde “normaal” bij standaard instellingen van een browser. Deze is er, punt uit.

De waarde “normaal” ligt zo bij de 0.25em, maar kan afwijken door gebruik van verschillende lettertype’s.

Soms goed, maar soms ook niet

Dat em een relatieve waarde is die wordt bepaald door de browser instellingen weten we wel allemaal, we kunnen deze relatieve waarde wel naar onze hand zetten, maar over het algemeen wordt deze waarde het meest gebruikt voor font-size doeleinden.

Van het moment dat je een website maakt/ontwerpt kom je ooit voor de keuze te staan welk soort lettertype te gebruiken. Het lettertype bepaalt samen met design hoe leesbaar je website is.

Waarom een keuze? Dit heeft namelijk invloed hoe goed je lezers wel degelijk je tekst aanvaardbaar en eenvoudig kunnen lezen.

Niet elke font is hetzelfde en de keuze hangt af van het doel van de website waarin je tekst verschijnt.

Line-height, de vergeten selector

De line-height property regelt de afstand tussen regels tekst in een paragraaf <p>.
Deze property wordt niet zovaak gebruikt omwille dat velen niet weten hoe je nu deze nauwkeurig moet gebruiken, want eigenlijk is de waarde die je opgeeft de minimum afstand tussen de basislijn en de aangrenzende basislijn van een regel !!

Tekst vormgeven met pixels is toch zo gemakkelijk, niet ?
Maar je kan ook vormgeven aan tekst door woorden smal, smaller, xxsmal, bold, bolder, etc…, en em.

em is de waarde die de browser opgeeft als standaard waarde voor hoogte van letters, en die is meestal hetzelfde bij de browsers zonder Internet Explorer.