Updates to typography

[ulde01]

Following adjustment to typography has been made 2019-01-21:

H2
weight: bold

H3
weight: bold

H6
Is no longer in use. Suggestion: make it look like H5.

New

• Line height is specified (it was not before) for desktop, mobile and tablet
• The biggest text size, "Display", is also available for mobile and tablet
• "Preample" is specified (it was not before) for desktop, mobile and tablet

If you are unsure, please see the complete list of sizes and line-height for each size: http://designlibrary.sebgroup.com/visual-identity/typography/#usage (scroll down on the page)

Ask us anything (about this)!
Thank you,
Ulrika, Design management

• Vanilla Updates to typography vanilla-pattern-library#4
• Bootstrap Updates to typography bootstrap#81
• AngularMaterial Updates to typography seb-angular-material#2 (comment)
• Updates to typography ng-components#16

[hjalmers]

I suggest giving h6 the same appearance as h5 and encourage people not to use it if they can avoide it. It’s a standard html element so even if we ignore it browsers won’t and if some library or third party component uses it we need to style it unless we want it to look bananas:) Probably not an issue but still worth mentioning so it’s not forgotten.

[pmakro]

I would suggest making H6 at a size of 14px due to having the option of being able to differentiate between a primary and secondary headline in a supporting area/box.

By using different emphasis via typography we can introduce smaller headlines that are visible/noticeable but act more as an encapsulating headline for a paragraph rather having it the same size as regular content but in bold manner. Thus making it harder to distinguish between a headline and statement in bold in a paragraph.

See attached images for examples.

[ulde01]

@pmakro Agreed! This change is now added to the relevant frameworks, see #55

/Ulrika