Typography

Typography

We have one typeface for the HP.com visual identity, Forma DJR. This font provides the cleanliness, timelessness, and versatility needed for a big brand. But it also has a certain warmth, with enough intricacies, nuances, and quirks to satisfy designers and those with a keen eye, as well as flexibility and technical features.
 
Learn more about the history of Forma

Type styles

HP.com uses Forma DJR Micro only. It has looser spacing and slight optical adjustments that improve its legibility and readibilty on screen and at smaller sizes.

 

We use Regular weight for the majority of our font system, with the exception of 'Caption 1' and our CTA buttons, which use Medium for accessibilty purposes.

Font Sizing

Since we only use Forma in one weight, it's important to use sizing to establish hiearchy within a page. Below are the available type sizes in our library.

font-style-5xl

(currently only available in Custom info banner and Title and Text components)

Lightning

font-style-4xl

(currently only available in Custom info banner and Title and Text components)

Lightning-fast, two-

font-style-3xl

(currently only available in Custom info banner and Title and Text components)

Lightning-fast, two-sided color printing

font-style-xxl

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

font-style-xl

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

font-style-H1

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

font-style-H2

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

font-style-H3

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

font-style-H4

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

font-style-H5

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

font-style-H6

Lightning-fast, two-sided color printing for less with the HP OfficeJet Pro 8720.

Subtitle

Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any situation with Windows 10 Pro14 and powerful security, collaboration, and connectivity features from HP.

Body-2

Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any situation with Windows 10 Pro14 and powerful security, collaboration, and connectivity features from HP.

Body-1

Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any situation with Windows 10 Pro14 and powerful security, collaboration, and connectivity features from HP.

Caption-1

Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any situation with Windows 10 Pro14 and powerful security, collaboration, and connectivity features from HP.

Caption-2

Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any situation with Windows 10 Pro14 and powerful security, collaboration, and connectivity features from HP.

Footnotes

Speed up image creation and management of hardware, BIOS, and security through Microsoft System Center Configuration Manager. Be productive in any situation with Windows 10 Pro14 and powerful security, collaboration, and connectivity features from HP.

Type rules
 

  1. One typeface only (Forma DJR Micro)
  2. No mixing weights
  3. No color type (unless over photo, in which white is acceptable)
  4. Do not apply ALL CAPS globally (use for things like subheads or seperating same size content)
  5. Layouts are always left aligned (Centered type exemptions could include an end card on film, product demo video frames)
  6. Micro leading should be 100%-140% of type size

Don't use different type weights

Don't use different colored type

Don't use ALL CAPS

(exceptions can be made for small highlights or product video)

Don't right align text

Don't use cramped leading

Formatting rules
 

  1. Headlines should be in title case
  2. Subheads should be in sentence case
  3. Body copy should be in sentence case
  4. Features or Specs may be in ALL CAPS
  5. CTAs should be in sentence case
     

*Exceptions can be made when certain product names legally call for certain casing.

Languages currently supported by Forma DJR Micro

  • English
  • Latin Extended - This is covers: Latin-1 and Latin Extended
  • Cyrillic - These will not only support Russian but also include Extended Cyrillic and localized forms for Bulgarian, Serbian and Ukrainian.
  • Afrikaans, Albanian, Alsatian, Basque, Bislama, Breton, Catalan, Chamorro, Croatian, Czech, Danish, Dutch, Eastern European, English, Estonian, Faroese, Finnish, Flemish, Franco-Provençal, French, Frisian, Friulian, Galician, German, Greek, Greenlandic, Hebrew, Hungarian, Icelandic, Indonesian, Irish, Italian, Kurdish (Latin), Ladin, Latin, Latvian, Lithuanian, Luxembourgish, Malay, Manx Gaelic, Moldovan, Norwegian (Bokmål, Nynorsk), Occitan, Polish, Portuguese, Rhaeto-Romance, Romanian, Romansh, Sami (Inari, Lule, Northern, Skolt, Southern), Scottish Gaelic, Slovak, Sorbian, Slovenian, Spanish, Swahili, Swedish, Tagalog, Turkish, Uzbek (Latin), Vietnamese, Walloon, Welsh, Western European, Thai, Arabic, Devangari, Chinese, Korean, Japanese.

 

 

 

 

 

 

 

 

 

 

 

Download the current Forma DJR package here:

Download

File will continue to be updated as more languages are added to the Forma DJR package.

For all languages not supported by Forma DJR, Arial will be substituted in its place.

Resources

Reference

For Zeplin access contact the UX Design Manager

Figma

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.