Style Guide: Typography

Purpose:

Change the brand's Typography settings.

 

 

 

Step by step:
 

1. Enter the CMS that you want to register the Style Guide settings. Go to Manage > Appearance > Settings > Core BR - White Label (/admin/appearance/settings/corebr_whitelabel);

 

2. In the fields of ABInBev - Style Guide, click the arrow to open an options dropdown. Select to edit "ABInBev - Typography";

 

3. Edit the following information:

 

 

Registration Primary Font:

 

Select the primary source. In ZeroHeight it is the font $font_family_1.
Secondary Font:
Select the secondary font. In ZeroHeight it is the font $font_family_2.
Tertiary Font:
Select the tertiary source. In ZeroHeight it is the font $font_family_3.

 

 

Registration Weight Values

 

Font Weight Light
Enter the value of $font_weight_light.
Regular Font Weight
Enter the value of $font_weight_regular.
Font Weight Bold
Enter the value of $font_weight_bold.
Font Weight Black
Enter the value of $font_weight_black.
Font Size
 

In your brand's documentation, go to Tokens > Typography > Font Size.

 

Registration Size Values
Font Size XXL
Enter the value of $font_size_xxl.
Font Size XL
Enter the value of $font_size_xl.
Font Size L
Enter the value of $font_size_l.
Font Size MD
Enter the value of $font_size_md.
Font Size SM
Enter the value of $font_size_sm.
Font Size XS
Enter the value of $font_size_xs.
Font Size XXS
Enter the value of $font_size_xxs.
Font Size XXXS
Enter the value of $font_size_xxxs.

 

Registration Line Height Values
Font Line Height Short:
Enter the value of $font_line_height_short.
Font Line Height Medium:
Enter the value of $font_line_height_medium.
Font Line Height Long:
Enter the value of $font_line_height_long.
Font Spacing

1. ZeroHeight:
 

In your brand's documentation, go to Tokens > Typography > Font Spacing.

 

Registration Font Spacing

Font Spacing Default:
Enter the value of $font_spacing_default.
Font Spacing Small:
Enter the value of $font_spacing_small.
Font Spacing Medium:
Enter the value of $font_spacing_medium.
Font Spacing Large:
Enter the value of $font_spacing_large.