Grafisk manual: Typografi

Detta är Nordens Fotoskolas design och stilguide för hemsidan 2020.
Rubrik: Arvo Vikt, Fet 700 H1: 3,3 em H2: 2,8 em H3: 2,3 em H4: 1,7 emIngress: Roboto Slab H5: 1,3 em Radavstånd, 1,6 emMellanrubrik: Roboto H6: 1,1 em Omvandla, Versaler Teckenmellanrum, 0,6 emBrödtext: Roboto Storlek, 20px Vikt, Normal 400 Radavstånd, 1,6 emBildtexter: Roboto Mono

Rubriker

Ingress: Roboto Slab
H5: 1,3 em
Radavstånd, 1,6 em

Rubrik: Arvo
Vikt, Fet 700
H1: 3,2 em
H2: 2,8 em
H3: 2,3 em
H4: 1,7 em

ASTRA CSS
h1 {line-height:1.2 !important;}
h2 {line-height:1.2 !important;}
h3 {line-height:1.3 !important;}
h4 {line-height:1.4 !important;}
h5 {line-height:1.5 !important;}
/*h6 {line-height:1.6 !important;}*/
p:last-child {margin-bottom: 0 !important;}

H1: En rubrik med Arvo – 3,2 em

H2: En rubrik med Arvo – 2,8 em

H3: En rubrik med Arvo – 2,3 em

H4: En rubrik med Arvo – 1,7 em

H5: Denna ingress är toppen (Roboto Slab – 1,3 em)
H6: Detta är en mellanrubrik (Roboto, 1,1 em)

Ingress

Ingress: Roboto Slab
H5: 1,3 em
Radavstånd, 1,6 em

Detta är en ingress i H5. Den skiljer sig från ett blogginlägg genom att den finns kvar på samma plats och kommer direkt efter rubriken på sidan. Här sammanfattas det viktigaste och är en ingång till artikeln. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Brödtext

Brödtext: Roboto
Storlek, 20px
Vikt, Normal 400
Radavstånd, 1,6 em

Mellanrubrik: Roboto
H6: 1 em
Omvandla, Versaler
Radavstånd, 0,5 em
Teckenmellanrum, 0,6 em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo metus, scelerisque ac velit in, vestibulum posuere mi. Maecenas euismod erat non massa egestas, non finibus odio consequat. Morbi commodo finibus urna aliquam accumsan. Nunc nec blandit risus.

En mellanrubrik i H6

Praesent ullamcorper urna at felis dapibus suscipit. Vestibulum porttitor sit amet lectus a rhoncus. Nullam quis lorem accumsan, viverra nunc ut, efficitur velit. Denna mening startar med fetad text duis in metus ullamcorper mi rhoncus aliquam. Maecenas dignissim nisi at feugiat ornare. Cras eleifend auctor eros eget pharetra. Sed luctus vehicula molestie.

Bildtext

Bildtext: Roboto Condensed
Storlek, 16px
Vikt, Normal 500
Stil, Kursiv
Radavstånd, 20px

.wp-caption-text {text-align: left;
font-family: ”Roboto Condensed, Sans-serif;
font-size: 16px;
font-weight: 500;
font-style: italic;
line-height: 20px;
margin-bottom: 15px !important;
margin-top: 5px !important; }

Den här bildtexten gör sitt bästa för att inte beskriva bilden. Foto: Jonas Berggren
Den här bildtexten gör sitt bästa för att inte beskriva bilden. Fast denna gör det faktiskt på hela två rader så att vi kan se hur radavståndet ser ut mellan raderna. Foto: Jonas Berggren

Länkar

Peka på denna länk för att se hur den fungerar. Länken är orange i brödtexten.. Som du märker när du har pekaren på länken blir den svart och understruken.

Finstilt

Finstilt: Roboto
Storlek, 0,8 em
Vikt, Normal 400
Radavstånd, 1,6 em

Finstilt är en text skriven med liten grad, det vill säga storlek. Begreppet har, framför allt i formen det finstilta, kommit att användas för en del av ett kontrakt, avtal eller liknande som innehåller en mängd detaljer utöver överenskommelsens huvuddrag.

Praesent ullamcorper urna at felis dapibus suscipit. Vestibulum porttitor sit amet lectus a rhoncus. Nullam quis lorem accumsan, viverra nunc ut, efficitur velit. Denna mening startar med fetad text duis in metus ullamcorper mi rhoncus aliquam. Maecenas dignissim nisi at feugiat ornare. Cras eleifend auctor eros eget pharetra. Sed luctus vehicula molestie.

Finstilt är en text skriven med liten grad, det vill säga storlek. Begreppet har, framför allt i formen det finstilta, kommit att användas för en del av ett kontrakt, avtal eller liknande som innehåller en mängd detaljer utöver överenskommelsens huvuddrag.

Praesent ullamcorper urna at felis dapibus suscipit. Vestibulum porttitor sit amet lectus a rhoncus. Nullam quis lorem accumsan, viverra nunc ut, efficitur velit. Denna mening startar med fetad text duis in metus ullamcorper mi rhoncus aliquam. Maecenas dignissim nisi at feugiat ornare. Cras eleifend auctor eros eget pharetra. Sed luctus vehicula molestie.

Citat

Citat: Arvo
Storlek, 36px
Vikt, Normal 400
Utseende: Kursiv

blockquote::before {
bottom: -160px;
left: -55px; }

blockquote::before {font: 9em Georgia, ”Times New Roman”, Times, serif;
font-style: italic;
content: ’\201D’;
position: absolute;
color: #d9dada;
z-index: -1;
bottom: -160px;
left: -55px;
text-align: left; }

blockquote {border-style: none;
padding: 45px 20px 40px 50px;
font-family: Arvo, Georgia, serif;
font-size: 36px;
font-style: italic;
margin: 0; }

.block-orange blockquote
{color: #eb6622 !important; }
.block-orange blockquote::before
{color: #d9dada !important; }

Duis in metus ullamcorper mi rhoncus aliquam. Maecenas dignissim nisi at feugiat ornare.

Duis in metus ullamcorper mi rhoncus aliquam. Maecenas dignissim nisi at feugiat ornare.

Prenumerera på vårt nyhetsbrev!

I nyhetsbrevet informerar vi bland annat om när det är dags att söka till Nordens Fotoskola eller kanske om det är någon ny examensutställning på gång.
Genom att klicka på prenumerera här ovan samtycker du till att Nordens Fotoskola lagrar din e-postadress i vår databas, i enlighet med dataskyddsförordningens (GDPR) direktiv.