Spectral font

By Jean-Baptiste Levee on Oct 26, 2018

Spectral

Spectral

Spectral

Spectral

Spectral

Spectral

Production Type was commissioned by Google Fonts to create a new typeface primarily intended for immersive reading, that is now available in GSuite, Google’s collaborative office-suite for documents, slides and spreadsheets.

Spectral is a new and versatile serif face available in seven weights of roman and italic, with small caps. Spectral offers an efficient, beautiful design that’s intended primarily for text-rich, screen-first environments and long-form reading. Brought to you by Production Type and commissioned by Google Fonts, Spectral is now free to use across Google Docs, Sheets, and Slides, or in any of your projects.

The project is led by Production Type, a digital type design agency based in Paris. To contribute ideas and feedback, see github.com/productiontype/spectral
AAAaaa
<style type="text/css">
@font-face{
    font-family:"spectral-regular";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.regular.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.regular.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.regular.ttf") format("truetype");
}
span.font0{font-family:"spectral-regular";font-size:px;text-transform:;}
</style>
Spectral Regular
<style type="text/css">
@font-face{
    font-family:"spectral-extralight";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extralight.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extralight.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extralight.ttf") format("truetype");
}
span.font1{font-family:"spectral-extralight";font-size:px;text-transform:;}
</style>
Spectral ExtraLight
<style type="text/css">
@font-face{
    font-family:"spectral-light";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.light.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.light.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.light.ttf") format("truetype");
}
span.font2{font-family:"spectral-light";font-size:px;text-transform:;}
</style>
Spectral Light
<style type="text/css">
@font-face{
    font-family:"spectral-medium";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.medium.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.medium.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.medium.ttf") format("truetype");
}
span.font3{font-family:"spectral-medium";font-size:px;text-transform:;}
</style>
Spectral Medium
<style type="text/css">
@font-face{
    font-family:"spectral-semibold";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.semibold.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.semibold.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.semibold.ttf") format("truetype");
}
span.font4{font-family:"spectral-semibold";font-size:px;text-transform:;}
</style>
Spectral SemiBold
<style type="text/css">
@font-face{
    font-family:"spectral-bold";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.bold.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.bold.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.bold.ttf") format("truetype");
}
span.font5{font-family:"spectral-bold";font-size:px;text-transform:;}
</style>
Spectral Bold
<style type="text/css">
@font-face{
    font-family:"spectral-extrabold";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extrabold.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extrabold.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extrabold.ttf") format("truetype");
}
span.font6{font-family:"spectral-extrabold";font-size:px;text-transform:;}
</style>
Spectral ExtraBold
<style type="text/css">
@font-face{
    font-family:"spectral-italic";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.italic.ttf") format("truetype");
}
span.font7{font-family:"spectral-italic";font-size:px;text-transform:;}
</style>
Spectral Italic
<style type="text/css">
@font-face{
    font-family:"spectral-extralight-italic";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extralight-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extralight-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extralight-italic.ttf") format("truetype");
}
span.font8{font-family:"spectral-extralight-italic";font-size:px;text-transform:;}
</style>
Spectral ExtraLight Italic
<style type="text/css">
@font-face{
    font-family:"spectral-light-italic";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.light-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.light-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.light-italic.ttf") format("truetype");
}
span.font9{font-family:"spectral-light-italic";font-size:px;text-transform:;}
</style>
Spectral Light Italic
<style type="text/css">
@font-face{
    font-family:"spectral-medium-italic";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.medium-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.medium-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.medium-italic.ttf") format("truetype");
}
span.font10{font-family:"spectral-medium-italic";font-size:px;text-transform:;}
</style>
Spectral Medium Italic
<style type="text/css">
@font-face{
    font-family:"spectral-semibold-italic";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.semibold-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.semibold-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.semibold-italic.ttf") format("truetype");
}
span.font11{font-family:"spectral-semibold-italic";font-size:px;text-transform:;}
</style>
Spectral SemiBold Italic
<style type="text/css">
@font-face{
    font-family:"spectral-bold-italic";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.bold-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.bold-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.bold-italic.ttf") format("truetype");
}
span.font12{font-family:"spectral-bold-italic";font-size:px;text-transform:;}
</style>
Spectral Bold Italic
<style type="text/css">
@font-face{
    font-family:"spectral-extrabold-italic";
    src:url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extrabold-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extrabold-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/s/143/15143/file/spectral.extrabold-italic.ttf") format("truetype");
}
span.font13{font-family:"spectral-extrabold-italic";font-size:px;text-transform:;}
</style>
Spectral ExtraBold Italic

Ad1

ad2