Our primary typeface is an essential part of our brand identity; in combination with our logo and colour palette, it helps our brand to be easily recognised.
The Gotham web font (Gotham ScreenSmart) used in the GS1 global brand web guidelines is activated through a subscription service, so no purchase is necessary for GS1 Member Organisations (MOs). Every MO's base URL is already included in the subscription. This means that for your MO's live server, there is nothing you have to do in order for the Gotham font to work correctly on your site other than using the code provided in the download on For developers.
<aside> <img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Every MO's URL automatically has access to the Gotham web font. In order to also use Gotham for any development site on a subdomain, please send an email to the GS1 Global Office including your MO name and the subdomain you would like added to the subscription.
</aside>
Gotham supports over 564 languages with expanded Latin, Cyrillic and Greek character sets. A full listing of supported languages can be found here: https://www.typography.com/fonts/gotham/features/gotham-language-support
The desktop version of Gotham ScreenSmart can be purchased to create more accurate-looking page mockups. The cost of the typeface is based on the total number of computer licences needed. You can purchase Gotham ScreenSmart here: **https://www.typography.com/fonts/gotham/styles/screensmart**
<aside> <img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Warning: Typography styles in the design resource files are for visual reference only and should not be used for development.
</aside>
The CSS provided with the web guidelines implements responsive font sizing using rem and vw units so that the calculated size varies depending on the users' viewport and root font size.
Example: h1 {font-size: calc(1.06rem + 1.92vw);}
This enables a cohesive user experience as text and spacing are automatically smaller for small screen sizes and larger for large screen sizes.
While "ugly" numbers in the browser are commonplace, the limitations of web design software require us to used fixed sized units (px). Because of this, the specs from the design resource files are approximations and should only be used to create mockups for stakeholder approval. Developers should use the styles and classes provided in the code rather than using the values from the specs.
For more information, see:
Getting started: for developers
Getting started: for designers
