{"id":257901,"date":"2023-11-22T06:30:00","date_gmt":"2023-11-22T03:30:00","guid":{"rendered":"https:\/\/inform.click\/25-nettsteder-som-gjor-inspirerende-bruk-av-typografi\/"},"modified":"2023-11-22T06:52:00","modified_gmt":"2023-11-22T03:52:00","slug":"25-nettsteder-som-gjor-inspirerende-bruk-av-typografi","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/25-nettsteder-som-gjor-inspirerende-bruk-av-typografi\/","title":{"rendered":"25 nettsteder som gj\u00f8r inspirerende bruk av typografi"},"content":{"rendered":"

\n Hver nettside bruker typografi, men de aller fleste av dem gj\u00f8r ikke noe spesielt med det.\n<\/p>\n

\n Faktisk, mange av nettstedene jeg bes\u00f8ker p\u00e5 daglig basis bruker ganske d\u00e5rlig typografi (etter min mening), hvorfor jeg alltid f\u00f8ler en f\u00f8lelse av overveldende glede n\u00e5r jeg kommer over et nettsted som virkelig har gjort det ekstra mil n\u00e5r det gjelder typografi.\n<\/p>\n

\n S\u00e5 hvis du er lei av \u00e5 se slike som «Arial» og «Times New Roman» (jeg vet at jeg er det!), eller hvis du trenger litt typografisk inspirasjon for et fremtidig prosjekt, her er noen nettsteder som gj\u00f8r utmerket bruk av typografi :\n<\/p>\n

\n 1 V02 Gruppe
\n<\/h4>\n

\n <\/a>\n<\/p>\n

\n V02 Group gj\u00f8r interessant bruk av typografi p\u00e5 nettsiden deres i den forstand at noen deler av den er skjult bak bildet av l\u00f8peren.\n<\/p>\n

\n Dette bidrar til \u00e5 skape en f\u00f8lelse av dybde og skildrer et bilde av typografien som flyter i luften.\n<\/p>\n

\n Fonter brukt:<\/strong> Crimson Text, Futura\n<\/p>\n

\n 2 Hva er din fremtid?
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n «Hva er din fremtid?» er et vakkert utformet nettsted som bruker typografi sparsomt.\n<\/p>\n

\n Designet som helhet er ganske minimalistisk og «flat», som mest sannsynlig er \u00e5rsaken bak et s\u00e5 eventyrlig skrifttypevalg (Baron Neue) for den store typen.\n<\/p>\n

\n Skrifter brukt:<\/strong> Baron Neue, Georgia\n<\/p>\n

\n 3 Jacob Grubbe
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Jacob Grubbe har laget et eksepsjonelt forenklet nettsted her, med typografi som hovedfokus \u2013 mens du skriver, avsl\u00f8rer nettstedet seg selv.\n<\/p>\n

\n Jacob bruker bare ett skriftsnitt i dette designet (Roboto), men det fungerer perfekt med den minimalistiske designstilen.\n<\/p>\n

\n Fonter brukt:<\/strong> Roboto\n<\/p>\n

\n 4 hemmelige resolusjoner
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Secret Resolutions er en fargerik, litt in-your-face-nettside som omtrent som Jacobs nettsted ovenfor, bare bruker \u00e9n skrifttype (Brandon Grotesque).\n<\/p>\n

\n Typografien er stor, dristig, eventyrlig og morsom \u2013 et perfekt valg tatt i betraktning nettstedets konsept.\n<\/p>\n

\n Fonter brukt:<\/strong> Brandon Grotesque\n<\/p>\n

\n 5 Grunnleggende 09
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Basics09 gj\u00f8r akkurat det som st\u00e5r p\u00e5 boksen: den tilbyr et «grunnleggende» nettsted som igjen bare bruker \u00e9n skrifttype (Benton Sans).\n<\/p>\n

\n Benton Sans i seg selv er en ganske enkel og ren sans serif-font, men designeren har brukt subtil styling og st\u00f8rrelse for \u00e5 skape en f\u00f8lelse av hierarki, selv med bare den ene skrifttypen i designet.\n<\/p>\n

\n Fonter brukt:<\/strong> Benton Sans\n<\/p>\n

\n 6 Degordiansk
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Degordian bruker stor typografi med store bokstaver for hovedelementene i designet, komplimentert av mindre tekst med vanlig store og sm\u00e5 bokstaver skrevet med den popul\u00e6re fonten: Merriweather.\n<\/p>\n

\n Denne kombinasjonen av store bakgrunnsbilder og stor typografi med store bokstaver er raskt i ferd med \u00e5 bli en nettdesigntrend i \u00e5r.\n<\/p>\n

\n Skrifter brukt:<\/strong> Futura, Merriweather\n<\/p>\n

\n 7 Brancott Estate
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Brancott Estate har g\u00e5tt for en tavleaktig, h\u00e5ndtegnet effekt for nettsiden deres.\n<\/p>\n

\n Vi er usikre p\u00e5 hva hovedfonten de har brukt er, men den finnes sammen med Georgia. Hva det er, det er en episk kombinasjon.\n<\/p>\n

\n Fonter som brukes:<\/strong> Ukjent, Georgia\n<\/p>\n

\n 8 Miles Calder
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Miles Calder har laget et veldig minimalistisk nettsted her og igjen, siden bruker bare \u00e9n skrifttype: Founders Grotesk.\n<\/p>\n

\n Han bruker ulike st\u00f8rrelser, farger og stylinger for \u00e5 skape en f\u00f8lelse av hierarki i designet.\n<\/p>\n

\n Fonter brukt:<\/strong> Grunnleggere Grotesk\n<\/p>\n

\n 9 Kj\u00f8r for AJD
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Selv om denne nettsiden er skrevet p\u00e5 fransk i stedet for engelsk, ser den fortsatt litt vanskelig ut \u00e5 lese takket v\u00e6re stilen til skrifttypen som brukes.\n<\/p>\n

\n Du m\u00e5 imidlertid innr\u00f8mme at stilmessig ser det ganske bra ut.\n<\/p>\n

\n Fonter brukt:<\/strong> Avenir Book\n<\/p>\n

\n 10 SendAMessage.to
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n SendAMessage.to lar deg i hovedsak sende en personlig melding til en venn, et familiemedlem eller en kollega med bare noen f\u00e5 trinn.\n<\/p>\n

\n Designeren har brukt Proxima Nova som eneste font. en skrifttype kjent for sin skj\u00f8nnhet i store st\u00f8rrelser.\n<\/p>\n

\n Fonter brukt:<\/strong> Proxima Nova\n<\/p>\n

\n 11 Amazee Labs
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Det ser ut til at Amazee Labs har laget en noe ny og unik skrifttype for denne designen, men den har sammen med Source Sans Pro og Museo.\n<\/p>\n

\n Disse to skrifttypene fungerer vakkert sammen, og spesielt godt sammen med den lyse, fargerike typografien som vises i bildene.\n<\/p>\n

\n Fonter som brukes:<\/strong> Source Sans Pro, Museo\n<\/p>\n

\n 12 Oudolf
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Oudolf-nettstedet er veldig forenklet og omtrent som Jacob Grubbes nettsted omtalt tidligere i innlegget, er typografien stort sett det eneste elementet i designet.\n<\/p>\n

\n Imidlertid bruker denne nettsiden en kul effekt der teksten effektivt maskeres over et bilde, som deretter avsl\u00f8rer seg selv n\u00e5r det rulles.\n<\/p>\n

\n Skrifter brukt:<\/strong> Mason Neue Book, Univers Standard\n<\/p>\n

\n 13 Jeg er Baaz
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n \u00abI Am Baaz\u00bb bruker to vakre skrifttyper: Verlag Book og Acrom Extra Bold.\n<\/p>\n

\n N\u00e5r det kombineres med videobakgrunnen til nettstedet, er resultatet fantastisk. den er nesten som en bevegelig, interaktiv filmplakat i m\u00e5ten den er designet og stilt p\u00e5.\n<\/p>\n

\n Skrifter brukt:<\/strong> Verlag Book, Acrom Extra Bold\n<\/p>\n

\n 14 FS Millbank
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n FS Millbank er et nettsted som annonserer skrifttypen: FS Millbank.\n<\/p>\n

\n Det er beskrevet som en «veifarende» skrifttype, og hvis du har v\u00e6rt p\u00e5 flyplasser eller togstasjoner nylig, vil du sannsynligvis ha sett noe som ser ut akkurat som det p\u00e5 skiltene der.\n<\/p>\n

\n Det er en vakker skrift og fungerer definitivt bra for det tiltenkte form\u00e5let.\n<\/p>\n

\n Fonter brukt:<\/strong> FS Millbank\n<\/p>\n

\n 15 Studio Lovelock
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Det ser ut til at Futura PT vokser i popularitet i \u00e5r, og har dukket opp igjen p\u00e5 nettstedet til Studio Lovelock.\n<\/p>\n

\n Det er den eneste skrifttypen som brukes i designet, men den har blitt brukt i mange forskjellige st\u00f8rrelser, stiler og vekter for \u00e5 skape et interessant design.\n<\/p>\n

\n Det ser ikke engang ut som den samme fonten noen steder.\n<\/p>\n

\n Fonter brukt:<\/strong> Futura PT\n<\/p>\n

\n 16 Adoratorio
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Adoratorios nettsted er stort sett svart og hvitt, selv om det er merkelige fargeelementer, som vist i skjermbildet ovenfor.\n<\/p>\n

\n B\u00e5de Montserrat og Courier New funksjoner i denne designen, og selv om disse ikke er de mest interessante av skrifttypevalgene, har designet p\u00e5 en smart m\u00e5te brukt farger og sporings-\/kjerningsforandringer for \u00e5 skape et enest\u00e5ende design.\n<\/p>\n

\n Skrifter brukt:<\/strong> Montserrat, Courier New\n<\/p>\n

\n 17 M\u00f8nsterbiblioteket
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n M\u00f8nsterbiblioteket bruker veldig lite typografi, da det hovedsakelig er et bildebasert nettsted.\n<\/p>\n

\n Der det imidlertid brukes typografi, brukes den f\u00f8rst og fremst for handlingsfremmende oppfordringer (dvs. \u00ablast ned n\u00e5\u00bb-knappen). Tydeligvis er dristigheten til MostraNuova det perfekte valget for denne jobben.\n<\/p>\n

\n Fonter brukt:<\/strong> MostraNuova\n<\/p>\n

\n 18 Spotify. Sweet Spot
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Spotify bruker bare \u00e9n font i «Sweet Spot»-designet for Valentines Day, og det fungerer eksepsjonelt bra n\u00e5r det kombineres med det dristige fargeskjemaet og minimalistiske designen til nettstedet.\n<\/p>\n

\n Ulike vekter og st\u00f8rrelser brukes for \u00e5 lage et enkelt, men \u00e5penbart visuelt hierarki.\n<\/p>\n

\n Fonter brukt:<\/strong> Circular TT\n<\/p>\n

\n 19 51 Nord
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n 51 North er et designbyr\u00e5 med base i Nederland. Deres bruker to fonter: Minion W01 og Two Cen W01, som begge brukes relativt sparsomt.\n<\/p>\n

\n En merkelig ting du vil legge merke til med denne nettsiden er at en vanlig skriftvekt brukes for hovedoverskriften («666»), mens en fet vekt brukes for underoverskriften («6th Anniversary»).\n<\/p>\n

\n Skrifter brukt:<\/strong> Minion W01, Tw Cen W01\n<\/p>\n

\n 20 bl\u00e5 rel\u00e9er
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n RelaisBlu er et boutiquehotell og restaurant i Italia. I motsetning til de fleste nettstedene som er omtalt i dette innlegget, bruker nettstedet faktisk tre helt forskjellige skrifttyper.\n<\/p>\n

\n Mesteparten av tiden, \u00e5 bruke mer enn et par skrifttyper er forskjellige st\u00f8rrelser og vekter er litt av en risiko, men RelaisBlu klarer \u00e5 f\u00e5 ting av for \u00e5 lage et visuelt fantastisk design.\n<\/p>\n

\n Skrifter som brukes:<\/strong> Geosans, Fanwood, Theano\n<\/p>\n

\n Studio 21. april
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n April Studio bruker kun ett skriftsnitt i designet: Helvetica Neue.\n<\/p>\n

\n Helvetica Neue er en relativt overbrukt skrifttype i disse dager (selv Apple bruker den i operativsystemene OSX Yosemite og iOS8).\n<\/p>\n

\n Men ved \u00e5 bruke ulike vekter, st\u00f8rrelser og farger, har April Studio skapt et rent og enkelt design med et klart visuelt hierarki.\n<\/p>\n

\n Skrifter brukt:<\/strong> Helvetica Neue\n<\/p>\n

\n 22 EMyte
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n EMyth er en relativt enkel og jordn\u00e6r nettside, noe som delvis er takket v\u00e6re valget av typografi: Museo Slab og Proxima Nova.\n<\/p>\n

\n Proxima Nova kan til tider virke ganske dristig og maskulin, men ved \u00e5 bruke Museo Slab ved siden av har EMyth skapt et no-nonsense design som er rent, tydelig og appellerer til begge kj\u00f8nn like mye.\n<\/p>\n

\n Skrifter brukt:<\/strong> Museo Slab, Proxima Nova\n<\/p>\n

\n 23 Melanie DaVeid
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Bortsett fra det tilpassede skriftsnittet som brukes til de store overskriftene p\u00e5 venstre side av nettstedet, bruker Melanie bare \u00e9n skrifttype p\u00e5 nettstedet sitt: Proxima Nova.\n<\/p>\n

\n Hun holder ting enkelt ved \u00e5 bruke en fet vekt for underoverskriftene, med en vanlig vekt for hovedinnholdet. Dette skaper et tydelig visuelt hierarki, mens hennes egendefinerte skrift gir personlighet til designet.\n<\/p>\n

\n Fonter brukt:<\/strong> Proxima Nova, Custom\n<\/p>\n

\n 24 formler
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Formlets er et selskap som enn\u00e5 ikke har lansert, men ser ut til \u00e5 v\u00e6re klar til \u00e5 lansere et produkt som vil konkurrere med noen ganske store akt\u00f8rer.\n<\/p>\n

\n Formlets har imidlertid brukt typografi for \u00e5 skille seg ut fra mengden. Mens de fleste av deres konkurrenter kan skryte av en gammel bedriftsdesign, har Formlets valgt en mer forenklet og vennlig design. DIN Rounded og Roboto brukes for \u00e5 oppn\u00e5 dette.\n<\/p>\n

\n Fonter brukt:<\/strong> DIN Rounded, Roboto\n<\/p>\n

\n 25 Nicholas Bussiere
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Nicholas har skapt et eksepsjonelt minimalistisk design og bruker bare ett skriftsnitt gjennom: Apercu.\n<\/p>\n

\n Han bruker to skriftvekter (lett og vanlig) og overraskende nok er det de store overskriftene som benytter seg av den lette skriftvekten, mens den mindre, mindre viktige teksten utnytter en vanlig skriftvekt.\n<\/p>\n

\n Han bruker dimensjonering og farger for \u00e5 sikre at det fortsatt er et sterkt visuelt hierarki i designet.\n<\/p>\n

\n Fonter brukt:<\/strong> Apercu\n<\/p>\n<\/p>\n

\n Opptakskilde: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Hver nettside bruker typografi, men de aller fleste av dem gj\u00f8r ikke noe spesielt med det. Faktisk, mange av nettstedene jeg bes\u00f8ker p\u00e5 daglig basis bruker ganske d\u00e5rlig typografi (etter min mening), hvorfor jeg alltid f\u00f8ler en f\u00f8lelse av overveldende glede n\u00e5r jeg kommer over et nettsted som virkelig har gjort det ekstra mil n\u00e5r det gjelder typografi. S\u00e5 hvis du er lei av \u00e5 se slike som «Arial» og «Times New Roman» (jeg vet jeg er!), eller hvis du trenger litt typografisk inspirasjon for en fremtid …<\/p>\n","protected":false},"author":1,"featured_media":139118,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[252,226,57,200],"tags":[],"class_list":["post-257901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fonter","category-laereboker","category-web-og-wordpress","category-webdesign-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257901","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=257901"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257901\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media\/139118"}],"wp:attachment":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media?parent=257901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/categories?post=257901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/tags?post=257901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}