Front-end-utveckling är ett knepigt företag och det kan vara ett mycket otacksamt jobb. En utvecklare som har studerat teknik eller datavetenskap gör den här typen av kod enkelt, men i slutet av det finns det alltid alldeles för många detaljer att korrigera och, ja, de handlar ofta om typografifrågor.
Detta beror på det finns en tydlig skillnad mellan designerns förväntningar och utvecklarens uppfattning om det arbete som utförs. Med andra ord, generellt sett ser designern en massa saker som utvecklaren inte gör.
Prototypappar har definitivt hjälpt till med förståelsen av sidans struktur, och vissa har till och med hjälpt till att förstå vilken typ av rörelseövergångar eller interaktioner vi behöver. Sketch, till exempel, har definitivt hjälpt designern att leverera all information till utvecklaren: från storlekar, till teckensnitt, till färgkoder, allt finns där.
Och ändå tittar designern på det arbete som utvecklaren har producerat och korrigeringarna börjar hälla:”Det här typsnittet har inte rätt vikt”,”Rubriken ska vara versaler”,”Teckenavståndet är fel”, och så vidare.
Baserat på min erfarenhet, De flesta korrigeringar som görs är textrelaterade. Allt annat är mindre tekniskt och mer förståeligt på en grundläggande empirisk nivå, men inte typografi.
Det finns mycket med det, hela kurser tillägnad dess design och användning, så det är mycket osannolikt att man bara tittar på teckensnittet och omedelbart vet vad man ska göra med det, för att få det att se ut på vilket specifikt sätt designern har bestämt sig för.
Det är därför jag bestämde mig för att göra en typografiworkshop.
Innan jag går in på någon av förklaringarna är det viktigt att förstå hur bokstaven fungerar, vad är dess relation till dess kompisar och hur påverkar det ordet, meningen och stycket.
Grundläggande begrepp som är bra att ha och gör det lättare att prata om typografi:
1.2. Typografins anatomi
En bokstavsform kommer att dela gemensamma egenskaper med sina kamrater inom samma typsnitt. Dessa egenskaper är baserade på storlekar och proportioner av samma grundläggande anatomiska egenskaper som berör alla västerländska karaktärer.
Jag trodde att det skulle vara intressant att lista dem, men inte med avsikt att memorera dem, eftersom namngivningen inte kommer att göra det
mycket av en skillnad i det dagliga livet för antingen den grafiska designern eller utvecklaren.
Jag listar dem för att veta vad de ska leta efter när man försöker jämföra typsnitt och för att bättre förstå de olika funktioner som olika teckensnitt kan ha, baserat på deras anatomi.
Baserat på dessa tekniska/strukturella egenskaper, tolkningsdefinitioner eller till och med historiska sammanhang finns det klassificeringar för typ. Här är några:
De mest använda och relevanta kodmässigt är de berömda Serif och Sans-Serif. Anledningen till att dessa två är den viktigaste skillnaden som ska göras är att dess kärndefinierande funktion är objektiv och mycket synlig, om man vet vad man ska leta efter.
Sans-serif skapades genom att ta bort serif - ”sans” som betyder ”utan”. Denna stil anpassad till utskrift skapades för dess tydlighet och läsbarhet, vilket var användbart för skärmar och annonser. Dessutom var det lättare att skriva ut i mycket stora storlekar.
Å andra sidan sägs Serif-typen vara det bästa valet för lång text, till exempel den som finns i böcker eller tidningar. Detta kan dock diskuteras, eftersom mycket av det som skulle göra hela denna typfamilj mer läsbar, också kan vända sig mot sig själv, beroende på några grundläggande funktioner i det enskilda typsnittet - Jag är ganska säker på att en Didot, även om det är ett Serif-typsnitt, kommer att vara sämre än Lato, till exempel, för lång textläsbarhet.
Detta beror på att Didot har en hög kontrast mellan horisontella och vertikala linjer, vilket skapar mycket brus och ”stötar” i läsflödet, medan Lato presenterar en jämnare proportion mellan de olika raderna i bokstaven, vilket gör det till ett bättre alternativ än Didot. Det är inte ett perfekt alternativ, men du förstår kärnan.
Det viktiga att förstå om dessa två olika stilar av typ, för att veta vilka som är bäst för vad, är serifens funktion. Dess funktion är lättare att förstå, om man känner till dess historia.
Innan allt detta, innan vi - mänskligheten - ens övervägde att använda metallbitar för att skapa ord och trycka dem mot papper för att kunna skapa böcker snabbare. Innan vi ens övervägde idén om en bok, papper eller till och med text, för den delen, skapade vi redan bilder för att kommunicera.
Tusentals år av evolution gjorde mer komplexa former av visuell kommunikation till en nödvändighet, därav alfabet. Men dessa föddes inte ur tunn luft, de var resultatet av sina egna mutationer och anpassningar. Jag tycker att historien om bokstaven ”A” är ett mycket enkelt exempel på hur de flesta bokstävernas utveckling blev.
Olika civilisationer kom och gick, betydelser och ljud etablerades - vissa muterade, andra gjorde det inte - och ox-/kohuvudet förenklades alltmer, roterades, geometriskt perfekterades av romarna för att huggas på monument, skrivas och utsmyckas av munkar, förvrängdes för snabbare och bättre flytande skrift och slutligen plockades upp av typografer.
Så för att återuppta: Serifens ursprungliga födelse kom från behovet av snabb skrivning och koppling mellan olika bokstäver. När läsning blev en grej för mer än kontoristen och monarkin - var bättre läsning också ett krav, och det var då Serif började användas för det ändamålet. Nu vet du.
Sedan kom typografin.
Eftersom det fanns en öka medvetandet om typsnittets läsbarhet, dess användning och disposition var också ett mål för mer uppmärksamhet och försiktighet.
3.1. Linjeavstånd
Något så grundläggande som radavståndet - som påverkas direkt av typsnittet och dess storlek - kommer att påverka hela sidan. Skapandet av rutnätssystem hjälpte till att konsolidera regler som gör det enkelt för alla designers att skapa läsbar text och balanserade sidor.
Linjeavstånd - linjehöjd i CSS - är förresten det vertikala avståndet mellan olika textrader. Detta avstånd kan vara markeringen eller brytningen av vilket textområde som helst, eftersom att göra det för litet eller för stort kommer att resultera i att du hoppar över rader eller läser dem om och om igen (alla har varit där, och nej, det är inte ditt fel).
Det finns en optimal storlek för detta avstånd, som vanligtvis är mellan 120% och 145% av textstorleken. Men bara om du behöver ta reda på en lösning själv kan du komma ihåg följande:
Försök att rita en imaginär linje över mitten av linjerna, utan att stöta på några nedstigare eller uppstigare. Om det går igenom, rent, det borde vara bra.
Tänk också på längden på linjerna i följande bild. Modulerna som byggdes av radhöjderna är vanligtvis ganska små jämfört med storleken på typsnittet, inte av en slump, men för att det ger designern mer flexibilitet när man organiserar en hel sida, vilket möjliggör större eller mindre textområden, samtidigt som man alltid håller ett bra, proportionellt avstånd mellan olika element.
Dessutom innebär kortare linjer bättre läsbarhet.
Det finns faktiskt en bra mätning för längden på raderna, som vanligtvis är cirka 50 till 75 (topp) tecken, inklusive mellanrummen. Det finns en massa goda skäl till detta:
Linjer som är för korta kommer att tvinga läsaren att bryta flödet för ofta, genom att behöva gå tillbaka när du byter linje. Detta kan få läsarna att också hoppa över några viktiga ord i slutet av raden, mitt i ångesten att ständigt gå fram och tillbaka - låter stressande, eller hur? Det är det faktiskt.
Å andra sidan linjer som är för långa är svårare att fokusera på, eftersom det är svårare att omedelbart se var linjen slutar, skapar ångest att byta när som helst. Dessutom, när läsaren byter linje, är det också mer troligt att han/hon kommer att gå vidare till fel, eftersom det är svårare att säga var linjen började i första hand.
Det visar sig att läsarens fokus är högre när man startar en ny linje, och det försvinner när man går vidare tills det når slutet, så det finns en mycket snäv balans att upprätthålla. Därför intervallet 50 - 75 tecken som en tumregel.
Sammantaget är detta några av de viktigaste sakerna att tänka på när det gäller läsbarhet. Men om du vill ha en bra källa till grundläggande kunskaper i vad som kommer till typografiskt uttryck, är dokumentären ”Helvetica” din favorit.
Under hela dokumentären får du en förklaring av tankeprocessen bakom den nya designen som gjordes på 50-talet och hur den skapade ett medvetande baserat på socialt ansvar - baksmälla från andra världskriget. Du får också en glimt av några av de riktigt intressanta designen som gjordes vid den tiden, och en introduktion till ursprunget och syftet med det berömda Helvetica-typsnittet.
Du kommer också att kunna förstå den starka kontrasten mellan annonserna som görs före och efter internationell stil, och de pragmatiska konsekvenser det hade på hur visuell kommunikation gjordes.
Det finns en massa andra saker som är relevanta att veta, och jag kommer att lista dem nästa, men kom ihåg att det finns undantag från dessa allmänna riktlinjer, beroende på vilken roll typografi har i vad du kommer att göra.
Som när ord hamnar isolerade. Vare sig det är i slutet av ett stycke eller i början av en textkolumn. Det ser riktigt fult ut och de fick till och med ett namn - föräldralösa och änkor - jisses. Men i all rättvisa är det inte så lätt att undvika dessa när man arbetar med responsiv design, så det finns bara så mycket som kan göras. Detsamma gäller för ”trasor” och en massa andra fula namngivna typografiska situationer som jag inte tyckte var nödvändigt att nämna.
Ett annat tydligt ”gör” eller ”gör inte”, den här gången lättare att kontrollera, är teckenavstånd, det här är utrymmet mellan tecken. Gör det för hårt eller för långt och läsbarheten i lång text kommer tydligt att äventyras.
Redan kort text eller skärmar kan dra nytta av viss stilisering, beroende på vilken stämning du letar efter.
Vad du än gör ska du dock inte förvränga din text manuellt. Behöver du en horisontellt bredare text? Slå upp ”utökade” typsnitt. Högre, mer påverkande typsnitt är vad du saknar? Välj ”kondenserade” typer, det finns mycket att välja mellan.
Men när du manuellt snedvrider ett typsnitt blir alla storlekar inom karaktären oproportionerliga och resultatet blir bara hemskt.
Detsamma gäller för att vinkla ditt typsnitt för att få en ”kursiv” effekt. Det slutar inte alltid med att det ser dåligt ut, men det finns gott om bra alternativ.
Det finns väldesignade kursiva teckensnitt, som inte bara består i att vinkla ett befintligt typsnitt. De har sin egen uppsättning proportioner som säkerställer att dess läsbarhet bibehålls och att den fortfarande kan användas tillsammans med sin vanliga version på ett harmoniskt sätt.
Det finns mycket mer att säga och mycket mer att lära sig. Men, på samma gång, dessa är ganska mycket de mycket nödvändiga grunderna för att förstå vad man ska leta efter när man omvandlar typografi till kod.
Nästa gång du gör front-end kommer du att ha rutinen mer eller mindre uttänkt:”Textomvandling?” Kontrollera. ”Teckenavstånd?” Kontrollera. ”Linjehöjd?” Kontrollera. ”Är detta en serif eller sans-serif?” Nu vet du. ”Vänta en sekund, det här är lite konstigt, ska det här typsnittet användas i en meny?” För tidigt, för tidigt.
Ytterligare läsning: Linjelängds läsbarhet; Linjeavstånd; En kraschkurs i typografi: Grunderna för typ; En snabbkurs i typografi: stycken och specialtecken.
Vid Imaginärt moln vi har ett team av experter på UI och UX design. Om du tror att du kan använda lite hjälp med design, skicka oss en rad här!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Jag är UI & produktdesigner, illustrationskonstnär och målare. Känd för min kärlek till skräpiga strandhanddukar, musikproduktion, typografi och alla typer av pizza.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
