{"id":265410,"date":"2023-11-22T06:30:00","date_gmt":"2023-11-22T03:30:00","guid":{"rendered":"https:\/\/inform.click\/25-webbplatser-som-anvander-typografi-inspirerande\/"},"modified":"2023-11-22T07:12:00","modified_gmt":"2023-11-22T04:12:00","slug":"25-webbplatser-som-anvander-typografi-inspirerande","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/25-webbplatser-som-anvander-typografi-inspirerande\/","title":{"rendered":"25 webbplatser som anv\u00e4nder typografi inspirerande"},"content":{"rendered":"

\n Varje webbplats anv\u00e4nder sig av typografi, men de allra flesta av dem g\u00f6r inget speciellt med den.\n<\/p>\n

\n Faktum \u00e4r att m\u00e5nga av de webbplatser jag bes\u00f6ker dagligen anv\u00e4nder typografi ganska d\u00e5ligt (enligt mig), varf\u00f6r \u00e4r det d\u00e4rf\u00f6r jag alltid k\u00e4nner en k\u00e4nsla av \u00f6verv\u00e4ldigande f\u00f6rtjusning n\u00e4r jag st\u00f6ter p\u00e5 en webbplats som verkligen har gjort det extra. mil n\u00e4r det g\u00e4ller typografi.\n<\/p>\n

\n S\u00e5 om du \u00e4r tr\u00f6tt p\u00e5 att se s\u00e5dana som ”Arial” och ”Times New Roman” (jag vet att jag \u00e4r!), eller om du beh\u00f6ver lite typografisk inspiration f\u00f6r ett framtida projekt, h\u00e4r \u00e4r n\u00e5gra webbplatser som anv\u00e4nder typografi utm\u00e4rkt :\n<\/p>\n

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

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

\n V02 Group anv\u00e4nder sig intressant av typografi p\u00e5 sin hemsida i den meningen att vissa delar av den \u00e4r g\u00f6mda bakom bilden av l\u00f6paren.\n<\/p>\n

\n Detta hj\u00e4lper till att skapa en k\u00e4nsla av djup och portr\u00e4tterar en bild av typografin som sv\u00e4var i luften.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Crimson Text, Futura\n<\/p>\n

\n 2 Vad \u00e4r din framtid?
\n<\/h4>\n

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

\n ”Vad \u00e4r din framtid?” \u00e4r en vackert utformad webbplats som anv\u00e4nder typografi sparsamt.\n<\/p>\n

\n Designen som helhet \u00e4r ganska minimalistisk och ”platt”, vilket med st\u00f6rsta sannolikhet \u00e4r orsaken bakom ett s\u00e5 \u00e4ventyrligt val av typsnitt (Baron Neue) f\u00f6r den stora typen.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Baron Neue, Georgia\n<\/p>\n

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

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

\n Jacob Grubbe har skapat en exceptionellt f\u00f6renklad webbplats h\u00e4r, med typografi som den prim\u00e4ra fokuspunkten \u2013 n\u00e4r du skriver avsl\u00f6jar webbplatsen sig sj\u00e4lv.\n<\/p>\n

\n Jacob anv\u00e4nder bara ett typsnitt i denna design (Roboto) men det fungerar perfekt med den minimalistiska designstilen.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Roboto\n<\/p>\n

\n 4 hemliga resolutioner
\n<\/h4>\n

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

\n Secret Resolutions \u00e4r en f\u00e4rgstark, lite in-your-face-webbplats som ungef\u00e4r som Jacobs webbplats ovan, bara anv\u00e4nder ett typsnitt (Brandon Grotesque).\n<\/p>\n

\n Typografin \u00e4r stor, dj\u00e4rv, \u00e4ventyrlig och rolig \u2013 ett perfekt val med tanke p\u00e5 webbplatsens koncept.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Brandon Grotesque\n<\/p>\n

\n 5 Grunderna09
\n<\/h4>\n

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

\n Basics09 g\u00f6r precis som det st\u00e5r p\u00e5 burken: den erbjuder en ”grundl\u00e4ggande” webbplats som \u00e5terigen bara anv\u00e4nder ett typsnitt (Benton Sans).\n<\/p>\n

\n Benton Sans i sig \u00e4r ett ganska enkelt och vanligt sans serif-teckensnitt, men designern har anv\u00e4nt subtil stil och storlek f\u00f6r att skapa en k\u00e4nsla av hierarki, \u00e4ven med bara ett typsnitt i designen.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Benton Sans\n<\/p>\n

\n 6 Degordian
\n<\/h4>\n

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

\n Degordian anv\u00e4nder stor typografi med versaler f\u00f6r designens huvudelement, kompletterat med mindre text med normala bokst\u00e4ver skriven i det popul\u00e4ra typsnittet: Merriweather.\n<\/p>\n

\n Denna kombination av stora bakgrundsbilder och stor typografi med versaler h\u00e5ller snabbt p\u00e5 att bli en webbdesigntrend i \u00e5r.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Futura, Merriweather\n<\/p>\n

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

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

\n Brancott Estate har valt en svart tavla, handritad effekt f\u00f6r sin webbplats.\n<\/p>\n

\n Vi \u00e4r os\u00e4kra p\u00e5 vad det huvudsakliga teckensnittet de har anv\u00e4nt \u00e4r, men det finns tillsammans med Georgia. Vad det \u00e4r, det \u00e4r en episk kombination.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Ok\u00e4nt, Georgia\n<\/p>\n

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

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

\n Miles Calder har skapat en mycket minimalistisk webbplats h\u00e4r och igen, webbplatsen anv\u00e4nder bara ett typsnitt: Grundarna Grotesk.\n<\/p>\n

\n Han anv\u00e4nder olika storlekar, f\u00e4rger och stylingar f\u00f6r att skapa en k\u00e4nsla av hierarki i designen.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Grundare Grotesk\n<\/p>\n

\n 9 K\u00f6r f\u00f6r AJD
\n<\/h4>\n

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

\n \u00c4ven om den h\u00e4r webbplatsen \u00e4r skriven p\u00e5 franska snarare \u00e4n engelska, ser den fortfarande lite sv\u00e5r att l\u00e4sa tack vare stilen p\u00e5 typsnittet som anv\u00e4nds.\n<\/p>\n

\n Du m\u00e5ste dock erk\u00e4nna att stilm\u00e4ssigt ser det ganska bra ut.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Avenir Book\n<\/p>\n

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

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

\n SendAMessage.to l\u00e5ter dig i princip skicka ett personligt meddelande till en v\u00e4n, familjemedlem eller kollega med bara n\u00e5gra f\u00e5 steg.\n<\/p>\n

\n Designern har anv\u00e4nt Proxima Nova som det enda typsnittet. ett typsnitt k\u00e4nt f\u00f6r sin sk\u00f6nhet i stora storlekar.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Proxima Nova\n<\/p>\n

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

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

\n Det verkar som att Amazee Labs har skapat ett n\u00e5got nytt och unikt typsnitt f\u00f6r den h\u00e4r designen, men det finns tillsammans med Source Sans Pro och Museo.\n<\/p>\n

\n Dessa tv\u00e5 typsnitt fungerar vackert tillsammans, och s\u00e4rskilt bra tillsammans med den ljusa, f\u00e4rgglada typografin som finns i bilderna.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Source Sans Pro, Museo\n<\/p>\n

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

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

\n Oudolfs webbplats \u00e4r v\u00e4ldigt f\u00f6renklad och ungef\u00e4r som Jacob Grubbes webbplats som presenterades tidigare i inl\u00e4gget, \u00e4r typografin i stort sett det enda elementet i designen.\n<\/p>\n

\n D\u00e4remot anv\u00e4nder den h\u00e4r webbplatsen en cool effekt d\u00e4r texten effektivt maskeras \u00f6ver en bild, som sedan uppenbarar sig vid rollover.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Mason Neue Book, Univers Standard\n<\/p>\n

\n 13 Jag \u00e4r Baaz
\n<\/h4>\n

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

\n ”I Am Baaz” anv\u00e4nder sig av tv\u00e5 vackra typsnitt: Verlag Book och Acrom Extra Bold.\n<\/p>\n

\n I kombination med videobakgrunden p\u00e5 webbplatsen \u00e4r resultatet fantastiskt. Det \u00e4r n\u00e4stan som en r\u00f6rlig, interaktiv filmaffisch p\u00e5 det s\u00e4tt som den har designats och utformats.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Verlag Book, Acrom Extra Bold\n<\/p>\n

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

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

\n FS Millbank \u00e4r en webbplats som annonserar typsnittet: FS Millbank.\n<\/p>\n

\n Det beskrivs som ett ”wayfaring” typsnitt och om du har varit p\u00e5 n\u00e5gon flygplats eller t\u00e5gstation nyligen, har du f\u00f6rmodligen sett n\u00e5got som ser ut precis som det p\u00e5 skyltarna d\u00e4r.\n<\/p>\n

\n Det \u00e4r ett vackert typsnitt och fungerar definitivt bra f\u00f6r sitt avsedda syfte.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> FS Millbank\n<\/p>\n

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

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

\n Det verkar som att Futura PT v\u00e4xer i popularitet i \u00e5r och har gjort ett framtr\u00e4dande \u00e4nnu en g\u00e5ng p\u00e5 hemsidan f\u00f6r Studio Lovelock.\n<\/p>\n

\n Det \u00e4r det enda typsnittet som anv\u00e4nds i designen, men det har anv\u00e4nts i m\u00e5nga olika storlekar, stilar och vikter f\u00f6r att skapa en intressant design.\n<\/p>\n

\n Det ser inte ens ut som samma typsnitt p\u00e5 vissa st\u00e4llen.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Futura PT\n<\/p>\n

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

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

\n Adoratorios webbplats \u00e4r till stor del svart och vit, \u00e4ven om det finns de udda inslag av f\u00e4rg, som visas i sk\u00e4rmdumpen ovan.\n<\/p>\n

\n B\u00e5de Montserrat och Courier New finns med i den h\u00e4r designen och \u00e4ven om dessa inte \u00e4r de mest intressanta av typsnittsvalen, har designen p\u00e5 ett skickligt s\u00e4tt anv\u00e4nt f\u00e4rg och sp\u00e5rnings-\/k\u00e4rningsf\u00f6r\u00e4ndringar f\u00f6r att skapa en enast\u00e5ende design.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Montserrat, Courier New\n<\/p>\n

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

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

\n M\u00f6nsterbiblioteket anv\u00e4nder v\u00e4ldigt lite typografi, eftersom det huvudsakligen \u00e4r en bildbaserad webbplats.\n<\/p>\n

\n D\u00e4r typografi anv\u00e4nds anv\u00e4nds den dock fr\u00e4mst f\u00f6r uppmaningar (dvs. knappen ”ladda ner nu”). Uppenbarligen \u00e4r MostraNuovas dj\u00e4rvhet det perfekta valet f\u00f6r detta jobb.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> MostraNuova\n<\/p>\n

\n 18 Spotify. Sk\u00f6n plats
\n<\/h4>\n

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

\n Spotify anv\u00e4nder bara ett typsnitt i sin ”Sweet Spot”-design f\u00f6r Alla hj\u00e4rtans dag och det fungerar exceptionellt bra i kombination med sajtens dj\u00e4rva f\u00e4rgschema och minimalistiska design.\n<\/p>\n

\n Olika vikter och storlekar anv\u00e4nds f\u00f6r att skapa en enkel men tydlig visuell hierarki.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Cirkul\u00e4r TT\n<\/p>\n

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

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

\n 51 North \u00e4r en designbyr\u00e5 baserad i Nederl\u00e4nderna. De anv\u00e4nder tv\u00e5 typsnitt: Minion W01 och Two Cen W01, som b\u00e5da anv\u00e4nds relativt sparsamt.\n<\/p>\n

\n En udda sak som du kommer att m\u00e4rka med den h\u00e4r webbplatsen \u00e4r att en vanlig teckensnittsvikt anv\u00e4nds f\u00f6r huvudrubriken (”666”) medan en fet vikt anv\u00e4nds f\u00f6r underrubriken (”6th Anniversary”).\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Minion W01, Tw Cen W01\n<\/p>\n

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

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

\n RelaisBlu \u00e4r ett boutiquehotell och restaurang i Italien. Till skillnad fr\u00e5n de flesta webbplatser som visas i det h\u00e4r inl\u00e4gget anv\u00e4nder webbplatsen faktiskt tre helt olika typsnitt.\n<\/p>\n

\n F\u00f6r det mesta \u00e4r det lite av en risk att anv\u00e4nda mer \u00e4n ett par typsnitt i olika storlekar och vikter, men RelaisBlu lyckas f\u00e5 saker att g\u00f6ra f\u00f6r att skapa en visuellt fantastisk design.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Geosans, Fanwood, Theano\n<\/p>\n

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

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

\n April Studio anv\u00e4nder bara ett typsnitt i sin design: Helvetica Neue.\n<\/p>\n

\n Helvetica Neue \u00e4r ett relativt \u00f6veranv\u00e4nt typsnitt nuf\u00f6rtiden (\u00e4ven Apple anv\u00e4nder det i deras OSX Yosemite och iOS8 operativsystem).\n<\/p>\n

\n Men genom att anv\u00e4nda olika vikter, storlekar och f\u00e4rger har April Studio skapat en ren och enkel design med en tydlig visuell hierarki.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Helvetica Neue\n<\/p>\n

\n 22 EMyt
\n<\/h4>\n

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

\n EMyth \u00e4r en relativt enkel och jordn\u00e4ra webbplats, vilket delvis \u00e4r tack vare valet av typografi: Museo Slab och Proxima Nova.\n<\/p>\n

\n Proxima Nova kan ibland verka ganska dj\u00e4rv och maskulin, men genom att anv\u00e4nda Museo Slab vid sidan av har EMyth skapat en no-nonsens design som \u00e4r ren, tydlig och tilltalar b\u00e5da k\u00f6nen lika.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Museo Slab, Proxima Nova\n<\/p>\n

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

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

\n F\u00f6rutom den anpassade typsnittsdesignen som anv\u00e4nds f\u00f6r de stora rubrikerna till v\u00e4nster p\u00e5 webbplatsen, anv\u00e4nder Melanie bara ett typsnitt p\u00e5 sin webbplats: Proxima Nova.\n<\/p>\n

\n Hon h\u00e5ller det enkelt genom att anv\u00e4nda en fet vikt f\u00f6r underrubrikerna, med en vanlig vikt f\u00f6r huvudinneh\u00e5llet. Detta skapar en tydlig visuell hierarki, samtidigt som hennes anpassade typsnitt ger designen personlighet.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Proxima Nova, Custom\n<\/p>\n

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

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

\n Formlets \u00e4r ett f\u00f6retag som \u00e4nnu inte har lanserats, men som verkar vara redo att lansera en produkt som kommer att konkurrera med n\u00e5gra ganska stora spelare.\n<\/p>\n

\n Formlets har dock anv\u00e4nt typografi f\u00f6r att sticka ut fr\u00e5n m\u00e4ngden. Medan de flesta av deras konkurrenter skryter med en gammal f\u00f6retagsdesign, har Formlets valt en mer f\u00f6renklad och v\u00e4nlig design. DIN Rounded och Roboto anv\u00e4nds f\u00f6r att uppn\u00e5 detta.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> DIN Rounded, Roboto\n<\/p>\n

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

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

\n Nicholas har skapat en exceptionellt minimalistisk design och anv\u00e4nder bara ett typsnitt genomg\u00e5ende: Apercu.\n<\/p>\n

\n Han anv\u00e4nder tv\u00e5 teckensnittsvikter (l\u00e4tt och vanlig) och \u00f6verraskande nog \u00e4r det de stora rubrikerna som anv\u00e4nder sig av den l\u00e4tta teckensnittsvikten, medan den mindre, mindre viktiga texten anv\u00e4nder en vanlig teckensnittsvikt.\n<\/p>\n

\n Han anv\u00e4nder storlek och f\u00e4rg f\u00f6r att s\u00e4kerst\u00e4lla att det fortfarande finns en stark visuell hierarki inom designen.\n<\/p>\n

\n Teckensnitt som anv\u00e4nds:<\/strong> Apercu\n<\/p>\n<\/p>\n

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

Varje webbplats anv\u00e4nder sig av typografi, men de allra flesta av dem g\u00f6r inget speciellt med den. Faktum \u00e4r att m\u00e5nga av de webbplatser jag bes\u00f6ker dagligen anv\u00e4nder typografi ganska d\u00e5ligt (enligt mig), varf\u00f6r \u00e4r det d\u00e4rf\u00f6r jag alltid k\u00e4nner en k\u00e4nsla av \u00f6verv\u00e4ldigande f\u00f6rtjusning n\u00e4r jag st\u00f6ter p\u00e5 en webbplats som verkligen har gjort det extra. mil n\u00e4r det g\u00e4ller typografi. S\u00e5, om du \u00e4r tr\u00f6tt p\u00e5 att se s\u00e5dana som ”Arial” och ”Times New Roman” (jag vet att jag \u00e4r!), eller om du beh\u00f6ver lite typografisk inspiration f\u00f6r en framtid …<\/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":[230,256,61,204],"tags":[],"class_list":["post-265410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-larobocker","category-teckensnitt","category-web-och-wordpress","category-webbdesign"],"_links":{"self":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/comments?post=265410"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265410\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/139118"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=265410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=265410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=265410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}