menu

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
Open Sans normal
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

  1. Lorem ipsum dolor
  2. Lorem ipsum dolor
  3. 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

  1. Lorem ipsum dolor
  2. Lorem ipsum dolor
  3. 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