/typography/

Apart from visuals, how we communicate virtually is a question, even the way we communicate remarks who we are.

A great speech that speaks could reach the heart it sees, what we feel is what we seek from others that feel.

/typefaces/

Primary Font

Sans Fransisco Pro Display

Sans Fransisco Bold

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

Sans Fransisco Regular

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

Sans Fransisco Figures

0 1 2 3 4 5 6 7 8 9 @ # $ % & *

Sans Fransisco Medium

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

Sans Fransisco Light

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

Sans Fransisco Symbols

~ ` - _ + = [ { ] } | ' " ; : ? / > .

Secondary Font

PP Right Grotesk

PP Right Grotesk Medium

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

PP Right Grotesk Figures

0 1 2 3 4 5 6 7 8 9 @ # $ % & *

PP Right Grotesk Light

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

PP Right Grotesk Symbols

~ ` - _ + = [ { ] } | ' " ; : ? / > .

/hierarchy/

SubHeading 1 Bold

Font Size

SubHeading 1 Medium

20px

SubHeading 1 Regular

Line Height

SubHeading 1 Light

24px

Subheading 2 Bold

Font Size

Subheading 2 Medium

20px

Subheading 2 Regular

Line Height

Subheading 2 Light

24px

Paragraph Bold

Font Size

Paragraph Medium

20px

Paragraph Regular

Line Height

Paragraph Light

24px

Body Text Bold

Font Size

Body Text Medium

20px

Body Text Regular

Line Height

Body Text Light

24px

Caption Bold

Font Size

Caption Medium

20px

Caption Regular

Line Height

Caption Light

24px

Super Title Bold

Font Size

Super Title Medium

20px

Super Title Regular

Line Height

Super Title Light

24px

/rules/

Type Properties

A typeface is a collection of letters. A typeface represents shared patterns across a collection of letters. Typefaces that are selected for their style, legibility, and readability are most effective when following the fundamental principles of typographic design.

Measurement From Baseline

Baselines also form the basis for essential typeface decisions about leading. In typography, leading refers to the space between different lines of text on a page. If many long ascenders and descenders accompany your baseline, you may need to opt for a larger amount of leading.

Letter Spacing

Letter spacing, also called tracking, refers to the uniform adjustment of the space between letters in a piece of text. Larger type sizes, such as headlines, use tighter letter spacing to improve readability and reduce space between letters.

Line Height

Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next, also known as leading, controls the amount of space between baselines in a block of text.

Paragraph Spacing

Paragraph spacing is the vertical distance between lines of text. Most writers use either double-spaced lines or single-spaced lines nothing in between because those are the options presented by word processors. For most text, the optimal line spacing is between 120% and 145% of the point size.

Type Alignment

Type alignment controls how the text aligns in the space it appears. There are two types of alignments we use, Left-aligned and Centered-aligned. Left-aligned is a common setting for paragraphs and Centered text is best used for short typographic elements within a layout and is not recommended for long copy.

Left Alignment

Revolutionize The Digital Industry

When text is aligned to the left margin.

Centered Alignment

Revolutionize The Digital Industry

When text is aligned to the center of the area it is set in.