{"id":257378,"date":"2023-06-03T12:16:00","date_gmt":"2023-06-03T09:16:00","guid":{"rendered":"https:\/\/inform.click\/ultimate-guide-to-web-typography-regler-ordliste-ideer-og-beste-praksis\/"},"modified":"2023-06-03T12:56:00","modified_gmt":"2023-06-03T09:56:00","slug":"ultimate-guide-to-web-typography-regler-ordliste-ideer-og-beste-praksis","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/ultimate-guide-to-web-typography-regler-ordliste-ideer-og-beste-praksis\/","title":{"rendered":"Ultimate Guide to Web Typography: Regler, ordliste, ideer og beste praksis"},"content":{"rendered":"<p>\n  &#8216;Et bilde er verdt tusen ord.'\n<\/p>\n<p>\n  Oftest formidler bilder det de har \u00e5 si. Imidlertid gir et bilde med tekst en sterkere innvirkning.\n<\/p>\n<p>\n  Typografi fungerer som en f\u00f8lgesvenn til grafikken din. Typografi er ikke bare \u00e5 velge en tilfeldig skrifttype og en punktst\u00f8rrelse fra rullegardinmenyen til redigeringsprogramvaren. Det er et spesialfelt innen grafisk design. Det er kunsten og teknikken for \u00e5 arrangere type. Det er en av de viktige ferdighetene som kan skille deg fra resten av designerne hvis du vet hvordan du bruker den.\n<\/p>\n<h5>\n  Hva er typografi?<br \/>\n<\/h5>\n<p>\n  F\u00f8r du g\u00e5r inn i kunsten og teknikken for typografi, m\u00e5 du f\u00f8rst forst\u00e5 hva typografi handler om. Typografi er det visuelle stykke tekst (skrevet ord). En tekst er en rekke ord. Hver eneste visuelt viste tekst du ser er i utgangspunktet typografi. Tekst kan kategoriseres p\u00e5 tre m\u00e5ter &#8211; visuelt, h\u00f8rbart og digitalt.\n<\/p>\n<p>\n  Typografi er mer enn utforming av bokstaver og tegn. Den inkluderer valg av punktst\u00f8rrelse, avstand og linjelengde. Tilbake p\u00e5 den tiden da Johannes Gutenberg introduserte trykkpressen, m\u00e5tte settere ordne bokstaver og tegn i det fysiske rommet. N\u00e5 i datamaskinens tidsalder er denne jobben mye enklere. Du trenger bare \u00e5 finne \u00e5pen kildekode-fonter, ordne bokstaver og tegn, s\u00e5 er du ferdig.\n<\/p>\n<h5>\n  Viktigheten av typografi<br \/>\n<\/h5>\n<p>\n  Typografi er noe du finner absolutt overalt. Si at det kan v\u00e6re smarttelefonen, kaffekoppen, reklametavlen, kluter og mye mer. Typografi er overalt. Valget av skrifttype, bokstav og tegnarrangement avgj\u00f8r hvordan budskapet ditt skal formidles.\n<\/p>\n<p>\n  Selv om det virker som en liten faktor i ditt syn, er det absolutt ikke det. Selv en enkelt type justering kan endre hele utseendet og f\u00f8lelsen til kunstverket ditt. Hvis du noen gang har lagt merke til at Facebook testet en ny font kalt Geneva tilbake i juni 2016. Det var litt tynnere og lettere versjon av den originale Helvetica-fonten. Men forskjellen mellom disse to fontene var merkbar.\n<\/p>\n<p>\n  Regler for typografi\n<\/p>\n<p>\n  I typografi m\u00e5 du velge skrifttype i henhold til layout, rutenett, designtema, fargevalg og s\u00e5 videre. Her er noen typografiregler du b\u00f8r huske p\u00e5 mens du jobber.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-6383048f872f8.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-6383048f872f8.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Velge riktig font<br \/>\n<\/h5>\n<p>\n  Hvis du bruker noen minutter p\u00e5 internett, vil du finne en forbl\u00f8ffende rekke klare til bruk gratis s\u00e5 vel som betalte skrifter. Men det betyr ikke at du m\u00e5 bruke timer p\u00e5 \u00e5 s\u00f8ke etter de n\u00f8yaktige skriftene du visualiserer i tankene dine. Du kan begynne \u00e5 male selv med en begrenset palett. Det er noen f\u00e5 pr\u00f8vde og testede fonter som Helvetica som aldri kan g\u00e5 galt i noe prosjekt.\n<\/p>\n<p>\n  En skrifttype er en form for design som er formet av h\u00e5ndverkere som bidrar med all sin innsats og ferdigheter over en betydelig periode. De profesjonelt utformede skriftene tilbyr en rekke tilpasninger n\u00e5r det gjelder vekter og stiler for \u00e5 skape en komplett familie. Dessuten tilbyr de betydelige kerning-par, st\u00f8tte for flerspr\u00e5klig tilpasning av typeinnstilling.\n<\/p>\n<p>\n  F\u00f8lgende er de viktigste typografiske termene som vurderes:\n<\/p>\n<h5>\n  St\u00f8rrelse<br \/>\n<\/h5>\n<p>\n  Ikke alle skrifttyper er skapt like. Noen bruker fett og brede aspekter mens andre er tynne og smale. Ulike typer skrifttyper kan f\u00e5 ulik plass p\u00e5 siden.\n<\/p>\n<p>\n  H\u00f8yden p\u00e5 karakteren er betegnet som X-h\u00f8yde. N\u00e5r du parer forskjellige skrifttyper, er det en god praksis \u00e5 bare bruke de skrifttypene som har samme x-h\u00f8yde. P\u00e5 den annen side kalles bredden p\u00e5 tegnet som &#8216;sett bredde', som bestemmer hvor mye plass bokstaven skal ta og buffer med andre bokstaver.\n<\/p>\n<p>\n  Punktsystem er metoden som har v\u00e6rt brukt for \u00e5 m\u00e5le type siden 1700-tallet. Et punkt kan m\u00e5les som 1\/72-tommer og 12 punkter kan danne en pica. Pica er enheten for \u00e5 m\u00e5le kolonnebredden. Videre kan st\u00f8rrelsene m\u00e5les i piksler, tommer eller millimeter. Det avhenger av prosjektets krav.\n<\/p>\n<h5>\n  Ledende<br \/>\n<\/h5>\n<p>\n  Det vertikale rommet mellom hver type linje er kjent som ledende. Grunnen til \u00e5 kalle dette som ledende er fordi blyslippene ble brukt til \u00e5 dele tekstlinjene tilbake i tiden da metallsetting ble brukt. Tommelfingerregelen for \u00e5 f\u00e5 en lesbar br\u00f8dtekst er \u00e5 bruke en innledende verdi h\u00f8yere enn skriftst\u00f8rrelsen. Du kan bruke en ledende verdi h\u00f8yere i 1,25 til 1,5 ganger.\n<\/p>\n<h5>\n  Sporing og kerning<br \/>\n<\/h5>\n<p>\n  Kerning er handlingen som involverer justeringer av rommet mellom karakterene. Det hjelper \u00e5 generere en harmonisk sammenkobling.\n<\/p>\n<p>\n  For eksempel &#8211; n\u00e5r du bruker en stor bokstav av bokstaven &#8216;A' med stor bokstav i bokstaven &#8216;V', blir de diagonale strekene \u00f8verst til venstre p\u00e5 bokstaven &#8216;V' kjernet med den nederste h\u00f8yre delen av &#8216;A'.\n<\/p>\n<p>\n  P\u00e5 den annen side er sporing begrepet som gjelder avstanden mellom alle tegn som brukes jevnt. Kerning ligner spor, men begge er ikke like.\n<\/p>\n<h5>\n  M\u00e5le<br \/>\n<\/h5>\n<p>\n  M\u00e5l er et begrep som forklarer bredden p\u00e5 en tekstblokk. For en optimal leseopplevelse b\u00f8r du vurdere tiltaket som et viktig aspekt ved typografi.\n<\/p>\n<h5>\n  Hierarki og skala<br \/>\n<\/h5>\n<p>\n  Alle typer kan ikke brukes i samme st\u00f8rrelse, du m\u00e5 angi hierarki for typer. Ellers vil det v\u00e6re vanskelig for leserne \u00e5 forst\u00e5 hvilken informasjon som er viktigst enn de andre.\n<\/p>\n<p>\n  Generelt er overskrifter store, underoverskrifter er mindre, og kroppstype er litt mindre enn underoverskrifter for \u00e5 hjelpe leserne med \u00e5 forst\u00e5 hierarkiet.\n<\/p>\n<p>\n  Ikke bare st\u00f8rrelse, bruk av forskjellige farger, vekt og avstand kan ogs\u00e5 hjelpe deg med \u00e5 sette hierarki i arbeidet ditt.\n<\/p>\n<h3>\n  Ordliste<br \/>\n<\/h3>\n<p>\n  Vi har dekket nesten alle grunnleggende konsepter og terminologier som involverer i typografi her.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-63830491e55fc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-63830491e55fc.webp\" alt=\"\" \/><\/a><\/p>\n<ul>\n<li>\n    <strong>Aesc<\/strong>: Det uttales som &#8216;Aske'. Det er en ligatur av to bokstaver, dvs. &#8216;a' og &#8216;e'. Opprinnelsen til aesc er fra gammelengelsk hvor det er betegnet som en diftongvokal. Aesc har migrert til alfabeter som islandsk og dansk.\n  <\/li>\n<li>\n    <strong>Blender\u00e5pning<\/strong>: Blender\u00e5pningen er en sammenknyttet \u00e5pning av en glyph som kan sees med bokstaver som &laquo;e&raquo;, st\u00f8rrelsen p\u00e5 blender\u00e5pningen varierer i henhold til implementeringen. Men ettersom du vil variere blender\u00e5pningen, vil effekten gjenspeiles i lesbarheten til en bokstavform.\n  <\/li>\n<li>\n    <strong>Apex<\/strong>: Apex er punktet som er p\u00e5 toppen av et tegn. Det er stedet der venstre og h\u00f8yre str\u00f8k m\u00f8tes.\n  <\/li>\n<li>\n    <strong>Grunnlinje<\/strong>: Det er en seksjon der bunnen av de store bokstavene sitter.\n  <\/li>\n<li>\n    <strong>Sk\u00e5l<\/strong>: Sk\u00e5l regnes som de innesluttede delene av bokstaver som &#8216;b' og &#8216;p'.\n  <\/li>\n<li>\n    <strong>Brakett<\/strong>: Det er en kilelignende kontur som er verdifull for \u00e5 holde en serif og danne stammen til en font i en rekke skrifttyper.\n  <\/li>\n<li>\n    <strong>Cap-h\u00f8yde<\/strong>: Cap-h\u00f8yden er h\u00f8yden til en stor bokstav over grunnlinjen.\n  <\/li>\n<li>\n    <strong>Teller<\/strong>: Telleren er vedlagt eller ufullstendig vedlagt en del av en bokstavform. Telleren kan sees med bokstaver som &#8216;c' eller den nedre delen av &#8216;g' og &#8216;e'. Denne delen kan blandes med bollen.\n  <\/li>\n<li>\n    <strong>Descender<\/strong>: Det er en del av bokstavformen som g\u00e5r under grunnlinjen. For eksempel bokstaver som &#8216;p', &#8216;y' og &#8216;q'.\n  <\/li>\n<li>\n    <strong>\u00d8re<\/strong>: \u00d8ret er et lite slag som utvides fra \u00f8vre h\u00f8yre side av bollen.\n  <\/li>\n<li>\n    <strong>Glyf<\/strong>: Det er en entallsdel som konstruerer en font. Enhver form for entallsdel som hjelper til med \u00e5 konstruere en font, enten det er et skilletegn, tall, bokstav eller til og med dingbat er inkludert i den. Glyfer kan kalles som byggesteinene i typografi.\n  <\/li>\n<li>\n    <strong>Takrenne<\/strong>: Det er plassen mellom de motst\u00e5ende sidene i arbeidet ditt. Takrenner kan ofte sees i kolonner med tekst.\n  <\/li>\n<li>\n    <strong>Foreldrel\u00f8s<\/strong>: Foreldrel\u00f8s er den f\u00f8rste linjen i et nytt avsnitt som er tr\u00e5dt p\u00e5 slutten av en side. Det er ikke noe du \u00f8nsker \u00e5 ha i prosjektet ditt, da det anses som en d\u00e5rlig praksis.\n  <\/li>\n<li>\n    <strong>Pica<\/strong>: Pica er enheten for \u00e5 m\u00e5le kolonnebredden. Det er 16 piksler eller 12 punkter i ett bilde.\n  <\/li>\n<li>\n    <strong>Lesbarhet<\/strong>: Det blir referert til som den enkle lesingen som inkluderer bruk av en tekstblokk som enkelt kan skannes med \u00f8yet.\n  <\/li>\n<li>\n    <strong>Serif<\/strong>: Det er et skriftsnitt med seriffer. Slutten av streken til en bokstavform i denne skrifttypen er avledet fra romersk tendens.\n  <\/li>\n<li>\n    <strong>Sans-serif<\/strong>: Et skriftsnitt uten serif er en sans-serif eller sans serif.\n  <\/li>\n<li>\n    <strong>Ryggs\u00f8ylen<\/strong>: Det er det store buede slaget som er tilstede i sm\u00e5 bokstaver av stor &#8216;S'.\n  <\/li>\n<li>\n    <strong>Spur<\/strong>: Det er en liten bule som vises ved kurven til en bokstavform. Det kalles ogs\u00e5 som et skjegg eller et nebb. For eksempel &#8211; bokstaven &#8216;G'.\n  <\/li>\n<li>\n    <strong>Stengel<\/strong>: Et slag i full lengde kalles en stilk med oppreiste tegn. Den er vertikal.\n  <\/li>\n<li>\n    <strong>X-h\u00f8yde<\/strong>: H\u00f8yden p\u00e5 &#8216;x'-bokstaven med sm\u00e5 bokstaver i en gitt skrifttype er en x-h\u00f8yde.\n  <\/li>\n<\/ul>\n<h3>\n  7 Typografiideer og beste praksis<br \/>\n<\/h3>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-638304942f71e.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-638304942f71e.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  F\u00f8lgende er de beste typografipraksisene du kan bruke i arbeidet ditt. Bruk disse tipsene i prosjektene dine for \u00e5 lage dine egne mesterverk.\n<\/p>\n<h5>\n  Viktigheten av valg av riktige fonter<br \/>\n<\/h5>\n<p>\n  Hver designer har en liste over sine favorittfonter. Men det betyr ikke at du bare m\u00e5 velge en skrift fra favorittlisten din hele tiden. Hver eneste skrifttype har sin egen stil, personlighet og stemning. S\u00e5 du m\u00e5 bestemme hvilken font som passer perfekt til designet ditt. Valget av skrifttype er viktig siden det hjelper deg med \u00e5 formidle budskapet ditt til publikum.\n<\/p>\n<h5>\n  Ha publikum i tankene<br \/>\n<\/h5>\n<p>\n  Etter \u00e5 ha valgt en skrifttype som utfyller ideen om designet ditt, b\u00f8r du tenke p\u00e5 om det passer for publikum. En gruppe av m\u00e5lgruppen din kan f\u00f8le at skriftene dine er trendy, mens noen vil kalle dem utdaterte. S\u00e5 du m\u00e5 forst\u00e5 hvem du designer prosjektet for. Alder, kj\u00f8nn, plassering og andre faktorer for publikum b\u00f8r vurderes f\u00f8r du bestemmer deg for skrifttype.\n<\/p>\n<h5>\n  Sett opp et hierarki<br \/>\n<\/h5>\n<p>\n  Som nevnt f\u00f8r, spiller hierarkiet en viktig rolle i typografi. Grafikken din skal v\u00e6re godt organisert og skal v\u00e6re lett \u00e5 navigere for leserne. Typografihierarki er veldig nyttig for \u00e5 lage teksttunge design som b\u00f8ker, nyhetsbrev, magasiner og andre tradisjonelle trykte publikasjoner.\n<\/p>\n<h5>\n  V\u00e6r oppmerksom p\u00e5 avstand og justering<br \/>\n<\/h5>\n<p>\n  Avstanden og justeringen h\u00f8res kanskje mindre viktig ut, men det er det absolutt ikke. Uten riktig avstand og justering vil designene dine se forvirrende, rotete og vanlige ut. Avstand inkluderer bruk av innledning, marginer, sporing og mellomrom.\n<\/p>\n<h5>\n  Bruk Kerning n\u00e5r du trenger det<br \/>\n<\/h5>\n<p>\n  Mange designere blir forvirret mellom sporing og kerning. Imidlertid er de begge forskjellige termer. Kerning lar deg f\u00e5 typografien din til \u00e5 se profesjonell og polert ut.\n<\/p>\n<h5>\n  Ikke overskrid bruken av skrifttyper, vekter og stiler<br \/>\n<\/h5>\n<p>\n  Vi liker alle \u00e5 bruke forskjellige fonter og tilpasse dem til \u00e5 se stilige ut. Imidlertid kan bruken av forskjellige skrifttyper i en enkelt design f\u00e5 arbeidet ditt til \u00e5 se amat\u00f8raktig og rotete ut. Du b\u00f8r unng\u00e5 bruk av mer enn tre fonter i ett design for \u00e5 gi det et profesjonelt utseende.\n<\/p>\n<h5>\n  Observer og \u00f8v<br \/>\n<\/h5>\n<p>\n  Den som har pr\u00f8vd og testet en m\u00e5te \u00e5 forbedre typografiferdighetene dine p\u00e5 er \u00e5 studere hvordan andre designere bruker typografi i arbeidet sitt. Det er ferdighetene som krever \u00f8velse og \u00f8ye for detaljer for \u00e5 forst\u00e5 hvordan noen har brukt typografi i prosjektet sitt og hvordan vil du kunne bruke dem i prosjektene dine.\n<\/p>\n<p>\n  Dette var den ultimate guiden til typografi. H\u00e5per denne veiledningen har hjulpet deg med \u00e5 forst\u00e5 ulike konsepter og praksiser som du kan bruke til \u00e5 forbedre typografiferdighetene dine.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Opptakskilde: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/16\/web-typography-guide\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#8216;Et bilde er verdt tusen ord.&#8217; Oftest formidler bilder det de har \u00e5 si. Imidlertid gir et bilde med tekst en sterkere innvirkning. Typografi fungerer som en f\u00f8lgesvenn til grafikken din. Typografi er ikke bare \u00e5 velge en tilfeldig skrifttype og en punktst\u00f8rrelse fra rullegardinmenyen til redigeringsprogramvaren. Det er et spesialfelt innen grafisk design. Det er kunsten og teknikken for \u00e5 arrangere type. Det er en av de viktige ferdighetene som kan skille deg fra resten av designerne hvis du vet hvordan du bruker den. Hva er typografi? F\u00f8r du g\u00e5r inn i\u2026<\/p>\n","protected":false},"author":1,"featured_media":192175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[252,57,200],"tags":[],"class_list":["post-257378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fonter","category-web-og-wordpress","category-webdesign-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/comments?post=257378"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257378\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media\/192175"}],"wp:attachment":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media?parent=257378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/categories?post=257378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/tags?post=257378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}