Share
Varje tänkbart kännetecken för typografi kan hänvisas till med namnet. Oavsett om du pratar om själva teckensnittet eller arrangemanget av typ i en layout, finns det en stor ordlista med termer som kan hjälpa dig att beskriva saker ordentligt. Låt oss ta en titt på de typsnitt av typografi som är viktiga för dig, som webbdesigner.
Det finns två väsentliga aspekter av typografi som direkt berör webbdesigners:
Det är därför ganska viktigt att du kan formulera (till kunder eller lagmedlemmar) dina typografiska åsikter och beslut. Vi kommer inte att oroa oss för minutiae av bollterminaler och tittlar, men låt oss istället diskutera typografiens anatomi, vilket är viktigt för webbdesigners.
Vissa grundläggande typografiska egenskaper kan manipuleras med CSS. Till exempel kanske viktigast av allt typsnittsfamilj.
Du hör ofta diskussion om definitionen av font mot typsnitt, så det är viktigt att du vet skillnaden. Ett teckensnitt är den samlade uppsamlingen av brevformar; Traditionellt fysiska block som används för att skriva ut, numera även digitala filer. Det är leveransmekanismen.
En typsnitt är vad formgivaren skapar; designen. Jag gillade alltid jämförelsen med musik; du köper en CD (okej, vi går tillbaka ett par år här) som leveransmekanism för att lyssna på musiken. Du lyssnar inte på cd-skivan. Det är en liknande situation som att välja teckensnitt för att utnyttja de typsnitt som de levererar.
Via CSS kan vi bestämma våra föredragna typfamiljer, i rankningsordning. Det här kallas vi typsnittstapel.
Vi kan också manipulera font-weight genom stylesheets. Vikt är hur vi beskriver den relativa tjockleken på en karaktärs slag.
Många teckensnitt produceras med olika vikter, som oftast beskrivs som ljus, regelbunden, bok, extra-bold, med en rad varianter förutom. Mer specifikt kan vi bestämma vikten på en typsnitt med TrueType-skalan, som går från 100 till 900 (400 är vad vi vanligtvis refererar till som vanligt).
Teckensnitt ska helst produceras med faktiska viktvarianter, numeriska eller namngivna, för att kunna styras via CSS: font-weight: 300;, font-weight: bold;. När en typsnitt variant inte är tillgänglig, kommer webbläsare ofta att gå på att göra vikten själva, men resultaten kan vara mindre än optimala.
Versal och små bokstäver hänvisa till majuscule och minuscule bokstäver. Termen fall härstammar från lådorna som används vid bokstäverutskrift (huvudletan innehåller huvudbokstäverna, små bokstäverna ... du får bilden).
Vi kan åsidosätta fallet (om vi vill) via CSS med text-transform: store bokstäver; till exempel.
Medan vi använder ämnesfallet, är det ibland (särskilt i mindre storlekar) lämpligt att öka avståndet mellan tecknen för att förbättra läsbarheten när man använder stor bokstav. När det gäller CSS hänvisar vi till detta som teckenavstånd och det kan uttryckas som ett positivt eller negativt värde, vanligtvis uppmätt i hundrader av en em.
I traditionella termer hänvisar vi till brevavstånd som spårning. Spårning påverkar den totala karaktärstätheten inom en given rad eller ett textblock. Termen härstammar (som med många typografiska termer) i den svåra åldern för uppsättning, specifikt fotosett, i vilka karaktärer projiceras på film genom en lins. Utrymmet runt varje tecken skulle förändras genom att flytta ett prisma längs ett spår spårning.
CSS-fastigheten word-avstånd kan också hjälpa dig här ute. Förutsägbart kommer förändringen av ordavståndet att se utrymmet mellan orden växa och krympa, vilket också har en signifikant inverkan på läsbarheten.
Spela med bokstavs- och ordavståndsvärdena som tillämpas på följande textblock och se själv hur läsbarheten påverkas.
Ofta förvirrad med spårning är kerning. Kerning hänvisar till justering av avstånd mellan specifika brevformar (inte en hel grupp av tecken), igen, för att förbättra läsbarheten.
en proportionell typsnitt (i motsats till a fast bredd typsnitt, vars karaktärsavstånd är enhetligt) kommer att göra ersättningar för specifika teckenpar som behöver extra hjälp för att visuellt sitta bredvid varandra.
Till exempel, stor bokstav V och en, När de placeras ihop kommer de vanligtvis att behöva minskas för att bekämpa det extra visuella utrymmet mellan dem.
Än en gång har vi grundskolans uppsats att tacka för termen, tillbaka när typ gjordes som metallblock. Kärnan refererar till skåran som är gjord i ett teckenblock, vilket skulle tillåta att det slits in i ett motsvarande block. Placeringen av dessa manliga / kvinnliga skåror skulle förhindra att felaktiga tecken placeras bredvid varandra.
Med detta sagt är kerning en process som är förknippad med uppsättning för utskrift och kan inte lätt omfamnas av webtypografi. Det finns JavaScript-verktyg, som kerning.js, vilket kan hjälpa konstruktörer att manipulera sin typ per karaktär, men CSS har inte slagit sig in ännu.
När det gäller CSS finns ett förslag till egendomen font-kerning i verk, men även detta är begränsat i vad det kan göra för en typografisk designer.
Inställning av egenskapen (ej standard) text-rendering: optimizeLegibility; kommer att förbättra saker i vissa moderna webbläsare, genom att förbättra kerning på erkända teckenpar. Som med font-kerning, Detta ger inte så mycket kontroll som en hjälpande hand. Det kommer också att utlösa användningen av ligaturer där det är tillgängligt i ett teckensnitt, vilket leder mig snyggt till ...
Ligaturer tar sig till nästa nivå och erbjuder ersättningsgaller för vissa teckenpar. I vissa fall kommer tecken inte att matchas mycket snyggt, oavsett hur delikat de är ordnade, i vilket fall en ligatur kan utformas. Ett klassiskt exempel är den små bokstaven f och jag.
Här är du som du är bekant med; känna igen detta?
Ampersand är faktiskt en ligatur i ursprung, som vi har blivit vana vid att använda istället för et (betyder "och" på latin / franska).
I andra fall kan ligaturer vara nödvändiga för vissa språkliga rariteter (tyska ß är kanske mest kända för dessa) och ibland också rent för dekoration. Den senare vi hänvisar till som Diskretionära ligaturer, såsom var a c och a t förenas.
Om du har större kontroll över innehållet på en webbsida kan du använda Unicode eller HTML-enheter för att visa ligaturer. Till exempel fi kommer att sortera dig ut med "fi" vi talade om. Om du hellre vill ha JavaScript, kan du ut ligature.js göra tricket, men det är inte bombsäkert.
När du använder CSS för att hjälpa dig kan du luta dig på text-rendering: optimizeLegibility som vi nämnde, eller du kan använda den föreslagna font-variant-ligaturer som har ett antal värden som gemensamma-ligaturer, se till att ligaturer visas om möjligt. Webbläsarstöd är ofullständigt just nu, men det är verkligen värt att hålla ett öga på.
Som vi kommer att diskutera om en minut kan proportionerna av en typsnitt påverka mängden vertikalt utrymme mellan varje rad. Det är därför tillrådligt att överväga radavstånd specifikt för det teckensnitt som används och justera därefter. För litet vertikalt utrymme får en texttext att bli trång och gör det svårt för ögat att spåra tillbaka till början av nästa rad.
För mycket utrymme och läsning blir lika besvärligt.
Att använda relativa mätningar är alltid tillrådligt i webbdesign, särskilt när det gäller typografi. Linjehöjd bör alltid vara en funktion av typsnittstorleken! Använder sig av ems att definiera linjehöjd betyder att det alltid är i förhållande till typsnittstorleken. Ta en titt på detta exempel och se hur läsbarheten påverkas av de förändrade värdena:
I traditionella termer hänvisar vi till avståndet mellan linjer (inte förväxlas med själva linjens höjd) som ledande, så kallade på grund av de fysiska remsor av blymetall som användes i tryckpressar för att öka och minska vertikalt avstånd.
Numera när linjens höjd beräknas, halvledande läggs till både övre och undre av tecknen. Till exempel skulle en teckenstorlek på 36px, med en linjehöjd på 54px (1.5em) resultera i att 9px av mellanslag läggs till under tecknen och 9px ovan. I själva verket centrerar detta vertikalt text inom sin linje.
Förflyttning tillsammans med vår CSS-kontrollerade typografiska anatomi, kommer vi till berättigande; justeringen av texten. I vårt diagram är texten anpassad till vänster, men den kan vara lika inriktad till höger, centrerad eller (vid hantering av block av text som är större än en rad) motiverad. Styling via CSS görs med exempelvis textjusteringsegenskapen text-align: center;.
Fullt motiverad text tar bort vad som är känt som raggad kant...
... men kan orsaka en otäck eftersmak i form av floder eller kanaler visas i texten i din text.
I en värld av vätskeformat, där bredden på en texttext kan vara svår att peka på, bör rättvisad text användas med försiktighet.
Att välja typsnitt kan vara tufft. Oavsett om du tittar specifikt på rubriker, kroppstext, block citat etc. finns det många faktorer att spela. Låt oss titta på några grundläggande aspekter av typografisk anatomi som är värda att uppmärksamma.
Först och främst handlar vi om a serif typsnitt eller a sans serif? Serifs är de ytterligare stroke som avslutar ett huvudslag. Teckensnitt som Arial har inte dessa slag, de är sans-serif (en annan fransk lektion för dig där ...)
Serifs sägs hjälpa till med flödet av brevformar, binda samman sammanhängande ord tillsammans, hjälpa ögat över texten och göra läsning enklare. Ibland kan de emellertid komplicera en typsnitt, vilket orsakar läsarens trötthet och därför faktiskt hindrar läsbarheten. Argumentet har varit aktuellt i årtionden och inga konkreta bevis har någonsin presenterats framgångsrikt för någon av de två som är mer läsbara.
I alla fall kommer teckensnitt i serif och sans-serif smaker (som ParaType's PT så att du har lyxen att välja vilken du tycker är att föredra.
Har nämnt läsbarhet, Det är bara rättvist, jag skiljer det snabbt från läsbarhet. Vi använder läsbarhet när vi pratar om de finare detaljerna i typografi. förmågan att känna igen enskilda bokstäver och ord. Läsbarhet tar en mer funktionell roll i samband med en läsares praktiska förmåga att absorbera en texttext.
Läsbarhet är uppenbarligen väldigt viktig. Av den anledningen är det klokt att ta x-höjd i åtanke. Typ x-höjd beskriver höjden (ta en titt på x av ett visst ansikte), från baslinje till början av små bokstäver. Typsnitt med en relativt stor x-höjd tenderar att vara mer läsbara, speciellt i mindre storlekar.
Större x-höjd kommer på bekostnad av nedstapeln och uppstigna, som blir logiskt kortare i relation. Detta kan leda till visuellt mindre utrymme mellan linjer, som vi talade för en stund sedan.
Jag är inte säker på hur jag har nått det här långt utan att specifikt definiera en brevform stroke. Om det finns en term som är användbar när man beskriver personligheten i en typsnitt, så är det det. Stridet i en given brevform kan vara horisontell, vertikal, diagonal, jämn krökt - och beroende på stroke i fråga kan det också ha ett mer specifikt namn.
Huvudslaget (vanligtvis upprätt och tungt) inom en bokstavsform kallas stam, lämnar termen stroke för att då betyda en sekundär framträdande. Den horisontella stroke ovanpå en stor bokstav T kallas en ärm, det som du hittar överbrygga klyftan i en stor bokstav A eller H är a bar, listan fortsätter ...
Strokes inom en bokstavsform, särskilt i seriva teckensnitt, kan variera i stil och vikt också; en hårfäste vara den tunnaste en närvarande.
Då kommer vissa slag, speciellt kurvor, att ha varierande vikt längs deras egen längd. Detta kallas modulation. Denna variation balanserar den totala vikten av en karaktär och undviker särskilt tunga områden där två slag sammanfogar.
Dålig slagmodulering kommer ofta att resultera i en klumpig, tung brevform relativt andra i uppsättningen. David Kadavy hänvisar till denna balans som jämnhet i konsistens och är ofta ett mått på kvalitet i en väl utförd typsnitt. Ta en titt på en textkropp, så sudd dina ögon för att få ett intryck av överaltexturen.
Det finns tusentals av ordlistor och adjektiv för att ta hand om om du vill korrekt beskriva typografiska frågor. Vi har täckt några av grunderna här och jag hoppas att åtminstone några av dem är nya tillägg till ditt ordförråd! Försök slumpmässigt kasta en i samtalet nästa gång du presenteras för någon ny - de kommer bli mycket imponerad…
Accentsconagua