# Rubriktypsnitt: typsnitt som fångar blicken [Canonical HTML page](https://gradiently.design/sv/guide/headline-fonts) En rubrik har ungefär en sekund på sig att bli läst. Typsnittet gör förvånansvärt stor del av jobbet. Här är gratis typsnitt som förtjänar uppmärksamhet, grupperade efter vad de gör bäst, med kombinationer du kan använda idag. ## The short version - Bra rubriktypsnitt har tydliga bokstavsformer, kraftiga vikter och tillräckligt med karaktär för att kännas igen på en blick. - Kondenserade snitt som Anton och Bebas Neue rymmer långa ord i stor storlek, vilket passar affischer och miniatyrbilder. - Antikvor med hög kontrast som Playfair Display och DM Serif Display ger rubriker en redaktionell, förfinad ton. - Ett rubriktypsnitt kombineras oftast med ett lugnare brödtypsnitt, som Inter eller DM Sans, till allt annat. - Rubriker i stor storlek behöver oftast något tätare bokstavsavstånd och radavstånd än typsnittets standardvärden. De bästa **rubriktypsnitten** är sådana du kan läsa på en enda blick i stor storlek och som bär en tydlig ton: kondenserade seriflösa som Anton eller Bebas Neue för slagkraft, tunga grotesker som Archivo Black för tyngd och antikvor med hög kontrast som Playfair Display eller DM Serif Display för elegans. Alla dessa är gratis på [Google Fonts](https://fonts.google.com). Det rätta beror mindre på smak än på uppgiften: hur många ord, hur mycket plats och hur rubriken ska kännas. ## Vad som gör ett bra rubriktypsnitt - **Tydliga former på en blick.** Öppna rundningar och urskiljbara bokstäver, så att orden läses innan ögat hunnit landa. - **Vikt att spara.** En familj med fet, extrafet eller svart, eftersom rubriker på telefoner behöver kraftiga streck. - **Bra standardavstånd och kerning.** Stor text förstorar varje lucka. Välgjorda typsnitt behöver mindre rättning. Se [kerning](https://gradiently.design/sv/guide/kerning). - **En ton som passar budskapet.** Högljudd, lugn, lyxig eller teknisk. Typsnittet säger det innan orden gör det. - **Rätt bredd för din yta.** Kondenserade snitt rymmer långa ord i smala format. Breda snitt passar korta ord med luft omkring. ## De bästa gratistypsnitten för rubriker, efter stil | Stil | Google Fonts att prova | Känns | Bäst för | | --- | --- | --- | --- | | Kondenserad seriflös | Anton, Bebas Neue, Oswald, Barlow Condensed, Big Shoulders Display | Högljutt, brådskande, sportigt | Affischer, miniatyrbilder, reainlägg | | Tung grotesk | Archivo Black, Inter Tight, Work Sans i svart | Rakt, modernt, utan krusiduller | Meddelanden, produktlanseringar | | Geometrisk seriflös | Montserrat, Poppins, Outfit, League Spartan | Vänligt, rent, runt | Startups, tjänster, sociala inlägg | | Seriflös med karaktär | Bricolage Grotesque, Space Grotesk, Syne | Särpräglat, aktuellt, lite egensinnigt | Varumärken som vill ha en röst | | Antikva med hög kontrast | Playfair Display, DM Serif Display, Instrument Serif | Redaktionellt, förfinat, dyrt | Mode, skönhet, tidskrifter, menyer | | Mjuk antikva | Fraunces, Young Serif | Varmt, hantverksmässigt, tillgängligt | Mat, kaféer, fristående butiker | En första kortlista. Varje typsnitt här är gratis på Google Fonts under en öppen licens som tillåter kommersiell användning. Några anteckningar värda att känna till innan du väljer. **Bebas Neue** har bara versaler, så det passar korta, utropade rader snarare än meningar. **Oswald** är en omarbetning av den klassiska Alternate Gothic-stilen och finns i flera vikter, vilket gör det mer flexibelt än Anton. **Fraunces** är ett variabelt typsnitt med axlar för mjukhet och ett lekfullt snett läge, så en familj kan gå från skarp till gosig. **Syne** blir märkbart bredare i de tyngre vikterna, vilket ger en fet rubrik verklig närvaro. Ett stående reainlägg med SOMMARREA i stora kondenserade versaler över en klar gradient Korta, utropade ord i versaler: det register som ett kondenserat snitt som Anton eller Bebas Neue är gjort för. Ett stående redaktionellt inlägg med en förfinad antikvarubrik som lyder Linnets tysta återkomst En redaktionell rubrik vill ha motsatsen: en antikva med hög kontrast som Playfair Display saktar ner läsaren och signalerar omsorg. ## Så väljer du rubriktypsnitt 1. **Skriv den riktiga rubriken först** Testa med dina faktiska ord, inte typsnittets exempeltext. Ett snitt som ser fantastiskt ut på 'Hamburgefonts' kan se konstigt ut på ditt varumärkesnamn. 2. **Mät ytan** En lång rubrik i ett smalt format, som en story eller en pin, behöver ett kondenserat snitt. Korta rader i breda format har råd med ett bredare. 3. **Matcha tonen mot budskapet** Skriv ner tre ord för hur rubriken ska kännas. Kortlista bara typsnitt som passar alla tre. 4. **Testa i den minsta verkliga storleken** Krymp designen till telefonstorlek eller till en miniatyr i ett rutnät. Tunna streck och trånga rundningar fallerar först. 5. **Para ihop det med ett lugnt brödtypsnitt** Välj ett lugnt, läsbart snitt till stödtexten så att rubriken förblir det högsta på sidan. ## Para ihop rubriktypsnitt med brödtext Ett rubriktypsnitt är en specialist. Det glänser i 90 px och tröttar ögat i 16 px. Para ihop det med ett arbetsdjur som läses bra i stycken och håller sig ur vägen. De säkraste paren kontrasterar på ett tydligt sätt, oftast antikva mot seriflös, eller kondenserat mot normal bredd. [Typsnittskombinationer](https://gradiently.design/sv/guide/font-pairing) förklarar principerna, och [Google Fonts-kombinationer](https://gradiently.design/sv/guide/google-fonts-pairings) har många fler. | Rubrik | Brödtext | Varför det fungerar | | --- | --- | --- | | Anton | Inter | Kondenserad slagkraft över en neutral, mycket läsbar seriflös | | Playfair Display | Source Sans 3 | Klassisk redaktionell kontrast mellan antikva och seriflös | | Bricolage Grotesque | DM Sans | En rubrik med karaktär över en lugn geometrisk brödtext | | DM Serif Display | DM Sans | Ritade som följeslagare, så proportionerna stämmer | | Archivo Black | Archivo | En familj i två vikter, det enklaste paret som finns | | Fraunces | Manrope | Varm, mjuk antikva över en ren, modern seriflös | Sex par byggda av gratis Google Fonts. Använd rubriksnittet till en eller två rader och låt brödsnittet bära allt annat. ## Så sätter du rubriktext: storlek, avstånd och radavstånd Även rätt typsnitt ser svagt ut med standardinställningar. Stor text behöver tätare bokstavsavstånd och tätare radavstånd än brödtext, och den behöver färre ord. I praktiken betyder det bokstavsavstånd kring minus 0,01 till minus 0,03 em och radavstånd kring 1,0 till 1,1. På ett socialt inlägg på 1080 px ligger en rubrik oftast mellan 90 och 140 px. [Teckenstorlek för Instagram-inlägg](https://gradiently.design/sv/guide/font-size-for-social-media) har hela skalan. ### Undvik - En lätt vikt för huvudrubriken på en telefon - Skrivstil eller dekorativa typsnitt för långa rubriker - Standardradavstånd på en rubrik med tre rader - Två olika displaytypsnitt i en design - Tolv ord i rubrikstorlek ### Gör - Halvfet till svart för sociala medier och miniatyrbilder - Ett displaysnitt för slagkraft, ett seriflöst för detaljer - Radavstånd nära 1,05 för staplade rader - Ett rubriksnitt, använt konsekvent - Fem till åtta ord, kapa tills det gör ont ```html ``` Att ladda ett rubrik- och brödtextpar från Google Fonts. Reservstacken håller raden ungefär lika bred medan typsnittet laddas. Bakgrunden spelar också roll. En kraftig rubrik på en rörig gradient kan ändå brytas upp där färgen skiftar bakom den. Gradiently-Marks flyttar sitt lugnaste område bakom dina ord och väljer ljus eller mörk färg rad för rad, och Lettering-behandlingarna, som Kontur, Innerlinje och Extrudering, ger en rubrik extra närvaro utan rutor eller skuggor. För stor text på affischer, se [displaytypsnitt](https://gradiently.design/sv/guide/display-fonts) och [feta typsnitt](https://gradiently.design/sv/guide/bold-fonts). För miniatyrbilder, [text på miniatyrbilder](https://gradiently.design/sv/guide/typography-for-thumbnails). ## FAQ ### Vilket är det bästa typsnittet för rubriker? Det beror på jobbet. Anton eller Bebas Neue passar högljudda, korta rubriker. Playfair Display eller DM Serif Display passar redaktionella. Montserrat eller Outfit passar vänliga, rena. ### Är Google Fonts gratis för kommersiellt bruk? Typsnitt på Google Fonts släpps under öppna licenser, mestadels SIL Open Font License, som tillåter kommersiell användning. Varje typsnitts sida på Google Fonts visar licensen, så kontrollera den innan du förlitar dig på den. [Typsnittslicenser](https://gradiently.design/sv/guide/font-licensing) förklarar detaljerna. ### Ska rubriker vara antikva eller seriflös? Båda fungerar. Seriflösa läses som raka och moderna, antikvor som redaktionella och förfinade. Välj efter den ton du vill ha och para sedan ihop med motsatsen till brödtexten. ### Hur stor ska en rubrik vara? På ett socialt inlägg på 1080 px ungefär 90 till 140 px. På en webbplats ungefär 2,5 till 4 gånger din brödtextstorlek, beroende på din typskala. ### Kan jag använda två rubriktypsnitt i en design? Det är sällan en bra idé. Ett displaysnitt plus ett lugnt brödtextsnitt ger tydligare hierarki och ser mer avsiktligt ut.