@vonage/vvd-typography

Introduction

Vivid provides typography definitions as part of it's underlying design system.

In majority of cases consumer will have the typography set correctly either via the Vivid components or Vivid context, so nothing has to be done to get it be used.

Types and Variations

Vivid typography is built from the Spezia font family, namely the regular one and the monospace one.

Vivid provides several typography types, all of which can be used in several variations. Typography type refers to the principally distint set of parameters, most notably font-size, font-weight and font-stretch.

By variation term we mean either a base typography type taken as it is, or some specific deviation from it, most notably either in font-weight (bold variation), font-family (monospace) or text-decoration (underline).

Principal distinction between the types and the variations is, that variation may be applied to the 'current' type, without knowing much of it. This way we can achieve the following carthesian matrix of typography flavors:

Types

Vivid typography types are principally split into 2 categories: Heading and Content.

Heading part handles the typography types of headers. There are 6 types in this category, corresponding to the 6 header elements in HTML specification. Usage of these kinds of typographies is simple and straight forward - just putting the relevant header element (as specified by the designer :)

Content typographies comprised from 3 types: Body 1, Body 2 and Caption. In this case, too, the usage is bound to the components or the HTML context.

Variations

Be it heading line or regular paragraph text, we might need to style some of the words in a slightly deviating way. Take for example the code element. The way this element deviates from the surrounding context is by usage of Monospaced font-family, while the rest of the typography attributes are staying the same.

These kinds of changes, most notably inline elements aspects, we call variations. There are 4 variations in the Vivid design system as a whole:

• base - regularly used, default variation for each typography type
• monospace - monospaced variation is mostly used for the code snippets, keyboard sequences etc
• bold - this is for strong inline element and some of the components (button)
• underline - rarely used variation, used now for a link styling

Changelog

2.6.0 (2021-05-03)

Bug Fixes

• issue #800 fixing the menu multi being closed by click (#802) (fea9d90)
• dialog: fix backdrop and content scheme color (#797) (6d10df8)
• textfield: value is not vertically centered when hint is not def… (#763) (594470a)
• vwc-data-grid: expanded rows renderer API adjustment and story fix (#782) (6bfaa60), closes #771 #771 #771

Features

• toggle-button-group: force defaults and add sizeson toggle button group (#798) (67ff4e0)
• toggle-buttons-group: adds toggle buttons group (#753) (3352688)
• vwc-calendar: api support for datetime of week (#807) (394a6da)