Typographic Style Guide
Wild Bird Trust typographic elements applied
Headings
Josefin Sans (Google Font)
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( )
Text
Raleway (Google Font)
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ? ! @ # & * • ( )
H1 Heading
Used for Hero and/or Page Titles. Josefin Sans, size: 64px, color: #ffffff (white), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: none/normal/defaultÂ
H2 Heading
Used for Block Titles, Page Headings, Blog Titles. Josefin Sans, size: 54px, color: #000000 (black), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: none/normal/defaultÂ
H3 Heading
Used for In-Page Sub Headings, Column Headings, Text Block Headings, Featured/Highlighted Text. Josefin Sans, size: 34px, color: #000000 (black), font weight: semi-bold 600, line height 1.4em, Letter space: 1px, text transform: uppercaseÂ
H4 Heading
H4 Heading
H4 Heading
Used for Hero text description, in-page highlighted paragraph. Any text that is highlighted for emphasis. Josefin Sans, size: 18px, color: #000000 (black) #c4b583 (gold) #23a455 (green), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: none/default/normal
H5 Heading
H5 Heading
H5 Heading
Used for section headings to denote information subset. Josefin Sans, size: 16x, color: #000000 (black) #c4b583 (gold) #23a455 (green), font weight: semi-bold 600, line height 1.4em, Letter space: 2px, text transform: uppercase
H6 Heading
H6 Heading
H6 Heading
Used for image credits, usually with a short horizontal line aligned left. Josefin Sans, size: 14x, color: #000000 (black) #c4b583 (gold) #23a455 (green), font weight: semi-bold 600, line height 1.4em, Letter space: 0px, text transform: uppercase
Body TextÂ
Raleway 17px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis leo et est blandit, ac aliquet arcu congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus quis est tincidunt ex suscipit eleifend ut a metus. Aenean nisl orci, fringilla vitae sodales rhoncus, sagittis vel velit. Etiam sem sapien, pellentesque interdum ultricies at, dapibus ac dolor. Nulla facilisi. Vestibulum vitae consectetur sapien. Proin varius egestas gravida. Donec vel hendrerit lectus. Sed laoreet, mauris nec feugiat convallis, nisi neque egestas eros, ac eleifend ante ex a est. Vestibulum erat mauris, commodo vel efficitur non, auctor varius eros. Quisque varius, orci eget pretium posuere, sem tellus iaculis lectus, non eleifend quam metus et nisl. Nullam ex sem, varius at mauris vitae, dignissim lacinia justo.
Cras leo felis, eleifend ultrices dignissim vel, scelerisque at justo. Vestibulum felis urna, vestibulum eget lobortis quis, vehicula at tellus. Nullam ut risus pellentesque, pharetra dolor nec, ullamcorper nibh. Cras consectetur urna sit amet malesuada posuere. Aliquam rhoncus congue ante id laoreet. Nam fringilla magna diam, ornare vehicula diam mattis at. Maecenas et risus in magna hendrerit ultrices congue semper tellus. Suspendisse molestie eleifend venenatis. Curabitur ultrices porta quam eget tristique. Sed quis malesuada urna, egestas congue nunc. Vivamus interdum orci purus, eu tincidunt nulla rhoncus gravida. Sed sit amet placerat massa, vel commodo orci.
Suspendisse at commodo est, ac imperdiet nulla. Nullam posuere ac sapien quis tincidunt. In finibus consectetur pretium. Aenean quis massa quis elit malesuada dignissim. Pellentesque nisi nibh, facilisis.
Generated 3 paragraphs, 250 words, 1734 bytes of Lorem Ipsum
Blockquote
Font: Raleway 34px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Buttons
Josefin Sans 500, uppercase; 1.3 vw – size, 1.2 em – line spacing; 2 – letter spacingÂ
Text Hyperlink
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.