Front-end-udvikling er en vanskelig forretning, og det kan være et meget utaknemmeligt job. En udvikler, der har studeret teknik eller datalogi, gør denne form for kode let, men i slutningen af det er der altid alt for mange detaljer til at rette, og ja, de vedrører ofte typografiproblemer.
Dette er fordi der er en klar uoverensstemmelse mellem designerens forventninger og udviklerens opfattelse af det arbejde, der udføres. Med andre ord ser designeren generelt en masse ting, som udvikleren ikke gør.
Prototyping-apps har bestemt hjulpet med forståelsen af sidernes struktur, og nogle har endda hjulpet med at forstå, hvilken slags bevægelsesovergange eller interaktioner vi har brug for. Sketch har for eksempel helt sikkert hjulpet designeren med at levere al information til udvikleren: fra størrelser, til skrifttyper, til farvekoder, det hele er der.
Og alligevel ser designeren på det arbejde, som udvikleren har produceret, og rettelserne begynder at hælde:“Denne skrifttype har ikke den rigtige vægt“,“Denne titel skal være store bogstaver“,“Tegnafstanden er forkert“, og så videre.
Baseret på min erfaring, De fleste af de rettelser, der foretages, er tekstrelaterede. Alt andet er mindre teknisk og mere forståeligt på et grundlæggende empirisk niveau, men ikke typografi.
Der er meget ved det, hele kurser dedikeret til dets design og brug, så det er meget usandsynligt, at man bare vil se på skrifttypen og straks vide, hvad man skal gøre ved den, for at få den til at se ud, hvilken specifik måde designeren har besluttet sig for.
Derfor besluttede jeg at lave et typografi-værksted.
Før jeg går ind på nogen af forklaringerne, er det vigtigt at forstå, hvordan brevet fungerer, hvad er dets forhold til dets kammerater, og hvordan påvirker det ordet, sætningen og afsnittet.
Grundlæggende forestillinger, der er gode at have og gør det lettere at tale om typografi:
1.2. Typografiens anatomi
En bogstavform vil dele fælles egenskaber med sine stipendiater inden for samme skrifttype. Disse egenskaber er baseret på størrelser og proportioner af de samme grundlæggende anatomiske træk, der vedrører alle vestlige tegn.
Jeg troede, det ville være interessant at liste dem, men ikke med den hensigt at få dem husket, fordi navngivningen ikke gør det
meget af en forskel i det daglige liv for enten den grafiske designer eller udvikler.
Jeg viser dem for at vide, hvad de skal kigge efter, når man prøver at sammenligne skrifttyper og for bedre at forstå de mange funktioner, forskellige skrifttyper kan have, baseret på deres anatomi.
Baseret på disse tekniske/strukturelle træk, fortolkningsdefinitioner eller endda historisk kontekst er der klassifikationer for type. Her er nogle:
De mest almindeligt anvendte og relevante kodemæssigt er de berømte Serif og Sans-Serif. Årsagen til, at disse to er den vigtigste sondring, der skal foretages, er fordi dens kernedefinerende funktion er objektiv og meget synlig, hvis man ved, hvad man skal kigge efter.
Sans-serif blev oprettet ved at fjerne serif - „sans“, der betyder „uden“. Denne stil tilpasset udskrivning blev skabt for dens klarhed og læsbarhed, hvilket var nyttigt til skærme og reklamer. Plus, det var lettere at udskrive i meget store størrelser.
På den anden side siges Serif-typen at være det bedste valg til lang tekst, såsom den, der findes i bøger eller aviser. Dette kan dog diskuteres, da meget af det, der ville gøre hele denne typefamilie mere læsbar, også kan vende sig mod sig selv, afhængigt af nogle grundlæggende træk ved det enkelte skrifttype - Jeg er ret sikker på, at en Didot, selvom det er et Serif-skrifttype, vil være værre end Lato, for eksempel, for lang tekstlæsbarhed.
Dette skyldes, at Didot har en høj kontrast mellem vandrette og lodrette linjer, hvilket skaber meget støj og „buler“ i læsestrømmen, mens Lato præsenterer en mere jævn andel mellem de forskellige linjer i bogstavet, hvilket gør det til en bedre mulighed end Didot. Det er ikke en perfekt mulighed, men du forstår kernen.
Den vigtige ting at forstå om disse to forskellige stilarter af type for at vide, hvilke der er bedst til hvad, er serifens funktion. Dens funktion er lettere at forstå, hvis man kender sin historie.
Før alt dette, før vi - menneskeheden - overhovedet overvejede at bruge metalstykker til at skabe ord og trykke dem mod papir for at kunne skabe bøger hurtigere. Før vi overhovedet overvejede ideen om en bog, papir eller endda tekst, for den sags skyld, skabte vi allerede billeder til at kommunikere.
Tusinder af års evolution gjorde mere komplekse former for visuel kommunikation til en nødvendighed, derfor alfabeter. Men disse blev ikke født ud af tynd luft, de var resultatet af deres egne mutationer og tilpasninger. Jeg finder historien om bogstavet „A“ et meget ligetil eksempel på, hvordan de fleste breves udvikling blev til.
Forskellige civilisationer kom og gik, betydninger og lyde blev etableret - nogle muterede, nogle gjorde det ikke - og okse-/kohovedet blev i stigende grad forenklet, roteret, geometrisk perfektioneret af romerne for at blive hugget på monumenter, skrevet og pyntet af munke, håndforvrænget for hurtigere og bedre flydende skrivning og til sidst plukket op af typografer.
Så for at genoptage: Serifens oprindelige fødsel kom fra behovet for hurtig skrivning og forbindelse mellem forskellige bogstaver. Da læsning blev en ting for mere end kontoristen og monarkiet - var bedre læsning også et krav, og det var da Serif begyndte at blive brugt til det formål. Nu ved du det.
Så kom typografien.
Da der var en øget bevidsthed om skrifttypens læsbarhed, dets brug og disposition var også et mål for mere opmærksomhed og forsigtighed.
3.1. Linjeafstand
Noget så grundlæggende som linjeafstanden - som er direkte påvirket af skrifttypen og dens størrelse - vil påvirke hele siden. Oprettelsen af gittersystemer hjalp med at konsolidere regler, der gør det let for enhver designer at skabe læsbar tekst og afbalancerede sider.
Linjeafstand - linjehøjde i CSS - er forresten den lodrette afstand mellem forskellige tekstlinjer. Denne afstand kan være navnet på ethvert tekstområde, fordi hvis du gør det for lille eller for stort, vil det resultere i, at du springer over linjer eller læser dem igen og igen (alle har været der, og nej, det er ikke din skyld).
Der er en optimal størrelse for denne afstand, som normalt er mellem 120% og 145% af tekststørrelsen. Men bare hvis du selv har brug for at finde ud af en løsning, kan du huske på følgende:
Prøv at tegne en imaginær linje over midten af linjerne uden at støde mod nogen nedadgående eller opstigende. Hvis det går igennem, rent, det burde være godt.
Husk også længden af linjerne i det følgende billede. Modulerne, der blev bygget ud fra linjehøjderne, er normalt ret små sammenlignet med størrelsen på skrifttypen, ikke ved en tilfældighed, men fordi det giver designeren mere fleksibilitet ved organisering af en hel side, hvilket giver mulighed for større eller mindre tekstområder, mens der altid holdes en god, proportional afstand mellem forskellige elementer.
Kortere linjer betyder også bedre læsbarhed.
Der er faktisk en god måling for længden af linjerne, som normalt er omkring 50 til 75 (øverste) tegn, inklusive afstandene. Der er en masse gode grunde til dette:
Linjer, der er for korte, vil tvinge læseren til at bryde strømmen for ofte, ved at skulle gå tilbage, når du skifter linje. Dette kan få læserne til også at springe over nogle vigtige ord i slutningen af linjen midt i angsten for konstant at gå frem og tilbage - lyder stressende, ikke? Det er det faktisk.
På den anden side linjer, der er for lange, er sværere at fokusere på, fordi det er sværere at straks se, hvor linjen slutter, skaber angst for at skifte når som helst. Plus, når læseren skifter linje, er det også mere sandsynligt, at han/hun går videre til den forkerte, fordi det er sværere at fortælle, hvor linjen startede i første omgang.
Det viser sig, at læserens fokus er højere, når man starter en ny linje, og det forsvinder, når man går videre, indtil det når slutningen, så der er en meget stram balance at opretholde. Derfor intervallet 50 - 75 tegn som tommelfingerregel.
Samlet set er dette nogle af de vigtigste ting at huske på, hvad læsbarhed drejer sig om. Men hvis du ønsker at have en god kilde til grundlæggende viden om, hvad der kommer til typografisk udtryk, er dokumentaren „Helvetica“ dit valg.
Gennem dokumentaren får du en forklaring på tankeprocessen bag det nye design, der blev udført i 50'erne, og hvordan det skabte en bevidsthed baseret på socialt ansvar - tømmermænd fra 2. verdenskrig. Du får også et glimt af noget af det virkelig interessante design, der blev udført på det tidspunkt, og en introduktion til oprindelsen og formålet med det berømte Helvetica-skrifttype.
Du vil også være i stand til at forstå den skarpe kontrast mellem de reklamer, der blev udført før og efter international stil, og de pragmatiske konsekvenser, det havde på den måde, visuel kommunikation var/udføres på.
Der er en masse andre ting, der er relevante at vide, og jeg vil liste dem næste gang, men husk, at der er undtagelser fra disse generelle retningslinjer, afhængigt af hvilken rolle typografi har i hvad du vil gøre.
Som når ord ender isoleret. Det være sig i slutningen af et afsnit eller i begyndelsen af en tekstkolonne. Det ser virkelig grimt ud, og de fik endda et navn - forældreløse og enker - yikes. Men i al retfærdighed er det ikke så let at undgå disse, når man arbejder med responsivt design, så der er kun så meget, der kan gøres. Det samme gælder for „klude“ og en masse andre grimt navngivne typografiske situationer, som jeg ikke fandt nødvendigt at nævne.
Et andet klart „gør“ eller „gør ikke“, denne gang lettere at kontrollere, er tegnafstand, dette er mellemrummet mellem tegn. Gør det for stramt eller for langt, og læsbarheden i lang tekst vil blive tydeligt kompromitteret.
Allerede kort tekst eller skærme kan drage fordel af en vis stilisering, afhængigt af hvilken stemning du går efter.
Uanset hvad du gør, skal du dog ikke forvrænge din tekst manuelt. Har du brug for en horisontalt bredere tekst? Slå „udvidede“ skrifttyper op. Højere, mere virkningsfuld skrifttype er det, du mangler? Gå efter „kondenserede“ typer, der er masser at vælge imellem.
Men når du manuelt forvrænger et skrifttype, bliver alle størrelser inden for tegnet uforholdsmæssigt store, og resultatet bliver bare forfærdeligt.
Det samme gælder vinkling af dit skrifttype for at få en „kursiv“ effekt. Det ender ikke altid med at se dårligt ud, men der er masser af gode alternativer.
Der er veldesignede kursive skrifttyper, der ikke kun består i at vinkle en eksisterende skrifttype. De har deres eget sæt proportioner, der sikrer, at dets læsbarhed opretholdes, og at det stadig kan bruges sammen med sin almindelige version på en harmonisk måde.
Der er meget mere at sige og meget mere at lære. Men på samme tid er disse stort set de meget nødvendige grundlæggende elementer for at forstå, hvad man skal kigge efter, når man omdanner typografi til kode.
Næste gang du laver front-end, vil du have rutinen mere eller mindre regnet ud:“Teksttransformation?“ Tjek. “Tegnafstand?“ Tjek. “Linjehøjde?“ Tjek. „Er dette en serif eller sans-serif?“ Nu ved du det. „Vent et øjeblik, dette er lidt underligt, skal denne skrifttype bruges i en menu?“ For tidligt, for tidligt.
Yderligere læsning: Læsbarhed af linjelængde; Linjeafstand; Et lynkursus i typografi: Det grundlæggende i type; Et lynkursus i typografi: Afsnit og specialtegn.
Ved Imaginær sky vi har et team af eksperter på UI og UX design. Hvis du tror, du kunne bruge lidt hjælp til design, så send os en linje her!
Fandt du denne artikel nyttig? Du kan måske også lide disse!
Jeg er UI & produktdesigner, illustrationskunstner og maler. Kendt for min kærlighed til skrallede badehåndklæder, musikproduktion, typografi og alle slags pizza.
People who read this post, also found these interesting:
