Den ultimative guide til typografi: punktstørrelse, store og små bogstaver, em og en bindestreger og mere

Typografi er et felt, der beskæftiger sig med det skrevne ord, og hvordan bogstaver og tegn præsenteres.

De samme bogstaver kan designes på forskellige måder for at formidle forskellige følelser. Og der er alle mulige afvejninger omkring stil versus læsbarhed.

I denne artikel vil vi se på nogle af de mindre - men stadig vigtige - detaljer relateret til typografi som punktstørrelse, store og små bogstaver, em vs en bindestreger, kerning og mere.

Punktstørrelse

Punktstørrelsen er en måde at introducere standardisering til typografi på. Punktstørrelsen er den mindste måleenhed.

I metaltype refererer punktstørrelse til højden af ​​det metallegeme, som et skrifttypes karakter er støbt på. I digitale skrifttyper erstattes metallegemet med en usynlig kasse kendt som em-firkanten . Hver karakter passer ind i den em-firkant eller em-boksen. Den em størrelse med en skrifttype er lig med dens punktstørrelse.

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

Punktstørrelsen bruges også til at måle ledende (linjehøjde), linjelængde og andre elementer bortset fra skriftstørrelse.

I digitale skrifttyper er et punkt lig med 1/72 tomme . Tolv point udgør en pica. Seks picas udgør en tomme. En almindelig måde at repræsentere picas og point er som følger:

  • 1 pica = 1p
  • 1 point = 1 point eller p1
  • 6 picas og 3 point = 6p3
  • 7-punkts Open Sans med 9 point førende = 7/9 Open Sans

Den optimale punktstørrelse for udskrivning er normalt mellem 10-12 point, mens den for web er den optimale punktstørrelse mellem 15-25 point.

I CSS skal du indstille skriftstørrelse i ems eller rems end pixels, da førstnævnte er skalerbar i naturen. For nylig har der været meget snak om væsketypografi ved hjælp af de nyligt introducerede enheder vw og vh.

Lær mere om det her: Væsketypografi

Husk, at forskellige skrifttyper, der er indstillet til samme punktstørrelse, ikke ser ud til at være af samme størrelse på grund af deres individuelle egenskaber, nemlig — x-højde, stregmodulation eller kontrast og tegnbredde.

Store og små bogstaver

Store bogstaver (UC) kaldes alternativt store og små bogstaver. Det er et skrifttype med større tegn. Lille bogstav (LC) er et skrifttype med små tegn. Så længe der ikke trykkes på shift-tasten, og Caps lock ikke er aktiv, er alt, der er skrevet, med små bogstaver. Store bogstaver og små bogstaver er ofte synonymt med Majuscule og Minuscule.

Mange sprog har to forskellige skriftlige repræsentationer af deres bogstaver, store og små bogstaver , også kendt som majuscule og minuscule former.

Store og små bogstaver blandes ofte i det samme stykke tekst. Brugen af ​​sager bestemmes af grammatik, men der findes også en række forskellige sager. Visse sagsformer er almindelige i computerprogrammering, kaldet navngivningskonventioner, som CamelCase og snake_case.

Store bogstaver:

ABCDEFGHIJKLMNOPQRSTU VWXYZ

Små bogstaver:

abcdefghijklmnopqrstu vwxyz

Store bogstaver er vigtige af følgende grunde:

  • Adgangskoder: adgangskoder er store og små bogstaver, så store bogstaver tilføjer et ekstra sikkerhedsniveau.
  • Målinger: Når der er tale om computermåling og andre målinger, er store bogstaver vigtige for at identificere den nøjagtige type måling. For eksempel er “Mb” (kort for Megabit) og “MB” (kort for Megabyte) to forskellige målingstyper med forskellige værdier.
  • Kommandoer
  • Filnavne, kataloger og stier.

Ems og Ens

Ems og Ens er en form for tegnsætningstegn kaldet 'bindestreg'. Selvom de ligner en bindestreg, tjener de forskellige formål.

Em Dash

Brug en Em-streg til at betegne et brud i sætningen. Udskift det med et komma eller for at betegne en pause i en sætning. De bruges også til at tildele et citat til en højttaler. Et em-strejf er et em bredt - bredden af ​​et punktstørrelse på et skrifttype. Sæt ikke mellemrum før og efter et em dash.

For eksempel: Støj fra naboens hus - det dræber mig.

  • Kommando til et Em dash på en mac: Skift-Option-bindestreg
  • Kommando til et em-strejf i Microsoft Word: Alt + Ctrl + (minus)
  • Em dash i HTML: eller

En Dash

Brug en En-streg som erstatning for ordet 'til' eller for at betegne en række tal. En En dash er halvdelen af ​​bredden af ​​en Em dash. Sæt ikke mellemrum før og efter en en dash.

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

  • Kommando til en bindestreg på en mac: Option-bindestreg
  • Kommando til en bindestreg på Microsoft Word: Ctrl + (minus)
  • En bindestreg i HTML: eller

Kerning og sporing

Kerning henviser til afstanden mellem to individuelle tegn i et ord.

Sporing henviser til afstanden mellem ord.

Nogle skrifttyper er ikke designet til at blive kernet eller spores for løst og omvendt. Hvis man kerner eller sporer for stramt eller for løst, risikerer de at ofre læsbarhed og læsbarhed.

Når du beslutter, hvor tæt eller løs til kernen eller sporer din tekst, anbefales det først at overveje skalaen, hvormed teksten skal interageres med. Hvis det skal udskrives, hvor langt væk fra den udskrevne tekst vil seeren være? Kører de forbi? Vil den læses på en baggrundsbelyst skærm?

Man skal også overveje den positive og negative grund, når man sporer og kerner. Sporing for tæt eller for løst kan resultere i akavet forhold mellem figur og jord, der distraherer brugeren.

Læsbarhed og læsbarhed

Læsbarhed

Læsbarhed betyder at være i stand til at differentiere forskellige tegn i en tekst. Læsbar tekst antyder, at den let kan fortolkes. Se på de typiske skrifttypers unikke egenskaber, når du overvejer læsbarhed. Nogle af overvejelserne er som følger:

  • Du skal bruge hvert skrifttype i henhold til dets sammenhæng og tilsigtede brug . Se på dets historie, og det er bedst at bruge case-scenarier. For eksempel: Garamond bruges bedst til store teksttekster på tryk, mens Georgien til skærm.
  • Husk, om skrifttypen er til displaytekst eller brødtekst .
  • X-højden på et skrifttype er størrelsen på små 'x' i et skrifttype. Et skrifttype med medium til høj x-højde resulterer i en tekst, der kan læses i selv små størrelser.
  • Konventionelt er serif- skrifttyper mere læselige for brødtekst end deres sans-serif-kolleger.

Læsbarhed

Læsbarhed betyder at arrangere en gruppe af ord eller en tekstblok på en sådan måde at gøre teksten mere tilgængelig. Ideen er at reducere den krævede indsats for at læse en teksttekst.

Stephen Coles bemærker, at læsbarheden ikke kun rejser spørgsmålet om "Kan du læse det?" men om ”vil du læse det?” .

Jason Santa Maria påpeger i sin bog On Web Typography, at læsning ikke er en lineær aktivitet. Vi læser i en frem og tilbage bevægelse kaldet saccades , hvilket er vores øjne, der hopper fra et punkt til et andet. Tekst med velkendte ord gør det også lettere for os at læse. Nogle grundlæggende punkter at huske, når man overvejer læsbarhed, er som følger:

  • Kontrast refererer til ændringen i slagets tykkelse i forskellige dele af brevet. Jo højere kontrast, jo højere ændring i slagtilfælde. Brug skrifttyper med mellem til lav kontrast til lange teksttekster.
  • Linjehøjde refererer til afstanden mellem to tekstlinjer. Du ønsker ikke at gøre tekstblokken hverken for stram eller for løs. Du kan kontrollere liniehøjde i CSS ved hjælp af egenskaben 'linjehøjde'. For de fleste tekster kan du indstille den mellem 1,2 og 1,5 (uden enheder).
  • Linjelængde (mål) refererer til det gennemsnitlige antal tegn i en tekstlinje. En stor linjelængde forhindrer læsbarheden ved at gøre det vanskeligt for vores øjne at scanne teksten. Normalt er cirka 45-75 tegn pr. Linje optimal for en teksttekst. Hvis du planlægger at øge linjelængden ud over det, skal du også sørge for at øge liniehøjden, så der er plads nok mellem to tekstlinjer. I CSS kan du indstille bredden på containeren, og ved at bruge em-enheden kan du komme tæt på et sæt antal tegn afhængigt af skrifttypens bredde-til-højdeforhold. Eksempel: bredde: 35em;
  • Sporing refererer til at justere afstanden mellem tegn i en tekst. Tilføjelse af sporing betyder at tilføje hvidt mellemrum mellem tegn og omvendt. Ved små skriftstørrelser, dvs. mindre end 10 punkter, hjælper tilføjelse af sporing med at forbedre læsbarheden. På samme måde skal du bruge negativ sporing til store overskrifter for at bringe bogstaverne nærmere. Du kan kontrollere sporing i CSS via egenskaben 'bogstavafstand'. For eksempel: bogstavafstand: 0,05 em;
  • Skriftstørrelse henviser til størrelsen på den skrifttype, der bruges i en tekst. For mobilvisning skal du bruge størrelser på mindst 12 pixel. Du kan kontrollere skrifttypestørrelse i CSS via egenskaben 'skriftstørrelse'. Eksempel: skriftstørrelse: 48 px;

Som du kan se, skal du tage højde for mange faktorer for at sikre optimal læsbarhed og læsbarhed. Husk, der er ingen hårde og hurtige regler for nogen af ​​de ovenfor beskrevne faktorer. De er blot retningslinjer, der kan hjælpe dig med at træne dit typografiske øje bedre.

Farve og tonværdi

I farveteori produceres en tonværdi ved at tilføje hvid, grå eller sort til en valgt farve. Dette ændrer ikke nuance, men ændrer farvefuldhed, også kendt som mætning. Når man diskuterer toneværdi, er der tre hovedtermer, der skal diskuteres: Tint, Tone og Shade.

Farvetone er tilføjelsen af ​​hvid til en farve. Farvetone kan bruges til at fremhæve et område samt begynde at skabe en illusion af dybde på et objekt.

Tone er tilføjelsen af ​​grå til en farve. Tonefarven skaber en mere dæmpet og mindre mættet farve.

Skygge er tilføjelsen af ​​sort til en farve. Skygge kan bruges til at blive mørkere og areal for at skabe en illusion af dybde på et objekt.

Ved at ændre en toneværdi i farver kan du skabe illusionen om dybde i billeder samt ændre mætningsniveauet for bedre at anvende farve til en ønsket følelse eller stemning.

Mere om typografi:

  • Typografi: bogstavformers anatomi
  • 8-punkts gitter: typografi på nettet
  • Hvorfor typografi kan skabe eller ødelægge dit design