Grafisk manual: Typografi
Detta är Nordens Fotoskolas design och stilguide för hemsidan 2020.
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; }
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.