Share
Alle tenkelige trekk ved typografi kan henvises til ved navn. Enten du snakker om selve skrifttypen, eller arrangementet av typen i et layout, er det en enorm ordliste som kan hjelpe deg med å beskrive ting riktig. La oss ta en titt på elementene i typografi som er viktige for deg, som webdesigner.
Det er to viktige aspekter ved typografi som direkte angår webdesignere:
Det er derfor ganske viktig at du kan artikulere (til klienter eller lagmedlemmer) dine typografiske meninger og beslutninger. Vi kommer ikke til å bekymre oss med minutiae av ballterminaler og tittles, men i stedet la oss diskutere typografiens anatomi som det er viktig for webdesignere.
Enkelte grunnleggende typografiske egenskaper kan manipuleres med CSS. For eksempel, kanskje viktigst, den font-family.
Du vil ofte høre diskusjon om definisjonen av font mot skriftsnitt, så det er viktig at du vet forskjellen. En skrifttype er den oppsamlede samlingen av brevformularer; Tradisjonelt fysiske blokker brukt i utskrift, i dag også inkludert digitale filer. Det er leveringsmekanismen.
Et skrift er det som designer skaper; designet. Jeg likte alltid sammenligningen med musikk; du kjøper en CD (altså, vi kommer tilbake et par år her) som leveringsmekanisme for å lytte til musikken. Du hører ikke på CDen. Det er en lignende situasjon som med å velge skrifter for å gjøre bruk av skrifter de leverer.
Gjennom CSS kan vi bestemme våre foretrukne skrifttypefamilier, i rangordning. Dette er det vi kaller font stack.
Vi kan også manipulere font-vekt gjennom stilark. Vekt er måten vi beskriver den relative tykkelsen på et tegns slag.
Mange skrifttyper er produsert med en rekke vekter, mest enkelt beskrevet som lys, regelmessig, bok, ekstra fet, med en rekke varianter dessuten. Nærmere bestemt kan vi bestemme vekten av et skrifttype ved hjelp av TrueType-skalaen, som går fra 100 til 900 (400 er det vi vanligvis refererer til som vanlig).
Fonter bør ideelt sett produseres med faktiske vektvarianter, numeriske eller navngitte, for å bli styrt gjennom CSS: font-weight: 300;, font-weight: bold;. Når en skriftvariant ikke er tilgjengelig, vil nettlesere ofte ha en tur til å gi vekten selv, men resultatene kan være mindre enn optimale.
Stor bokstav og små bokstaver referer til majuscule og små bokstaver. Begrepet sak stammer fra skuffene som brukes i letterpress utskrift (store bokstaver som inneholder store bokstaver, små bokstaver holder ... du får bildet).
Vi kan tilsidesette saken (hvis vi vil) via CSS ved hjelp av text-transform: store bokstaver; for eksempel.
Selv om vi bruker temaet, er det noen ganger (spesielt i mindre størrelser) anbefalt å øke avstanden mellom tegnene for å forbedre lesbarheten. Når det gjelder CSS, refererer vi til dette som avstand mellom bokstavene og det kan uttrykkes som en positiv eller negativ verdi, vanligvis målt i hundrevis av en em.
I tradisjonelle termer refererer vi til brevavstand som sporing. Sporing påvirker karaktertetthetet overalt innenfor en gitt linje eller tekstblokk. Begrepet stammer (som med mange typografiske termer) i den svingete alder av typeetting, spesielt fotosats, i hvilke figurer ble projisert på film gjennom en linse. Plassen rundt hvert tegn vil bli endret ved å bevege et prisme langs et spor, derav sporing.
CSS-eiendommen ord-spacing kan også hjelpe deg her ute. Forutsigbart vil endringen av ordavstandsverdien se mellomrom mellom ord vokse og krympe, og ha en betydelig innvirkning på lesbarheten.
Spill med bokstavs- og ordavstandsverdiene som brukes på følgende tekstblokk og se selv hvordan lesbarheten påvirkes.
Ofte forvirret med sporing er kniping. Kerning refererer til justering av avstand mellom bestemte brevformer (ikke en hel gruppe tegn), igjen, for å forbedre lesbarheten.
EN proporsjonale font (i motsetning til a monospace skrifttype, hvis karakteravstand er ensartet) vil gi kvoter for bestemte tegnpar som trenger ekstra hjelp til å visuelt sitte ved siden av hverandre.
For eksempel, store bokstaver V og EN, Når de plasseres sammen, vil de vanligvis trenge redusert for å bekjempe det ekstra visuelle rommet mellom dem.
Igjen, vi har old-school typesetting å takke for begrepet, tilbake når typen ble kastet som metallblokker. Kern refererer til hakk laget i en tegnblokk, som vil tillate det å spalte inn i en tilsvarende blokk. Plasseringen av disse mannlige / kvinnelige hakkene hindrer at feilaktige tegn plasseres ved siden av hverandre.
Når det er sagt, kerning er en prosess assosiert med typesetting for print og er ikke lett omfavnet av webtypografi. Det finnes JavaScript-verktøy, for eksempel kerning.js, som kan hjelpe designere til å manipulere sin type på en per-tegnings basis, men CSS har ikke tatt opp ennå.
Når det gjelder CSS, er det et forslag til eiendommen font-kniping i verkene, men selv dette er begrenset i hva det kan gjøre for en typografisk designer.
Angir egenskapen (ikke-standard) tekstgjenvinning: optimizeLegibility; vil forbedre ting i noen moderne nettlesere, ved å forbedre kerning på anerkjente tegnpar. Som med font-kniping, Dette gir ikke så mye kontroll som en hjelpende hånd. Det vil også utløse bruken av ligaturer hvor tilgjengelig i en skrift, som leder meg pent til å ...
Ligaturer tar kerning til neste nivå, og tilbyr erstatningsgaller for bestemte tegnpar. I noen tilfeller vil tegnene ikke samsvare veldig bra, uansett hvor fint de er arrangert, i hvilket tilfelle en ligatur kan utformes. Et klassisk eksempel er små bokstaver f og Jeg.
Her er du kjent med; gjenkjenne dette?
Ampersand er faktisk en ligatur i opprinnelse, som vi har blitt vant til å bruke i stedet for et (betyr "og" på latin / fransk).
I andre tilfeller kan ligaturer være nødvendige for visse språklige rariteter (den tyske ß er muligens den mest kjente av disse) og noen ganger også rent for dekorasjon. Sistnevnte refererer vi til som Diskretionære ligaturer, slik som hvor a c og a t slå sammen.
Hvor du har større kontroll over innholdet på en nettside, kan du bruke Unicode eller HTML-enheter til å vise ligaturer. For eksempel fi vil sortere deg ut med "fi" vi snakket om. Hvis du heller vil ha JavaScript, kan du hjelpe deg med at ligature.js kan gjøre trikset, selv om det ikke er bombe-bevis.
Når du bruker CSS for å hjelpe deg, kan du lene deg på tekstgjenvinning: optimizeLegibility som vi nevnte, eller du kunne bruke den foreslåtte font-variant-ligaturer som har en rekke verdier som Common-ligaturer, sørge for at ligaturer vises når det er mulig. Nettleserstøtte er ufullstendig for øyeblikket, men det er absolutt verdt å holde øye med.
Som vi skal diskutere om et minutt, kan forandringene i et skriftsted påvirke mengden vertikal plass mellom hver linje. Det er derfor tilrådelig å vurdere linjehøyde spesifikk for skrifttypen som brukes og justeres tilsvarende. For lite vertikal plass fører til at en teksttekst blir trangt og gjør det vanskelig for øyet å spore tilbake til begynnelsen av neste linje.
For mye plass og lesing blir like vanskelig.
Bruk av relative målinger er alltid tilrådelig i webdesign, spesielt når det gjelder typografi. Linjens høyde skal alltid være en funksjon av skriftstørrelsen! Ved hjelp av eMS å definere linjestørrelse vil bety at den alltid er i forhold til skriftstørrelsen. Ta en titt på dette eksemplet og se hvordan lesbarhet påvirkes av de endrede verdiene:
I tradisjonelle termer refererer vi til avstanden mellom linjer (ikke forveksles med selve linjens høyde) som ledende, såkalt på grunn av de fysiske stripene av blymetall som ble brukt i trykkpresser for å øke og redusere vertikal avstand.
I dag, når linjehøyde beregnes, halvledende er lagt til både topp og bunn av tegnene. For eksempel vil en skriftstørrelse på 36px, med en linjehøyde på 54px (1.5em) resultere i 9px av plass lagt til under tegnene og 9px over. I virkeligheten sentrerer dette vertikalt tekst innenfor sin linje.
Flytter sammen med vår CSS-kontrollerte typografiske anatomi, kommer vi til berettigelse; justeringen av teksten. I vårt diagram er teksten justert til venstre, men det kan være rettet mot høyre, sentrert eller (når det gjelder tekstblokker større enn en linje) berettiget. Styling via CSS er gjort med tekstjusteringsegenskapen, for eksempel text-align: center;.
Fullstendig begrunnet tekst fjerner det som kalles ragged edge...
... men kan forårsake en ekkel ettersmak i form av elver eller kanaler vises i kroppen din tekst.
I en verden av væskeoppsett, hvor bredden av en teksttekst kan være vanskelig å peke på, bør rettferdig tekst brukes med forsiktighet.
Å velge skrifttyper kan være tøft. Uansett om du ser spesifikt på overskrifter, kropps tekst, blokksedler osv., Er det mange faktorer som kan spilles. La oss se på noen grunnleggende aspekter ved typografisk anatomi som er verdt å ta hensyn til.
Først opp, har vi å gjøre med a serif skrifttype, eller a sans serif? Serifs er de ekstra slagene som avslutter et hovedslag. Skrifter som Arial har ikke disse slagene, de er sans-serif (en annen fransk leksjon for deg der ...)
Serifs sies å hjelpe strømmen av brevformer, bindende kohesive ord sammen, hjelper øyet over teksten og gjør lesing lettere. Noen ganger kan de imidlertid komplisere et skrifttype, noe som forårsaker leserens trøtthet og derfor faktisk hindrer lesbarhet. Argumentet har vært aktuelt i flere tiår, og ingen konkrete bevis har noensinne blitt presentert for en av de to som er mer lesbare.
I noen tilfeller kommer skrifttyper noen ganger i serif og sans-serif smaker (som ParaType's PT, så du har den luksusen du vil velge som du finner foretrukket.
Har nevnt lesbarhet, Det er bare rettferdig, jeg skiller det raskt fra lesbarhet. Vi bruker lesbarhet når vi snakker om de finere detaljene i typografi; evnen til å gjenkjenne individuelle bokstaver og ord. Lesbarhet tar på seg en mer funksjonell rolle, knyttet til det praktiske for en leser å kunne absorbere en teksttekst.
Lesbarhet er åpenbart veldig viktig. Av denne grunn er det lurt å ta x-høyde i betraktning. X-høyden av typen beskriver høyden (ta en titt på x av et bestemt ansikt), fra grunnlinje til toppen av små bokstaver. Typer med relativt stor x-høyde pleier å være lesbare, spesielt i mindre størrelser.
Større x-høyde kommer på bekostning av nedadgående og ascenders, som blir logisk kortere i forhold. Dette kan føre til visuelt mindre plass mellom linjer, som vi snakket om for et øyeblikk siden.
Jeg er ikke sikker på hvordan jeg har nådd dette langt uten å spesifisere en brevform hjerneslag. Hvis det er et begrep som er nyttig i å beskrive personligheten til et skrifttype, er det det. Strekningen av en gitt brevform kan være horisontal, vertikal, diagonal, jevn buet - og avhengig av berørt slag kan det også ha et mer spesifikt navn.
Hovedslaget (vanligvis oppreist og tungt) innenfor en bokstavform er referert til som stilk, forlater begrepet hjerneslag å da bety en av sekundær prominens. Den horisontale streken på toppen av en stor bokstav T kalles en væpne, Det som du finner å bygge bro over gapet i en stor bokstav A eller H er a Bar, listen fortsetter ...
Strokes innen en brevform, spesielt i serif skrifttyper, kan variere i stil og vekt også; en hårfestet å være den tynneste en til stede.
Deretter vil enkelte slag, spesielt kurver, ha varierende vekt langs egen lengde. Dette kalles modulasjon. Denne variasjonen balanserer den totale vekten av et tegn og unngår spesielt tunge områder hvor to slag går sammen.
Dårlig slagmodulasjon vil ofte resultere i en klumpete, tung brevform i forhold til andre i settet. David Kadavy refererer til denne balansen som jevnhet i tekstur og er ofte et mål for kvalitet i et veleksemplert skrifttype. Ta en titt på en teksttekst, så slør øynene dine for å få et inntrykk av overaltekstur.
Det er tusener av ordliste og adjektiver for å få tak i om du vil beskrive typografiske saker riktig. Vi har dekket noe av det grunnleggende her, og jeg håper minst noen av dem er nye tillegg til ditt ordforråd! Prøv tilfeldig å kaste en inn i samtalen neste gang du blir introdusert til noen nye - de vil være veldig imponert ...
Accentsconagua