Ultimate Guide to Typography: Point Size, Upper vs Small Case, Em and En Dashes og mer

Typografi er et felt som tar for seg det skrevne ordet og hvordan bokstaver og tegn presenteres.

De samme bokstavene kan utformes på forskjellige måter for å formidle forskjellige følelser. Og det er alle slags kompromisser rundt stil versus lesbarhet.

I denne artikkelen vil vi se på noen av de mindre - men likevel viktige - detaljene relatert til typografi som punktstørrelse, store og små bokstaver, em vs en bindestreker, kerning og mer.

Punktstørrelse

Punktstørrelsen er en måte å introdusere standardisering til typografi. Punktstørrelsen er den minste måleenheten.

I metalltype refererer punktstørrelsen til høyden på metallkroppen som en skrifttegn er støpt på. I digitale skrifter blir metallhuset erstattet av en usynlig boks kjent som em-firkanten . Hver karakter passer inn i den em kvadratet eller em-boksen. Den em størrelse på en skrift er lik dens punktstørrelse.

html{ font-size:16px; } body{ font-size:1em; // 1em is equal to 16px }

Punktstørrelsen brukes også til å måle ledende (linjehøyde), linjelengde og andre elementer, bortsett fra skriftstørrelse.

I digitale skrifter er ett punkt lik 1/72 av en tomme . Tolv poeng gir en pica. Seks picas gjør en tomme. En vanlig måte å representere picas og poeng på er som følger:

  • 1 pica = 1p
  • 1 poeng = 1 poeng eller p1
  • 6 picas og 3 poeng = 6p3
  • 7-punkts Open Sans med 9 poeng ledende = 7/9 Open Sans

Den optimale punktstørrelsen for utskrift er vanligvis mellom 10-12 poeng, mens den optimale punktstørrelsen for web er mellom 15-25 poeng.

I CSS bør du angi skriftstørrelse i ems eller rems enn piksler, da den tidligere er skalerbar. Nylig har det vært mye snakk om flytende typografi ved å bruke de nylig introduserte enhetene vw og vh.

Lær mer om det her: Væsketypografi

Husk at forskjellige skrifttyper satt med samme punktstørrelse ikke ser ut til å være av samme størrelse på grunn av deres individuelle egenskaper, nemlig x-høyde, strekmodulering eller kontrast og tegnbredde.

Store og små bokstaver

Store bokstaver (UC) blir alternativt referert til som kapsler og kapital. Det er et skrift med større tegn. Små bokstaver (LC) er et skrift med små tegn. Så lenge du ikke trykker på skift-tasten og Caps lock ikke er aktiv, er alt som skrives med små bokstaver. Store og små bokstaver er ofte synonymt med Majuscule og Minuscule.

Mange språk har to forskjellige skriftlige fremstillinger av bokstavene, store og små bokstaver , også kjent som majuscule og minuscule former.

Store og små bokstaver blandes ofte i samme tekstbit. Bruk av saker avgjøres av grammatikk, men det finnes også en rekke saksstiler. Visse sakstil er vanlige i dataprogrammering, referert til som navnekonvensjoner, som CamelCase og snake_case.

Stor bokstav:

ABCDEFGHIJKLMNOPQRSTU VWXYZ

Små bokstaver:

abcdefghijklmnopqrstu vwxyz

Store bokstaver er viktige av følgende årsaker:

  • Passord: passord er store og små bokstaver, så store bokstaver gir et ekstra sikkerhetsnivå.
  • Målinger: Når du arbeider med datamåling og andre målinger, er store bokstaver viktig for å identifisere den nøyaktige typen måling. For eksempel er "Mb" (kort for Megabit) og "MB" (kort for Megabyte) to forskjellige typer målinger med forskjellige verdier.
  • Kommandoer
  • Filnavn, kataloger og stier.

Ems og Ens

Ems og Ens er en form for skilletegn som kalles 'dash'. Selv om de ser ut som en bindestrek, tjener de forskjellige formål.

Em Dash

Bruk en Em-dash for å betegne en pause i setningen. Erstatt det med et komma eller for å betegne en pause i en setning. De brukes også til å tilskrive et sitat til en høyttaler. En strek er en bredde - bredden på en punktstørrelse på et skrift. Ikke sett mellomrom før og etter et em dash.

For eksempel: Støyen fra naboens hus - det dreper meg.

  • Kommando for en Em dash på en mac: Skift-alternativ-bindestrek
  • Kommando for en Em dash på Microsoft Word: Alt + Ctrl + (minus)
  • Em dash i HTML: eller

En Dash

Bruk en En dash som erstatning for ordet 'to' eller for å betegne en rekke tall. En En dash er halv bredden av en Em dash. Ikke plasser mellomrom før og etter en dash.

For eksempel: Den første verdenskrig varte fra 1914–1918.

  • Kommando for en En dash på en mac: Option-bindestrek
  • Kommando for en strek på Microsoft Word: Ctrl + (minus)
  • En dash i HTML: eller

Kerning og sporing

Kerning refererer til avstanden mellom to individuelle tegn i et ord.

Sporing refererer til avstanden mellom ord.

Noen skrifttyper er ikke designet for å kjernes eller spores for løst og omvendt. Hvis man hakker eller sporer for tett eller for løst, risikerer de å ofre lesbarhet og lesbarhet.

Når du bestemmer deg for hvor tett eller løs å kjerne eller spore teksten din, anbefales det å først vurdere skalaen som teksten skal samhandles med. Hvis den skal skrives ut, hvor langt borte fra den trykte teksten vil betrakteren være? Vil de kjøre forbi? Vil den leses på en bakgrunnsbelyst skjerm?

Man bør også vurdere den positive og negative grunnen når man sporer og kerner. Å spore for tett eller for løst kan resultere i vanskelige figur- / bakkeforhold som vil distrahere brukeren.

Lesbarhet og lesbarhet

Lesbarhet

Lesbarhet betyr å kunne differensiere forskjellige tegn i en tekst. Lesbar tekst innebærer at den lett kan tolkes. Se på de unike egenskapene til et skrift når du vurderer lesbarhet. Noen av hensynene er som følger:

  • Du bør bruke hvert skrift i henhold til kontekst og tiltenkt bruk . Se på historien, og det er best å bruke scenarioer. For eksempel: Garamond brukes best til store teksttekster på trykk mens Georgia for skjerm.
  • Husk om skrifttypen er for displaytekst eller brødtekst .
  • X-høyden på et skrift er størrelsen på små bokstaver 'x' i et skrift. Et skrift med middels til høy x-høyde resulterer i en lesbar tekst i selv små størrelser.
  • Vanligvis er serif- skrifttyper mer lesbare for brødtekst enn deres kolleger uten sans-serif.

Lesbarhet

Lesbarhet betyr å ordne gruppe av ord eller tekstblokker på en slik måte at teksten blir mer tilgjengelig. Tanken er å redusere den innsatsen som kreves for å lese en teksttekst.

Stephen Coles bemerker at lesbarhet ikke bare stiller spørsmålet om "Kan du lese det?" men om "vil du lese den?" .

Jason Santa Maria påpeker i sin bok On Web Typography at lesing ikke er en lineær aktivitet. Vi leser i en frem og tilbake bevegelse kalt saccades , som er øynene våre hopper fra et punkt til et annet. Tekst med kjente ord gjør det også lettere for oss å lese. Noen grunnleggende punkter du må huske når du vurderer lesbarhet, er som følger:

  • Kontrast refererer til endringen i slagets tykkelse i forskjellige deler av bokstaven. Jo høyere kontrast, jo høyere endring i hjerneslag. Bruk skrifttyper med middels til lav kontrast for lange teksttekster.
  • Linjehøyde refererer til avstanden mellom to tekstlinjer. Du vil ikke gjøre tekstblokken verken for stram eller for løs. Du kan kontrollere linjehøyde i CSS med egenskapen 'linjehøyde'. For de fleste tekster kan du stille den mellom 1,2 og 1,5 (uten noen enheter).
  • Linjelengde (mål) refererer til gjennomsnittlig antall tegn i en tekstlinje. En stor linjelengde hindrer lesbarheten ved å gjøre det vanskelig for øynene våre å skanne teksten. Vanligvis er omtrent 45-75 tegn per linje optimal for en teksttekst. Hvis du planlegger å øke linjelengden utover det, så vær også forsiktig med å øke linjehøyden slik at det er nok plass mellom to tekstlinjer. I CSS kan du stille inn bredden på beholderen, og ved å bruke em-enheten kan du komme nær et angitt antall tegn, avhengig av skriftens bredde-til-høyde-forhold. Eksempel: bredde: 35em;
  • Sporing refererer til å justere mellomrom mellom tegn i en tekst. Å legge til sporing betyr å legge til hvitt mellomrom mellom tegn og omvendt. Ved små skriftstørrelser, dvs. mindre enn 10 punkter, hjelper det å legge til sporing for å forbedre lesbarheten. På samme måte bruker du negativ sporing for store overskrifter for å bringe bokstavene nærmere. Du kan kontrollere sporing i CSS via 'bokstavavstand' -egenskap. For eksempel: bokstavavstand: 0,05 em;
  • Skriftstørrelse refererer til størrelsen på skriften som brukes i en tekst. Bruk størrelser på minst 12 px for mobilvisning. Du kan kontrollere skriftstørrelse i CSS via 'font-size' eiendom. Eksempel: skriftstørrelse: 48 px;

Som du kan se, må du ta hensyn til mange faktorer for å sikre optimal lesbarhet og lesbarhet. Husk at det ikke er noen harde og raske regler for noen av de ovennevnte faktorene. De er bare retningslinjer som kan hjelpe deg med å trene ditt typografiske øye bedre.

Farge og toneverdi

I fargelære produseres en toneverdi ved å legge hvit, grå eller svart til en valgt farge. Dette endrer ikke fargen, men endrer fargen på fylde, også kjent som metning. Når du diskuterer toneverdi, er det tre hoveduttrykk som må diskuteres: Tint, Tone og Shade.

Fargetone er tilsetningen av hvitt til en farge. Fargetone kan brukes til å markere et område og begynne å skape en illusjon av dybde på et objekt.

Tone er tilsetningen av grå til en farge. Tonefargen skaper en mer dempet og mindre mettet farge.

Skygge er tillegget av svart til en farge. Skyggen kan brukes til å mørkne og området for å skape en illusjon av dybde på et objekt.

Ved å endre en toneverdi i farger, kan du skape en illusjon av dybde i bilder, samt endre metningsnivået for bedre å bruke farge for ønsket følelse eller stemning.

Mer om typografi:

  • Typografi: brevformers anatomi
  • 8-punkts rutenett: typografi på nettet
  • Hvorfor typografi kan lage eller ødelegge designet ditt