Typografie

Lettertypes, interlinie en meer

Basis:
Open Sans 

 

Actie en accent :
Reklamescript
(120% horizontaal geschaald) 

  • Beeldscherm / pc
  • Web (body)
    Open Sans

 

Drukwerk

Kop

 
  • font: Open Sans Bold
  • corps: 15
  • interlinie: 22,5
  • kleur: zwart

Ondertitel

 
  • font: Open Sans Regular
  • corps: 10,5
  • interlinie: 15,75
  • kleur: zwart

Intro

 
  • font: Open Sans Light
  • corps: 12
  • interlinie: 18
  • kleur: zwart, 56%

Tussenkop

 
  • font: Open Sans Bold
  • corps: 10,5
  • interlinie: 15,75
  • kleur: zwart
  • witregel toevoegen tussen tussenkop en bodycopy

Subkop

 
  • font: Open Sans Bold
  • corps: 9
  • interlinie: 13,5
  • kleur: vrij binnen huisstijlkleurenpalet

Body

 
  • font: Open Sans Light
  • corps: 9
  • interlinie: 13,5
  • kleur: zwart

Body cursief

 
  • font: Open Sans Light italic
  • corps: 9
  • interlinie: 13,5
  • kleur: zwart

Actiematige kopregel

 
  • Reklamescript regular
  • 120% horizontaal geschaald
  • corps: vrij

Markering

 
  • markering rood: 25% van PMS 193
  • markering blauw: 25% van Cyaan

Opsomming

  • First option
  • Second option
    • Second option A
    • Second option B
  • Third option
  • Fourth option
  1. First option
  2. Second option
  3. Third option
  4. Fourth option
 

Quotes

 

 

 

  • font: Open Sans Light Italic
  • corps: 14
  • interlinie: 21
  • markering rood: 25% van PMS 193
  • markering blauw: 25% van Cyaan

 

Markering vlakken van quotes

  • 75% van primaire of secundaire kleur

 

 Afzender van quotes

  • font: Reklamescript (120% breder)
  • corps: 13
  • interlinie: 16  

Online gebruik

Kop H1

Heading 1

h1 {
margin-bottom: 21px;
font-family: Open-Sans-Bold;
line-height: 42px;
color: #242424;
}

Kop H2

 Heading 2

h2 {
margin-top: 21px;
margin-bottom: 21px;
font-family: Open-Sans-Bold;
font-size: 22px;
line-height: 33px;
color: #242424;
}

Subkop H2

 Subheading 2

h2.sub {
margin-bottom: 21px;
font-family: Open-Sans-Light;
font-size: 20px;
line-height: 30px;
}

h2.sub .red {
color: #F7D9E1;
}

h3.sub .blue {
color: #C5E7FL;
}

Intro

The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

intro {
margin-bottom: 21px;
font-family: Open-Sans;
font-size: 18px;
line-height: 27px;
color: #242424;
}

H3

Voorbeeld van een tussenkop

The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

h3 {
margin-bottom: 21px;
margin-top: 21px;
font-family: Open-Sans-Bold;
font-size: 16px;
line-height: 24px;
color: #242424;
}

H4

Voorbeeld van een subkop

The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

h4 {
margin-top: 21px;
margin-bottom: 21px;
font-family: Open-Sans-Bold;
font-size: 14px;
line-height: 21px;
color: #242424;
}

Body

The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

body {
margin-bottom: 21px;
font-family: Open-Sans;
font-size: 14px;
line-height: 21px;
color: #242424;
}

Body cursief

into every corner of our minds

em {
font-style: italic;
}

Arcering

 

 

The difficulty lies, not in the new ideas , but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

The difficulty lies, not in the new ideas , but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

Alleen in lopende teksten, niet door elkaar gebruiken

red {
background-color: #F7D9E1; 

 

blue {
background-color: #C5E7F1;

Unordered list

  • First option
  • Second option
    • Second option A
    • Second option B
  • Third option
  • Fourth option

ul {
margin: 0 0 21px 0;
}

ul li {
list-style: none;
padding-left: 25px;
background: transparent url(bullet.gif) no-repeat left 5px;
line-height: 21px;
}

Ordered list
  1. First option
  2. Second option
  3. Third option
  4. Fourth option

ol {
margin: 0 0 21px 0;
}

ol li {
line-height: 21px;
}

Links

The difficulty lies, not in the new ideas , but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

a:link {
color: #CC0033;
position: relative;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
top: 1px;
}

a:visited {
color: #974C5F;
}

blockquote

"The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds."

 

"The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds."

blockquote {
margin-bottom: 21px;
margin-top: 21px;
font-family: Open-Sans-LightItalic;
font-size: 24px;
line-height: 36px;
}

blockquote.red {
color: #F7D9E1;
}

blockquote.blue {
color: #C5E7FL;
}