Share
Jag ska göra ett svepande uttalande; Pixlar har ingen plats i webbdesign. Det finns bara en anledning att du fortfarande litar på pixlar - och det beror på att du ännu inte har fått hänget på ems. Låt oss ändra det!
Dekorativa M med tillstånd av Frances Mcleod - vinnare av TypeFight # 34 När vi bygger webbplatser måste vi berätta för webbläsaren hur "stora" saker är: "Denna rubrik är så stor", "den här behållaren är yay hög", "den här blanketten är bredare än den", det är så vi layoutar en sida. Pixlar har alltid gjort perfekt förnuft som den valda måttenheten; vi lägger ut på en skärm, så vad skulle vi använda?!
Det visar sig emellertid att pixlar är inherent inflexible. Och det visar sig vara oflexibelt är inte bra för webben.
Oliver Reichenstein uttalade för länge sedan: "Webben är 95% typografi", men det har gått ett par år för människor att komma ombord med idén. Innehåll och användare De är våra prioriteringar som webbdesigners, och typografisk design hjälper oss att möta dessa prioriteringar.
Webbläsare visar kroppskopia vid en standardstorlek. På stationära datorer är det vanligtvis 16px, mobila webbläsare varierar. Användare kan ändra denna standard beroende på vad de föredrar.
Ofta kommer webbdesigners att använda CSS för att gjuta basstorleken i sten ...
... förhindrar användaren att skräddarsy sin egen läsupplevelse, vilket gör innehållet mindre tillgängligt.
Lektion ett är att lämna kraften tillbaka till användaren. Förhindra inte användarna att ställa in sin egen typstorlek, men se till att du börjar på lika villkor. Ange din basfont till 100% av webbläsarens standard:
då kan vi arbeta därifrån.
Vi behöver fortfarande definiera hur stora våra olika typografiska element visas, speciellt om vi har använt en CSS-återställningsteknik för att ta bort alla standardstorlekar. En ganska typisk modulär skala skulle se ut så här:
Dessa siffror har använts i århundraden, beräknat för att optimera proportionerna, utan att fysiskt tillverka för många av de block som används vid tryckning. Det finns all slags smart matematik som rättfärdigar skalor så här och jag är säker på att du kan uppskatta att detta intervall är glädjande för ögat också.
Vi skulle översätta denna skala till vår egen typografi genom att tillämpa CSS lite så här:
Men (som vi redan har sagt) med hjälp av fasta pixelvärden är oflexibelt, så låt oss åtgärda det ...
En em är en måttenhet. Precis som pixlar kan ems bestämma storleken på element på en webbsida. Till skillnad från pixlar, som är absoluta, är ems i förhållande till deras förälders teckensnittstorlek, vilket är där mycket förvirring ligger.
1em är lika med den ärvd skriftstorleken. Om teckensnittstorleken på a Ems får sitt namn från utskrift. Exakt när termen användes först är oklart, men som versaler M (uttalad emm) representerar närmare det kvadratiska tryckblocket på vilket skrivbrev placerades, det kom att låna sitt namn till mätningen. Oavsett punktstorleken för det aktuella tecknet definierar blocket i stor bokstaven M em. En em är vanligtvis en touch större än brevformen, men du får tanken. Vi har redan börjat ställa in vår typografiska skala i pixlar, så hur konverterar vi det till ems? En enkel beräkning, som uttrycker önskad typstorlek i förhållande till kroppstypstorlek: Med hjälp av kroppsstorleken antar vi att vi är 16px och syftar till att konvertera våra 36px Så här är vår skala omvandlad, med hjälp av ovanstående metod: Några av dessa värden kan bli lite komplexa, men var inte rädda för att vara så exakta som möjligt med decimalerna. Webbläsare kommer alltid att göra sitt bästa för att göra exakta värden. Tips: Det är ofta användbart att göra en anteckning i kommentarerna, för att påminna dig själv hur du beräknade varje em-värde. Antalet största svimmade människor har med ems härrörande från komplikationer som uppstår vid kaskader. Ett em-värde är i förhållande till närmaste föräldervärde, vilket oavsiktligt kan röra upp saker om du inte uppmärksammar. Ta en titt på följande css, som syftar till att få ankare och stycken som är lika stora: Titta nu på denna oskyldiga del av markeringen: Som du förväntar dig, visas alla bra i webbläsaren. Både stycket och ankaret visas vid 1.2em, i förhållande till kroppstypstorleken Men om vi skulle introducera ett andra ankare inom stycket, låt oss se vad som händer: Ankaret i stycket är fortfarande stor på 1,2em, men det är nu relativt moderposten, som redan är 19.2px - Notera: Nästa listobjekt i navigeringsmenyerna är ett klassiskt exempel på var cascading kan komma ur kontroll - se upp för den där. Det finns ingen korrigering för detta; Det sista du vill göra är att lägga till en extra regel för att minska storleken på ankare som råkar vara i stycken - det är en enkelriktad biljett till Migrainesville. För att hålla din CSS och HTML underhållbar är det viktigt att Keep It Simple ™. Det borde hjälpa! Att använda Ems betyder att du måste tänka ganska hårt ibland, men gör det kommer att tvinga dig att städa upp din handling och vara effektiv i din kodning. Rems är användbara och beter sig på exakt samma sätt som ems, utan cascading. Varje rem du definierar är i förhållande till kroppstypstorleken. Support är dock inte så bra så, men iE8 och äldre behöver en pixelbaserad återgång. Vi har täckt CSS Det finns ingen fast regel för hur stor linjehöjd ska vara, men 1.5em är ett rimligt värde att prova och gör din typografi trivsamt läsbar. Tips: Ta en titt på Bryan Gruhlkes förslag i kommentarerna för att använda unit-less värden med linjehöjd ... Notera: Saker kan bli komplicerade om du försöker ställa in ett grunnlinje med ems, men det är ett ämne för en annan artikel. När du väl har kommit in i tanken om att hålla din layout flexibel med avseende på teckenstorleken, kommer du att finna dig förlita dig på pixlar mindre och mindre för att lägga ut element på sidan. Om vi pratar om vätskelayouter, borde du använda% -värden för att bestämma bredden på ett visst element. Pixlar ska inte finnas någonstans när man bestämmer horisontella dimensioner. Vertikal avstånd kan uppnås mycket enkelt med ems; igen, det är en fråga om att vara ren med din markering och styling. Överväg att begränsa marginalerna till botten av dina element, för att göra hanteringen av vertikal rytm enklare. Om du behöver definiera en Avrundade hörn på en knapp? Ställ in Textskugga, boxskugga, ditto. Och om du behöver ändra storleken på allt under vissa omständigheter, som mindre visningar? Ändra kroppens basstorlek i lämplig mediefråga Liksom alla utmärkta vetenskapliga regler måste det finnas ett undantag för att bevisa det. I det här fallet kan jag tänka på ett bra scenario där du kanske behöver pixlar; gränser. Om du definierar en gränsbredd (eller höjden på en horisontell regel) i ems, kan det hända att den beräknas så liten att webbläsaren inte kan göra det. I det här fallet ser du helt enkelt inte det. För horisontella regler kan du ha stilar lite så här: För att förhindra att den försvinner när kroppsstorleken är för liten kan du lägga till följande: Där. En pixel. Attans. Gränsviddar kan inte ha ett lägsta värde (tyvärr) så att en liknande säkerhetskopia inte är möjlig. I stället kan du använda gränsvärdena för Börja använda ems idag! Ditt innehåll är typografiskt jordat, oavsett om du inser det eller inte. Med hänvisning till pixlar är det inte ens nödvändigt att konvertera figurer och tänkande i form av fasta layouter. Börja tänka i ems och du kommer snart att glömma pixlar helt och hållet. Om du kan tänka på en situation där du helt enkelt inte kan använda ems, skulle jag gärna höra det i kommentarerna!
En storlek M i Calendas Plus - den omgivande torget är 1em hög, 1em bred Omvandling från pixlar
, vi får:
Problem med Cascading
(1,2 * 16px = 19,2px).
(1,2 * 19,2px = 23,04px). Detta ger oss extra stora ankare i vissa delar av vår sida; knappast önskvärt.Fixen
Rems
Vad om att använda Ems någon annanstans?
textstorlek fast egendom; ett förnuftigt första steg i att använda ems, men nu ska vi titta på radavstånd. Om det någonsin fanns en egenskap som skriker "använd inte pixelvärden", är det linjens höjd. Linjens höjd (diskuterad under en tidigare artikel i mer detalj) av ett typografiskt element bör alltid vara i förhållande till typsnittstorleken. Om du har en rubrik vars storlek är inställd i ems, men vars linjehöjd är inställd i pixlar kan du hamna i en ful överlappning och ett dåligt visuellt förhållande i allmänhet.
I detta fall är 1.5em 1,5 * 18px vilket är 27px Strukturella element
höjd (vilket kan vara knepigt i flexibla layouter) använder ems också. Kanske bygger du en navigering och behöver definiera höjden på menylänkarna - de ska växa och krympa med teckensnittstorleken.border-radius med hjälp av ems, så vågar allt sömlöst.
Ta en titt på denna Codepen för ett mer visuellt exempel på vad jag pratar om här RWD
kropp font-size: 90%; och pang! Hela din webbplats skala i den tid det tar att slå in.undantag
Ta en titt på denna härliga demo hr höjd: .02em; gränsen: ingen; bakgrund: vit; marginal: 2em 0; kontur: ingen; display: block; klara: båda; bredd: 100%;
minhöjd: 1px;
tjock, medium och tunn, även om dessa värden inte skala med teckenstorlek något bättre än pixlar gör.Slutsats
Vidare läsning
Accentsconagua