Typografi
Södras typografi är både sofistikerad och kraftfull. Använd ett relativt litet radavstånd för att få Södrakaraktär i både rubriker och löpande text. Var inte rädd för att ha stora rubriker och använda storlekskontrast för att lyfta det som är mest relevant för besökaren. Sätt i första hand text i svart. När bakgrunden består av en mörk färg eller ett foto sätter du texten i vitt (negativt). Välj det som ger bäst läsbarhet. Texten ska alltid vara vänsterställd. Vi använder oss av två typsnitt på webben: Georgia och Open Sans.
Typsnitt
Vi använder oss av två typsnitt på webben: Georgia och Open Sans.
Georgia
- Sidrubriker
- Rubriker
- Ingresser
- Brödtext
- Citat
- Breadcrumbs
Open Sans
- Mellanrubriker
- Navigation
- Taggar/etiketter
- Bildtext
- Effektrubriker
- Kontaktuppgifter
- Fakta-/inforutor
Responsiv typografi
De större rubriknivåerna kräver olika textstorlek beroende på skärmbredd. Se våra rekommendationer i tabellen nedan.
| Small | < 740px |
|---|---|
| Medium | < 980px |
| Large | < 1300px |
| Wide | > 1300px |
Se tabellen nedan för grader vid olika skärmbredder.
| Typ | Exempel | Small | Medium | Large | Wide |
|---|---|---|---|---|---|
| h1 |
Georgia normal |
30px | 36px | 48px | 60px |
| h2 |
Georgia normal |
22px | 30px | 36px | 36px |
| h3 |
Georgia normal |
18px | 24px | 24px | 24px |
| Mellanrubrik |
Open Sans bold |
16px | 16px | 16px | 16px |
| Brödtext |
Georgia normal |
15px | 15px | 15px | 15px |
| Bildtext |
|
13px | 13px | 13px | 13px |
Exempel
Det här är en eyebrow
Rubrik h1 med linje
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus accusantium quidem fugit nesciunt iste, tempora officiis fugiat vitae veniam cum. Perferendis minima aperiam sit optio odit quod est non, illum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Rubrik h2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia molestiae explicabo debitis sed repellat fuga et dolor, repudiandae architecto tenetur laborum consequatur recusandae necessitatibus, pariatur, a impedit amet culpa qui!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Rubrik h3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ex architecto aperiam illum modi veniam laborum error rerum. Quia, adipisci fugiat eaque illum maiores vitae quas molestias ratione nobis vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Underrubrik
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde repudiandae cum aspernatur deserunt odio impedit, in ea ad mollitia laboriosam magnam, eveniet, doloribus temporibus vero autem quibusdam quis consequuntur! Repellat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Punktlista
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
Numrerad lista
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
Rubrik h1 utan linje
Ingress. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique veritatis, magni delectus totam in qui ad aperiam cum itaque nobis, reprehenderit vero porro. Assumenda sapiente distinctio repellendus quaerat libero adipisci!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae expedita excepturi eum cupiditate deleniti, error adipisci similique ex quos repellendus sint quibusdam nobis unde esse consequatur, veritatis dolor. Quaerat, ipsa!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Rubrik h2 med linje
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos minus nisi, asperiores labore, nulla minima aliquam repudiandae sapiente quasi excepturi nihil odit libero sint modi facilis non reiciendis illo ratione.
Simplicity is the opposite of simple-mindedness.
/Edward Tufte
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos minus nisi, asperiores labore, nulla minima aliquam repudiandae sapiente quasi excepturi nihil odit libero sint modi facilis non reiciendis illo ratione.
Alternativ rubrik 1
Alternativ rubrik 2
Det här är en eyebrow
Rubrik h1 med linje
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus accusantium quidem fugit nesciunt iste, tempora officiis fugiat vitae veniam cum. Perferendis minima aperiam sit optio odit quod est non, illum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Rubrik h2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia molestiae explicabo debitis sed repellat fuga et dolor, repudiandae architecto tenetur laborum consequatur recusandae necessitatibus, pariatur, a impedit amet culpa qui!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Rubrik h3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ex architecto aperiam illum modi veniam laborum error rerum. Quia, adipisci fugiat eaque illum maiores vitae quas molestias ratione nobis vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Underrubrik
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde repudiandae cum aspernatur deserunt odio impedit, in ea ad mollitia laboriosam magnam, eveniet, doloribus temporibus vero autem quibusdam quis consequuntur! Repellat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Punktlista
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
Numrerad lista
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
Rubrik h1 utan linje
Ingress. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique veritatis, magni delectus totam in qui ad aperiam cum itaque nobis, reprehenderit vero porro. Assumenda sapiente distinctio repellendus quaerat libero adipisci!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae expedita excepturi eum cupiditate deleniti, error adipisci similique ex quos repellendus sint quibusdam nobis unde esse consequatur, veritatis dolor. Quaerat, ipsa!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cum alias voluptate nesciunt recusandae aliquam quis omnis, inventore quisquam beatae corrupti! Temporibus ratione, voluptatem vitae expedita modi nam ut perspiciatis!
Rubrik h2 med linje
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos minus nisi, asperiores labore, nulla minima aliquam repudiandae sapiente quasi excepturi nihil odit libero sint modi facilis non reiciendis illo ratione.
Simplicity is the opposite of simple-mindedness.
/Edward Tufte
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos minus nisi, asperiores labore, nulla minima aliquam repudiandae sapiente quasi excepturi nihil odit libero sint modi facilis non reiciendis illo ratione.
Alternativ rubrik 1
Alternativ rubrik 2