General Typography

There are two fonts used in Zupply, the "general font" is used mostly for labels and gui elements. The "accent font" is used for elements like headlines. The desktop body size for type is 16px, all other font sizes are set in em.

General Font

Helvetica Neue is used as the general font with Helvetica and Arial as a backup for users who do not have Helvetica Neue installed on their computer.


{
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
}

Accent Font

ITC Officina Sans (alternatively Source Sans Pro) is used as the accent font for Headlines and special elements.


{
	font-family: "ITC Officina Sans", Helvetica, Arial, Sans-serif;
	font-family: "Source Sans Pro", Helvetica, Arial, Sans-serif;	
}

Headlines

h1. A very large headline.

An h1 is only used for very important content like a users name on her profile. The color is either white or zupply-blue-dark.

h2. A large headline.

An h2 is used for page main headlines, etc. The color is either white or zupply-blue-dark.

h3. The normal headline format.

An h3 is used for most headlines, for e.g. section headlines. The color is either white or zupply-blue-dark.

h4. This is a medium priority headline.

An h4 is used for item headlines like project headlines in the project history in a users profile. The color is zupply-blue-dark.

h5. This is a low priority headline.

An h5 is used for headlines within a section like headlines for paragraphs. The color is the default text color.


h1, h2, h3, h4, h5{
	font-family: "ITC Officina Sans", Helvetica, Arial, Sans-serif;
	font-weight: 600;
	color: rgb(0,135,190); /* $zupply-blue-dark */
}
h1{
	font-size: 3em;
	line-height: 100%;
}
h2{
	font-size: 1.5em;
	line-height: 130%;
}
h3{
	font-size: 1.1em;
}
h4{
	font-size: 1em;
	margin-bottom: 10px;
	font-weight: 400;
}
h5{
	font-size: 1em;
	color: inherit;
	margin-bottom: 10px;
}

Copy Text

Lorem far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Lorem One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.


p{
	font-size: 1em;
	font-family: "ITC Officina Sans", Helvetica, Arial, Sans-serif;
	font-weight: 400;
	color: rgb(60,60,60);  /* $black */
}

Links & Special text formats

Important link

An important link is designed to be noticed in a text.


a{
	color: rgb(0,135,190); /* $zupply-blue-dark */
	text-decoration: underline;
	cursor: pointer;
}
a:hover{
    text-decoration: none;
}

Show/read more link

A show/read more link shows the user that she can get more information on a topic, once she reached the end of a text, but it does not distract while reading. read more


a.read-more{
	color: rgb(140,140,140); /* $gray */
	text-decoration: underline;
	cursor: pointer;
	transition: color .4s ease .1s;
	-webkit-transition: color .4s ease .1s;
}
a.read-more:hover{
	text-decoration: none;
	color: rgb(0,135,190); /* $zupply-blue-dark */
}

Labels

To show a user what kind of information is in a textarea, labels are used. The labels must be always present but not obtrusive. A label is clickable and sets the focus to the related field.

Your name


label{
	color: rgb(140,140,140); /* $gray */
	font-size: 0.9em;
	padding-right: 10px;
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
	cursor: pointer;
	transition: color .4s ease .1s;
	-webkit-transition: color .4s ease .1s;
}
label:hover{
	color: rgb(0,135,190); /* $zupply-blue-dark */
}