Typography
Font family
We officially use the Museo Sans font family in three different weights.
Font weight
The font-weight property defines how bold the text is.
Regular (300). Use for body text and paragraphs.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789@#$&
font-family: "museo_sans300", sans-serif; font-weight: 300;
📋 Copy
Bold (700). Use for strong highlighted text and for text in buttons.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789@#$&
font-family: "museo_sans700", sans-serif; font-weight: 700;
📋 Copy
Extra Bold (900). Use for headlines.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789@#$&
font-family: "museo-sans", sans-serif; font-weight: 900;
📋 Copy
Font patterns
To achieve legible typography across devices we use flexible font sizes and convenient combinations of headings and paragraphs.
You're Just a Step Away From Great Photos
h1 {
font-family: "museo-sans", sans-serif;
font-weight: 900;
margin: 0 1rem 1rem 1rem;
font-size: 4.1rem;
font-size: clamp(3.6rem, 3.4938rem + 0.354vw, 4.4rem);
line-height: 1.3;
}📋 Copy
You're Just a Step Away From Great Photos
h2 {
font-family: "museo-sans", sans-serif;
font-weight: 900;
margin: 0 1rem 1rem 1rem;
font-size: 3.2rem;
font-size: clamp(2.6rem, 2.4673rem + 0.4425vw, 3.6rem);
line-height: 1.4;
}📋 Copy
You're Just a Step Away From Great Photos
h3 {
font-family: "museo-sans", sans-serif;
font-weight: 900;
margin: 0 1rem 1rem 1rem;
font-size: 2.4rem;
font-size: clamp(2.1rem, 2.0336rem + 0.2212vw, 2.6rem);
line-height: 1.4;
}📋 Copy
You're Just a Step Away From Great Photos
h4 {
font-family: "museo-sans", sans-serif;
font-weight: 900;
margin: 0 1rem 1rem 1rem;
font-size: 1.9rem;
font-size: clamp(1.7rem, 1.6469rem + 0.177vw, 2.1rem);
line-height: 1.6;
}📋 Copy
You're Just a Step Away From Great Photos
h5 {
font-family: "museo-sans", sans-serif;
font-weight: 900;
margin: 0 1rem 1rem 1rem;
font-size: 1.5rem;
font-size: clamp(1.4rem, 1.3735rem + 0.0885vw, 1.6rem);
line-height: 1.4;
}📋 Copy
You're Just a Step Away From Great Photos
h6 {
font-family: "museo-sans", sans-serif;
font-weight: 900;
margin: 0 1rem 1rem 1rem;
font-size: 1.3rem;
font-size: clamp(1.2rem, 1.1735rem + 0.0885vw, 1.4rem);
line-height: 1.6;
}
📋 Copy
ZPS X is the most universal photo software there is. RAW processing. Layer support. Presets. Retouching tools. Video editing. Cataloging. It’s all there.
/* important paragraph in a hero block */
.text-lead p {
font-family: 'museo_sans300', sans-serif;
font-size: 1.9rem;
font-size: clamp(1.7rem, 1.6469rem + 0.1770vw, 2.1rem);
line-height: 1.6;
color: #222;
}
📋 Copy
ZPS X is the most universal photo software there is. RAW processing. Layer support. Presets. Retouching tools. Video editing. Cataloging. It’s all there.
/* simple paragraph */
p {
font-family: 'museo_sans300', sans-serif;
font-size: 1.7rem;
font-size: clamp(1.6rem, 1.5867rem + 0.0442vw, 1.7rem);
line-height: 1.5;
margin: 0 1rem 1rem 1rem;
color: #222;
}
📋 Copy