hijs - andrey balbekov design - portfolio

Typography Exploration

ABCDEFGHI JC O R P O R A T E A

C O R P O R A T E S

ABCDEFGHIJ

I installed WAVE Chrome plugin and inspected the DOM (Document Object Model) outline for different pages on MBUSA website. This is what I

found on random 2 pages — we had h3 as the topmost header for GLA SUV page, and we had h4 as the topmost header for Mercedes-Benz

Financial Services page first class section. At times, we had no topmost header and directly started with h3s. Sometimes we have Top section

and inner section with same header level. It was quickly evident that semantic hierarchy was not accurate. Ideally, h1s should be followed by h2s

followed by h3s and so on, without skipping any levels.

It is recommended that you separate the concept of the visual style of the level heading from the HTML tag H (elements such as H1, H2, H3,

etc.). In this case, we use HTML markup only to determine the number of Font elements we need to define.

Page with different styles for Header 3

Page with h4 as the topmost header

Page with h3 as the topmost header

Step 1: Audit product for semantic hierarchy

WAVE Chrome plugin

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US

What is DOM (Document Object Model) ?

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Mercedes - Bentz visual hierarchy in descending order

Headers - 90,60,50,40,36,32,30,24,19 and more… / Regular - Italic

Paragraph - 18,16,14,13,12 / Regular - Bold

Small, Disclamer - 11

Call Out - 42,36,26,18,14 and more…

I wrote down in descending order all the existing type sizes & corresponding font-weights. I chose to ignore the assigned header levels so I could

focus on just the visual hierarchy. I made the following observations.

We have many headers. It Is evident from DOM outline above that we do not really have that deep of an

information hierarchy to justify these many headers.

We have many different values for body copy and call outs. If we cannot classify values with logical

semantic names, it means they are not really used semantically.

Step 2: Inspect visual hierarchy

I started with 14 for Arial and 16px body size for Crpo S because they have different X- hight in that case they works together

Font size can vary based on the font chosen, but 10 point is usually a minimum for accessibility. https://webaim.org/resources/designers/

To ensure the replication company can read your master.

Corpo S 16px Arial 14px

To ensure the replication company can read your master.

What is x-height and why its important?

https://blog.prototypr.io/to-choose-the-right-typeface-look-at-its-x-height-instead-d5ef0967d09c

Visual Inspector Chrome plugin

https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc

16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake

https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/

Step 3: Determine base font-size for body textI installed Visual Inspector Chrome plugin and inspected the most common main body (paragraph) font size for main body on the most popular

websites and competitors. Also I find some articles about font size usage in UI and the most of authors considered that the best body font size is

14px -16Px

Facebook main body font size : 14px

Google main body font size : 14px

Mazda main body font size : 16px

Jeep main body font size : 14px

This is the phase where you will need to do some visual explorations. I started out with Arial font-size: 14px and set test variety range of line-

heights: from (Minimum x 1) -16px to (Maximum x 2) - 32px. Also, I wanted to see if I could use the popular 8pt baseline grid and find proper line-

height value that would allow me to use it. At this stage, line-height value, as well as 8pt baseline grid, are really hypotheses and through

explorations, I can either refute or validate that it works.

Minimum 16px line-height looked too tight. Next I chose the Maximum value increment and tested with line-height 32px. It looked too spaced

out. The truth is somewhere between this values.

That meant, I had to find a value between 16 and 32. I chose to look at just even values and I set up a step of increasing hight as 2px ( even

segment of 8px grid) — 20, 22, 24, 26, 28 as only those values are divisible by even numbers — which could act as spacing intervals.

I tried 18px and 20px as line-height. It looked too tight.

I tried 22px as line-height. It looked almost perfec.

I tried 24px as line-height. It also looked almost perfect. 24 is a multiple of 8. This meant I was adopting a 8pt baseline grid, and this is great cos i

decide to use 8pt (As you will see later, I chose to use mostly multiples of 8 wherever possible as those provided a visually discernible interval.

So, though I had more choices due to the 4pt baseline grid, I adopted mostly values allowed by 8pt baseline grid.)

I tried 26px and 28px as line-height. It looked like a start to going wide.

To choose between this two Good values I tried to implement the WCAG Success Criterion 1.4.8 than says:

Line spacing (leading) is at least space-and-a-half within paragraphs

which translates to the following:

body / base line-height = minimum 1.5 x body / base font-size

16/22 provides a not enough line-height ratio of 1.375 and

16/24 provides a good line-height ratio of 1.5

8-Point Grid: Vertical Rhythm

https://builttoadapt.io/8-point-grid-vertical-rhythm-90d05ad95032

A guide to understanding and implementing Web Content Accessibility Guidelines 2.0

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html

14/16px - Too tight

You can get a wireless headset that is completely without wires.The ones that are completely wire free are made up of a headset worn on your head that talks to a base unit that is attached to your telephone with no wire connections between your headset and your phone. These wireless headset products represent the latest in sophisticated technology for communication or listening. Examples of wireless headset models are the Plantronics CS50, Plantronics CS55, the Plantronics 510S and the GN Netcom 9120.

14/20px - Tight


14/18px - Too tight


14/32px - Too wide

You can get a wireless headset that is completely without wires.

The ones that are completely wire free are made up of a headset worn on your head

that talks to a base unit that is attached to your telephone with no wire connections

between your headset and your phone. These wireless headset products represent the

latest in sophisticated technology for communication or listening. Examples of wireless

headset models are the Plantronics CS50, Plantronics CS55, the Plantronics 510S and

the GN Netcom 9120.

14/22px - Good







the GN Netcom 9120.

14/24px - Good







the GN Netcom 9120.

14/26px - Wide







the GN Netcom 9120.

Step 4: Determine line-height that works for body font-size

14/28px - Too wide







the GN Netcom 9120.

In order to derive other font-size values that are harmonious to each other. The most important work here is to come up with a ratio that makes

sense for your system. I explore a lot of articles and started thinking about what was an important number that could guarantee a good vertical

rhythm for all font-sizes? I find the best way to set up a proper set of font sizes is using the Modular Scale method.

Here is a link to the live tool https://www.modularscale.com/

I picked the Perfect Fourth ratio (1.33) and it gave me values that I could work with realistically. I rounded off font-size values to multiples of 8

where feasible — so it also seemed more predictable with my 8pt baseline grid. Thus, I derived following harmonious font-sizes which could work

as my type scale: 64, 48, 40, 32, 24, 16, 12px (for 16px base size) and 56, 40, 32, 24, 20, 14, 11 (for 14px base size)

To ensure the replication company


To ensure the replication companyParagraph / 16

Paragraph / 16

Disclamer / 12

Call out / 24

Call out / 24

H4 / 32

H4 / 32

H3 / 40

H3 / 40

H2 / 48

H2 / 48

H1 / 64

H1 / 64









To ensure the replication


Corpo S

Corpo A

I implement this ratio (1.33) to our font families Corpo S and Corpo A ( starting with the 16px as a base font size) cos they both have the same X-

height and that's why they both have same harmonious scale.

I implement this ratio (1.33) to our font-family Arial ( starting with the 14px as a base font size). The starting point for this font scale is different

than for Corpo Family. I wrote about it in Step 3.

H3 / 32

H2 / 40

H1 / 56



To ensure the replicationArial

Call out / 20

H4 / 24





Paragraph / 14

Disclamer / 11

ArialCorpo S and Corpo A

Disclamer

Paragraph

Call out

Header 4

Header 3

Header 2

Header 1

Disclamer

Paragraph

Call out

Header 4

Header 3

Header 2

Header 1

Too Big to use as Headers

Too Big to use as Headers

Too Tiny Too Tiny

Arial

Step 5: Pick a ratio for the modular scale such that you have enough number of harmonious usable values

How to Establish a Modular Typographic Scale

https://webdesign.tutsplus.com/articles/how-to-establish-a-modular-typographic-scale--webdesign-14927

Now I have a scale set of all our font, but we use not all of them with the same meaning. Some of them works as Headers and some as body

copies. Lets Group them. For Heders we using Corpo A font so let's mark selection for Headers.

Using The rest of the fonts we can organize Paragraph, Disclamers and Call Outs



To ensure the replication companyParagraph / 16

Paragraph / 16

Disclamer / 12

Call out / 24

Call out / 24

H4 / 32

H4 / 32

H3 / 40

H3 / 40

H2 / 48

H2 / 48

H1 / 64

H1 / 64











Corpo S

Corpo A

H3 / 32

H2 / 40

H1 / 56



To ensure the replicationArial

Call out / 20

H4 / 24





Paragraph / 14

Disclamer / 11

Step 6: Choose a role of fonts

Line-heights across all font-sizes must be proportional to each other to create a good vertical rhythm. To accomplish this — one way is to use the

same base line-height / base font-size ratio for deriving all other line-heights and use these calculated values as is (See step 2 below). The

derived values, however, may not turn out to be multiples of the baseline grid number. This can make it hard to remember and deal with the line-

height value while working on mock-ups. So the 2nd way to come up with line-heights is — to round of the derived line-heights to the nearest

multiple of the baseline grid number. Wherever I saw 2 possible line-height values, I tested them out in multiple explorations to rule out 1 of the

options.

base font-size = 16px / Base Line hight = 24px / Scale ratio = 1.33

Font size X 1.33 = Line-Heigh Font size X 1.33 = Line-HeighLine-Heigh rounded of 8x Line-Heigh rounded of 8x

Step 6.2Using this ratio to calculate line-heights for other font sizes:

Paragraph 16 X 1.33 = 24

Disclamer 12 X 1.33 = 16

Call out 24 X 1.33 = 32

H4 32 X 1.33 = 40

H3 40 X 1.33 = 56

H2 48 X 1.33 = 64

H1 64 X 1.33 = 88

Step 6.1

Step 6.3

Doing visual explorations of font line spacing I concluded that the folowing line-heights worked but not to all of the font sizes - it works great for for

smaller fonts, but the more font size grows - the smaller line hight works better. Also we use Corpo A as header font and its visually tall font and that did

not works good with too much line-space. So I decide to reduce Scale ratio for bigger fonts sizes closer to ( 1.33 => 1.1 => 1)


company


company













Font size X 1.33 = Line-Heigh Font size X 1.33 = Line-HeighLine-Heigh rounded of 8x Line-Heigh rounded of 8x

Step 6.4After these manipulations and tests I receive a harmonious set of line-heights that works with an 8px design grid.

Paragraph

Paragraph

16 X 1.33 = 24

14 X 1.33 = 24

Disclamer

Disclamer

12 X 1.33 = 16

11 X 1.33 = 16

Call out

Call out

24 X 1.33 = 32

20 X 1.33 = 32

H3

H4

32 X 1.1 = 36

24 X 1.33 = 32

H2 40 X 1 = 40

H1 48 X 1 = 48

H Jumbo 64 X 1 = 64

Step 7: Define line-heights for all font-sizes

I picked the MAjor Third ratio (1.250) and it gave me values that I could work with realistically. I rounded off font-size values to multiples of 4

where feasible — so it also seemed more predictable with my 8pt baseline grid. Thus, I derived following harmonious font-sizes which could work

as my type scale: 48, 40, 32, 24, 20px (for 16px base size)

To ensure the replication companyBase / 16

H4 / 20

H3 / 24

H2 / 32

H1 / 40

Jumbo / 48






Corpo A

Step 8: Adding mobile variations

64px / 64 48px / 48

Corporate A Regular Condensed Corporate A Regular CondensedJumbo48px / 48 40px / 40

Corporate A Regular Condensed Corporate A Regular CondensedHeader 1

40px / 40 32px / 32

Corporate A Regular Condensed Corporate A Regular Condensed

Header 2

32px / 36 24px / 24


Header 3

24px / 32 20px / 24


Header 4

16px / 24

space 2px / Allcaps

Corporate S

16px / 24

space 2px / Allcaps

Corporate S

E YE B ROW

20px / 32 20px / 32

Arial Arial

Call out

14px / 24

Arial

14px / 24

Arial

Paragraph

11px / 16

Arial

11px / 16

Arial

Disclamer

HEADERS

BODY COPY DESKTOP MOBILE

Finally I redefined the typographic system for Mercedes - Bens product. I maked sure that now its accessible and harmonious to a baseline 8px

grid. This new typographic system has just 10 unique type styles — a massive reduction from the 50+ type styles in our old typographic system,

making the usage rules very predictable for both designers and developers on team.

Step 9: Puting all together

MOBILEDESKTOP

hijs - andrey balbekov design - portfolio

Documents