Typography
Open Sans is our primary typeface. Open Sans Light should be used in all communication materials of sofatutor, in combination with Helvetica as detailed below.
Open Sans can be directly downloaded from Google Fonts: https://fonts.google.com/specimen/Open+Sans
Titles
We normally use Open Sans only for titles. Type size and weight must establish a clear hierarchy of information. To add this flexibility, Open Sans Family can be used just in Light and Bold. The color defined is our corporated Black (#333333).
The basic set of styles are based on a typographic scale of 14, 16, 18, 22, 32 and 42.
TITLE STYLES
SPECS
42px Heading h1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.h1
font-size: 42px
line-height: 1.5
32px Heading h2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.h2
font-size: 32px
line-height: 1.5
22px Heading h3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.h3
font-size: 22px
line-height: 1.8
18px Heading h4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.h4
font-size: 18px
line-height: 1.8
16px Heading h5 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.h5
font-size: 16px
line-height: 1.5
14px Heading h6 left Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.h6
font-size: 14px
line-height: 1.7
Texts
Helvetica Family is used as a complementary typeface for regular texts and small size information. The color for normal texts is #999999, however we can find exceptions such as #666666 or #333333. The color of all text-size classes can be modified by a color class like .gray - the color names should be taken from the foundation- palette. For desktop applications in a nongraphic artwork environment such as Microsoft Word and PowerPoint, should Helvetica be used as a default font. Still, in the titles of those cases, still could be Open Sans applied there, only if needed. If Helvetica is not available, it should be switched for Arial family instead.
TEXT STYLES
SPECS
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.subheader
color: #666
font-size: 18px
font-face: OpenSans
line-height: 1.8
This sort of quotes also work for the ones in the sidebar boxes. At vero eos et accusam et justo duo dolores et ea rebum.
blockquote
color: #666
font-size: 18px
font-face: OpenSans-Italic
line-height: 1.8
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
paragraph
color: #666
font-size: 16px
font-face: Helvetica
line-height: 1.8
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.text-small
font-size: 14px
font-face: Helvetica
line-height: 1.7
The color of all text-size classes can be modified by a color class like .gray - the color names should be taken from the foundation-palette.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.text-xsmall
font-size: 12px
font-face: Helvetica
line-height: 1.7
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.text-xxsmall
font-size: 10px
font-face: Helvetica
line-height: 1.6