Font-size bepalen met pixels, em of rem

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Font-size opgeven met rem

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Je kunt voor het opgeven van de fontgrootte gebruik maken van pixels, em en rem.

Laat ik direct maar beginnen met te zeggen dat het werken met pixels verouderd is.

Je werkt dan namelijk met een absolute maateenheid en dat is niet verstandig.

Verschillende apparaten hebben verschillende resoluties.

Zo geeft de iPad-twee met een resolutie van duizend vierentwintig bij zevenhonderd achtenzestig fonts standaard weer op zestien pixels.

Maar een iPad-drie, met een retina beeldscherm, dus een keer hogere resolutie.

Toont standaard tekst op tweeëndertig pixels.

Het uiteindelijke effect is exact hetzelfde. De tekst is goed leesbaar.

Zou jij de corpsgrootte vastzetten op zestien pixels.

Dan wordt de browsergestuurde standaard van tweëndertig pixels op de ipad-drie

verkleind naar zestien en dan zou de tekst niet meer te lezen zijn.

Reden genoeg om niet met pixels te werken.

Dus blijven em en rem over.

Dit zijn allebei relatieve waarden.

Dat betekent dat ze sowieso ergens op gebaseerd zijn.

Als je zelf niks regelt dan is em gebaseerd op de browserstandaard.

Dat is dus meestal de standaard pixels.

Zodra ik voor de paragrafen, in dit html document een font-site opgeef van één-em

Dan zie je niets veranderen.

Één-em staat namelijk voor één keer de browser-standaard, in dit geval zestien pixels.

Zet ik deze op twee-em dan is dit twee keer zestien pixels dus tweeëndertig pixels.

Maar wat als ik het formaat op twintig pixels zou moeten zetten. Hoe reken ik dat dan uit?

Nou pak dan maar je rekenmachine erbij. Je deelt twintig door de basiswaarde zestien.

Dat is één punt vijfentwintig.

Dus om voor een corpsgrootte van twintig pixels te bereiken voer je dan het getal één punt vijfentwintig em in.

Klim met de rechtermuis in het voorvertoningsvenster, kies voor Inspecteren.

Selecteer dan het Select-gereedschap en klik hiermee op een paragraaf.

Kijk, inderdaad deze tekst staat op twintig pixels. Maar dan.

Em heeft de vaste eigenschap dat de waarde naar kinderen altijd overerft.

Overerving is sowieso het basiskarakter van css.

In deze paragrafen staan span-elementen.

Nu wil ik dat de tekst hiervan ietsje groter wordt namelijk vierentwintig pixels.

Pak je weer de rekenmachine erbij.

Je deelt nu vierentwintig door zestien. Dat is één punt vijf.

De span elementen hebben de class-naam 'big-text'.

Dus plaats ik hiervoor een selector in mijn css stijlblad.

En deze geef ik een font-size mee van één punt vijf em.

Nou dat ziet er behoorlijk groot uit.

Ik klik met met mijn select-gereedschap op de span.

En deze is helemaal niet vierentwintig pixels maar dertig pixels

Dat komt door de overerving. Het span-element is een onderdeel van het p-element.

En die heeft dus al een corpsgrootte gekregen van twintig pixels.

Het is nu niet anderhalf keer zestien pixels maar anderhalf keer twintig pixels.

En dat is inderdaad dertig pixels.

Om de juiste em-waarde te weten voor de span-elementen had ik dus niet vierentwintigtwintig moeten delen door zestien maar door twintig.

Nou volg je me nog? Ik begrijp dat dit best gecompliceerd is.

Want je moet continu alle overervingen bij elkaar optellen en in de gaten houden.

Ik wijzig deze nu in één punt twee em.

Ga ik opnieuw kijken bij de span-elementen. Nu is deze inderdaad vierentwintig pixels groot geworden. Precies wat ik wilde.

Het rekenen met em is ingewikkelder dan rekenen met rem.

Hoe dat werkt leg ik in de volgende video uit.