Typography definitions

[penpadstudio]

So, would like to set the typography sizes and line heights in the css closer to the design definitions which can be found on the wiki: https://github.com/NHSLeadership/nightingale/wiki/%28e%29Headings https://github.com/NHSLeadership/nightingale/wiki/%28e%29Body Mixin help needed to define.

[penpadstudio]

@cehwitham @csswizardry @Android63 This is a high priority it is the foundation of the framework in it rawest form. We really need to get this right as it has a knock on effect of all other elements etc.

[penpadstudio]

UPDATE

Summary:

• Align current built Headings to designed line heights and spacing
• Align current built paragraphs to designed line heights and spacing

Steps to reproduce:

Need to create Mix-ins to allow the line heights to be set relatively for user device and if changes are made then they do not push all other measurements out of line (font sizing currently does this I believe). Need expert advice to build this code into the css.

Expected results:

Line heights for: H1 = 58px H2 = 44px H3 = 29px H4 = 22px H5 = 19px H6 = 17px

Default para = 26px Leading para = 32px Quote para = 32px Supporting para = 20px Author para =20px Role para = 20px

Actual results:

Line heights for: H1 = 52px H2 = 52px H3 = 52px H4 = 26px H5 = 26px H6 = 26px

Default para = 26px Leading para = 32px Quote para = 32px Supporting para = 26px Author para =20px Role para = 20px

[penpadstudio]

@cehwitham @Android63 Sharing an article to back up what I am trying to explain as being a priority:

https://designnotes.blog.gov.uk/2018/02/19/developing-new-typography-and-spacing-for-gov-uk-frontend/

[csswizardry]

@Pro-Paul: It looks like you made good headway on this… how much more is there to do?

[csswizardry]

Carrying work over from #209.

[penpadstudio]

Harry has updated the CSS so that we can now customise the font size along with the line heights for headings.