HTML typesetting en typografie: een korte naslaggids

Geopinioneerd boek over typografie: https://practicaltypography.com/

Omdat dit een korte gids is, moet je de exacte mogelijke invulwaarden opzoeken op b.v. MDN Web Docs. Niet alles wordt ondersteund door alle browsers, met name betreft hyphens.

Leesbare tekst

Doe dit alsjeblieft, ook voor mensen die geen bril nodig hebben!

text-rendering: optimizeLegibility;
line-height: 1.4;
font-size: 0.5cm;
tab-size: 4; /* voor <pre> code blocks */

Leuke trucjes

Maak een tekst w i j d:

letter-spacing: ; /* ruimte tussen letters */
font-stretch: ; /* opgerekte letters */

Maak een tekst schuin:

In HTML met <em> of <i>, in CSS met font-style: italic;

Maak een tekst dik:

In HTML met <b>, in CSS met font-weight: x; met x een getal rond de 800.

Font variants

Veel fonts, vooral de high-end betaalde fonts, hebben meerdere uitvoeringen/opties. Sommige hebben kleine hoofdletters, ligaturen, of verschillende stijlen voor cijfers, of zelfs niet-standaard, zelf gedefiniëerde opties.

font-feature-settings: ;
font-variant: ;
font-variant-ligatures: ;
font-variant-numeric: :
font-variant-alternates: ;

Sommige fonts hebben aparte uitvoeringen voor subtext en supertext:

font-variant-position: ;

En sommmige fonts hebben aparte uitvoeringen voor oost-aziatische tekens:

font-variant-east-asian: ;

Uitgevulde tekst

Dat wil zeggen, het lichaam van de tekst wordt opgerekt om beide kantjes aan te raken, net als bij een krant.

text-align: justify;

/* rek de tekst op door spaties wijder te maken */
text-justify: inter-word;

/* rek de tekst op door ruimte tussen de letters te creeren */
text-justify: inter-character;

Word breaks

Automatisch lange woorden afbreken met een "-" (N.B.: je moet in <html> een lang="xx" attribute hebben om dit te laten werken, met xx = "nl" of "en" oid):

hyphens: auto;

Maximaal 2 achtereenvolgende regels die op een "-" eindigen:

hyphenate-limit-lines: 2;

Om afgebroken te worden, moeten woorden: minstens 12 letters lang zijn, de afbraak mag alleen na de 6e letter, en voor de 4-na-laatste letter, plaatsvinden:

hyphenate-limit-chars: 12 6 4;

breek woorden op die langer zijn dan de complete breedte van 1 regel.

/* breek woord af op het punt waar het de body overflowt*/
word-break: break-all;

/* probeer eerst het woord op de volgende regel te zetten */
overflow-wrap: break-word;

Handmatige, potentiele breekpunten voor woorden op die aan het einde van de regel staan en net iets te lang zijn waardoor ze op de volgende regel komen. Deze stop je in de html, in het midden van je lange woord.

Voor een mogelijk breekpunt met een "-":

lang&shy;woord -> lang-
                  woord

Voor een mogelijk breekpunt zonder "-":

lang<wbr>woord -> lang 
                  woord

2021-10-07 in blog #HTML5 #CSS #kort #typografie