Als je verschillende lettergroottes en kopjes door elkaar heen gebruikt, heeft dit ook invloed op de hoogte van de tekstregel. Als je blokken met tekst naast elkaar hebt staan, kan dit ervoor zorgen dat de regelhoogte van de blokken verschilt. Dit oogt onverzorgd.
Met een klein beetje rekenwerk (of een goed voorbeeld op het internet: ik heb dit artikel gebruikt voor lettergroottes en deze site voor de balans tussen de blokken.) kun je veel voor elkaar krijgen.
De meeste browsers hebben een standaard lettergrootte van 16px ingesteld. Die absolute waarde in px (pixels) lijkt best handig, maar kan toch tot problemen leiden, wanneer je letters wil schalen (bijvoorbeeld voor gebruik op je mobieltje).
De eenheid em stelt de lettergrootte in op basis van de lettergrootte van de parent. Heb je een div met lettergrootte 10px met daarin een paragraaf met lettergrootte 1.2em, dan wordt de letter 12px groot. Dit kan leiden tot gepuzzel, omdat je niet zelden een element in een element in een element hebt.
Met de eenheid rem ga je nog een stapje verder. Hierbij maakt het niet uit wat de lettergrootte van de parent is. De grootte wordt vergeleken met de lettergrootte van het html-element als basis.
Lees verder in het middelste blok.
(Dit is het vervolg van het linkerblok.)
In het artikel wordt uitgelegd dat het handig is om de font-size van het html-element op 62.5% (alweer een eenheid!) te zetten. Uitgaande van de standaard-instelling van de browser levert dit namelijk 62.5%∘16px = 10px op. Relatief rekenen met 10px is daarna juist makkelijk. Zo is de font-size van het h1-element nu 2rem ofwel 2∘10px = 20px.
Helaas zijn we er daarmee nog niet helemaal, omdat de regelhoogte ook afhangt van de lettergrootte. Kopjes zoals de h2 hierboven zorgen dan voor een verticale verschuiving. De eigenschappen padding (standaard op 0) en padding (denk aan het boxmodel) en line-height zijn hier van belang. Om overzicht te houden zou je deze waarde voor alle elementen eerst even zelf op 0 kunnen zetten (zoals hier in het CSS-bestand is gedaan), omdat de standaardwaarden niet altijd 0 zijn.
Als alle standaardwaarden op 0 staan, kun je per element de regelgrootte en of marge instellen. Zorg er daarbij voor dat elk element uiteindelijk in totaal een dezelfde regelhoogte krijgt of b.v. precies 2x die regelhoogte. Op die manier kun je verschillende elementen afwisselen, zonder dat de balans tussen de verschillende blokken verloren gaat. Wij hebben hier voor gekozen voor 14px of een veelvoud zoals 28px of 42px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Als je verschillende lettergroottes en kopjes door elkaar heen gebruikt, heeft dit ook invloed op de hoogte van de tekstregel. Als je blokken met tekst naast elkaar hebt staan, kan dit ervoor zorgen dat de regelhoogte van de blokken verschilt. Dit oogt onverzorgd.
Met een klein beetje rekenwerk (of een goed voorbeeld op het internet: ik heb dit artikel gebruikt voor lettergroottes en deze site voor de balans tussen de blokken.) kun je veel voor elkaar krijgen.
De meeste browsers hebben een standaard lettergrootte van 16px ingesteld. Die absolute waarde in px (pixels) lijkt best handig, maar kan toch tot problemen leiden, wanneer je letters wil schalen (bijvoorbeeld voor gebruik op je mobieltje).
De eenheid em stelt de lettergrootte in op basis van de lettergrootte van de parent. Heb je een div met lettergrootte 10px met daarin een paragraaf met lettergrootte 1.2em, dan wordt de letter 12px groot. Dit kan leiden tot gepuzzel, omdat je niet zelden een element in een element in een element hebt.
Met de eenheid rem ga je nog een stapje verder. Hierbij maakt het niet uit wat de lettergrootte van de parent is. De grootte wordt vergeleken met de lettergrootte van het html-element als basis.
Lees verder in het middelste blok.
(Dit is het vervolg van het linkerblok.)
In het artikel wordt uitgelegd dat het handig is om de font-size van het html-element op 62.5% (alweer een eenheid!) te zetten. Uitgaande van de standaard-instelling van de browser levert dit namelijk 62.5%∘16px = 10px op. Relatief rekenen met 10px is daarna juist makkelijk. Zo is de font-size van het h1-element nu 2rem ofwel 2∘10px = 20px.
Helaas zijn we er daarmee nog niet helemaal, omdat de regelhoogte ook afhangt van de lettergrootte. Kopjes zoals de h2 hierboven zorgen dan voor een verticale verschuiving. De eigenschappen padding (standaard op 0) en padding (denk aan het boxmodel) en line-height zijn hier van belang. Om overzicht te houden zou je deze waarde voor alle elementen eerst even zelf op 0 kunnen zetten (zoals hier in het CSS-bestand is gedaan), omdat de standaardwaarden niet altijd 0 zijn.
Als alle standaardwaarden op 0 staan, kun je per element de regelgrootte en of marge instellen. Zorg er daarbij voor dat elk element uiteindelijk in totaal een dezelfde regelhoogte krijgt of b.v. precies 2x die regelhoogte. Op die manier kun je verschillende elementen afwisselen, zonder dat de balans tussen de verschillende blokken verloren gaat. Wij hebben hier voor gekozen voor 14px of een veelvoud zoals 28px of 42px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.