Share
Ik ga een overweldigende verklaring afleggen; pixels horen niet thuis in webdesign. Er is maar één reden waarom je nog steeds op pixels vertrouwt - en dat komt omdat je ems nog niet onder de knie hebt. Laten we dat veranderen!
Decoratieve M met dank aan Frances Mcleod - winnaar van TypeFight # 34 Wanneer we websites bouwen, moeten we de browser vertellen hoe "groot" spul is: "deze kop is zo groot", "deze container is hoog", "deze vorm is breder dan dat", het is hoe we een pagina opmaken. Pixels zijn altijd perfect logisch geweest als de gekozen maateenheid; we voeren naar een scherm, dus wat anders zouden we gebruiken??!
Het blijkt echter dat pixels inherent inflexibel zijn. En het blijkt dat inflexibel werken niet geweldig is voor het web.
Oliver Reichenstein verklaarde lang geleden: "Het web is 95% typografie", maar het heeft een goed aantal jaren geduurd voordat mensen aan boord kwamen met het idee. Inhoud en gebruikers; zij zijn onze prioriteiten als webontwerpers, en typografisch ontwerp helpt ons om die prioriteiten te realiseren.
In browsers wordt de body-kopie op een standaardgrootte weergegeven. Op desktops is dit over het algemeen 16px, mobiele browsers variëren. Gebruikers kunnen deze standaardinstelling wijzigen, afhankelijk van wat zij verkiezen.
Vaak gebruiken webontwerpers CSS om de lettergrootte in steen te gieten ...
... waardoor de gebruiker zijn eigen leeservaring niet kan afstemmen, waardoor de inhoud uiteindelijk minder toegankelijk wordt.
De eerste les is het terugleveren van de stroom aan de gebruiker. Voorkom dat gebruikers hun eigen type grootte instellen, maar zorg ervoor dat u op een gelijk speelveld begint. Stel uw basislettertype in op 100% van de standaardinstelling van de browser:
dan kunnen we van daaruit werken.
We moeten nog steeds definiëren hoe groot onze verschillende typografische elementen zijn, vooral als we een CSS-resettechniek hebben gebruikt om alle standaardafmetingen te verwijderen. Een vrij typische modulaire schaal ziet er ongeveer zo uit:
Deze cijfers worden al eeuwen gebruikt, berekend om de verhoudingen te optimaliseren, zonder dat er te veel van de blokken die bij het afdrukken worden gebruikt, fysiek moeten worden vervaardigd. Er is allerlei slimme wiskunde die schalen als deze rechtvaardigt en ik weet zeker dat je kunt waarderen dat deze reeks ook een lust is voor het oog.
We zouden deze schaal vertalen naar onze eigen typografie door CSS een beetje als volgt toe te passen:
Maar (zoals we al hebben gezegd) met behulp van vaste pixelwaarden is niet flexibel, dus laten we dat rechtzetten ...
Een em is een maateenheid. Net als pixels kunnen ems de grootte van elementen op een webpagina bepalen. In tegenstelling tot pixels, die absoluut zijn, zijn de ems relatief ten opzichte van de lettergrootte van hun ouders, waardoor er veel verwarring is.
1em is gelijk aan de overgeërfde lettergrootte. Als de lettergrootte van een Eems krijgen hun naam van afdrukken. Precies wanneer de term voor het eerst werd gebruikt is onduidelijk, maar als de hoofdletter M (uitgesproken emm) komt het dichtst overeen met het vierkante drukblok waarop de drukletters werden geplaatst, het kwam zijn naam te danken aan de meting. Ongeacht de puntgrootte van het betreffende lettertype, zou het blok van de hoofdletter M de Em definiëren. Een em is meestal een tikje groter dan de lettervorm, maar je begrijpt het wel. We zijn al begonnen onze typografische schaal in pixels in te stellen, dus hoe kunnen we dat in ems omzetten? Een eenvoudige berekening, die de gewenste lettergrootte aangeeft in verhouding tot de lettergrootte van het hoofdgedeelte: We gaan uit van de lichaamslengte om 16px te zijn, met als doel onze 36px te converteren Dit is hoe onze schaal wordt omgezet met behulp van de bovenstaande methode: Sommige van deze waarden kunnen een beetje ingewikkeld worden, maar wees niet bang om zo precies mogelijk te zijn met de cijfers achter de komma. Browsers zullen altijd hun best doen om de exacte waarden weer te geven. Tip: Het is vaak handig om een opmerking te maken in de opmerkingen, om u eraan te herinneren hoe u elke em-waarde hebt berekend. De nummer een grootste mopperen mensen met ems komt van complicaties die voortvloeien uit cascadering. Een em-waarde is relatief ten opzichte van de waarde van de dichtstbijzijnde ouder, die per ongeluk dingen kan verprutsen als u niet oplet. Bekijk de volgende CSS, die tot doel heeft om ankers en alinea's in gelijke mate te krijgen: Bekijk nu dit onschuldige stukje markup: Zoals je zou verwachten, lijkt alles goed in de browser. Zowel de alinea als het anker worden weergegeven bij 1.2em, in verhouding tot de lettergrootte van het hoofdgedeelte Als we echter een tweede anker zouden introduceren binnen de paragraaf, laten we eens kijken wat er gebeurt: Het anker binnen de alinea heeft nog steeds de grootte 1.2.em, maar dat is nu relatief ten opzichte van de bovenliggende alinea, die al 19.2 px is - Notitie: Geneste lijstitems in navigatiemenu's zijn een klassiek voorbeeld van waaruit cascadering uit de hand kan lopen - kijk daar voor uit. Er is geen oplossing voor; het laatste wat je wilt doen is een extra regel toevoegen om de ankers te verkleinen die toevallig in alinea's staan - dat is een enkele reis naar Migrainesville. Om uw CSS en HTML onderhoudbaar te houden, is het belangrijk om Keep It Simple ™ te hebben. Dat zou moeten helpen! Het gebruik van Ems betekent wel dat je soms heel hard moet nadenken, maar als je dat doet, moet je je act zuiveren en efficiënt zijn in je codering. Rems zijn handig en gedragen zich op precies dezelfde manier als ems, zonder het cascaderen. Elke rem die u definieert, is relatief aan de lettergrootte van het lichaam. Ondersteuning is echter lang niet zo goed, dus IE8 en ouder zullen een back-up op basis van pixels nodig hebben. We hebben de CSS behandeld Er is geen vaste regel voor hoe groot de regelhoogte moet zijn, maar 1.5em is een redelijke waarde om uit te proberen en maakt uw typografie aangenaam leesbaar. Tip: Bekijk de suggestie van Bryan Gruhlke in de opmerkingen voor het gebruik van unitloze waarden met regelhoogte ... Notitie: Het kan ingewikkeld worden als u een basislijnraster met ems wilt instellen, maar dat is een onderwerp voor een ander artikel. Als u eenmaal in de mindset bent gekomen om uw lay-out flexibel te houden in termen van de tekengrootte, zult u merken dat u steeds minder op pixels vertrouwt voor het opmaken van elementen op de pagina. Als we het hebben over vloeiende lay-outs, moet u% -waarden gebruiken om de breedte van een bepaald element te bepalen. Pixels mogen nergens te zien zijn bij het bepalen van horizontale afmetingen. Verticale spatiëring kan heel eenvoudig worden bereikt met ems; nogmaals, het is een kwestie van clean zijn met je markup en styling. Overweeg de marges te beperken tot de bodem van uw elementen, zodat u het verticale ritme gemakkelijker kunt beheren. Als u een moet definiëren Afgeronde hoeken op een knop? Stel de Tekstschaduw, doosschaduw, idem. En als u de grootte van wilt wijzigen alles onder bepaalde omstandigheden, zoals kleinere viewports? Wijzig de basislettergrootte van het hoofdgedeelte in de juiste mediaquery Zoals alle uitstekende wetenschappelijke regels, moet er een uitzondering zijn om het te bewijzen. In dit geval kan ik een goed scenario bedenken waarbij je misschien pixels nodig hebt; grenzen. Als u een grensbreedte (of de hoogte van een horizontale regel) in ems definieert, kan het zijn dat deze zo klein wordt berekend dat de browser het niet kan weergeven. In dit geval ziet u het gewoon niet. Voor horizontale regels heb je stijlen misschien een beetje als volgt: Om te voorkomen dat het verdwijnt wanneer de lichaamslengte te klein is, zou je dit kunnen toevoegen: Er. Een pixel. Verdorie. Randbreedten mogen geen (helaas) minimale waarde hebben, dus een vergelijkbare back-up is in dat geval niet mogelijk. In plaats daarvan kunt u de grensbreedtewaarden van gebruiken Begin vandaag ems te gebruiken! Je inhoud is typografisch gegrond, of je het nu beseft of niet. Terugverwijzend naar pixels is converteren van cijfers en denken in termen van vaste lay-outs zelfs niet nodig. Begin in ems te denken en je vergeet al snel pixels helemaal. Als je een situatie kunt bedenken waarin je gewoon ems niet kunt gebruiken, zou ik het graag in de reacties horen!
Een hoofdletter M in Calendas Plus - het omliggende plein is 1em hoog, 1em breed Conversie van Pixels
, we krijgen:
Problemen met Cascade
(1.2 * 16px = 19.2px).
(1.2 * 19.2px = 23.04px). Dit geeft ons extra grote ankers in sommige delen van onze pagina; nauwelijks wenselijk.De fix
Rems
Hoe zit het met Ems Elders te gebruiken?
lettertypegrootte eigendom; een verstandige eerste stap in het gebruik van ems, maar laten we nu eens kijken lijnhoogte. Als er ooit een eigenschap is die schreeuwt "gebruik geen pixelwaarden", dan is het lijnhoogte. De lijnhoogte (eerder besproken in een eerder artikel) van een typografisch element zou dat wel moeten zijn altijd relatief zijn ten opzichte van de lettergrootte. Als u een kop hebt waarvan de grootte is ingesteld in ems, maar waarvan de lijnhoogte in pixels is ingesteld, kan dit leiden tot lelijke overlappingen en een slechte visuele relatie in het algemeen.
In dit geval is 1.5em dat wel 1,5 * 18px dat is 27px Structurele elementen
hoogte (wat lastig kan zijn in flexibele lay-outs) gebruik ook ems. Misschien bouwt u een navigatie en moet u de hoogte van de menulinks definiëren - deze moeten groeien en krimpen met de lettergrootte.border-radius met behulp van ems, zodat alles naadloos kan worden geschaald.
Bekijk deze Codepen voor een meer visueel voorbeeld van waar ik het hier over heb RWD
body font-size: 90%; en wham! Uw hele site wordt geschaald in de tijd die nodig is om op enter te drukken.Uitzonderingen
Neem een kijkje in deze demo hr height: .02em; rand: geen; achtergrond: wit; marge: 2em 0; overzicht: geen; weergave: blok; beiden opschonen; breedte: 100%;
min-hoogte: 1px;
dik, medium en dun, hoewel deze waarden niet beter schalen met lettergrootte dan pixels.Conclusie
Verder lezen
Accentsconagua