EM/REM for text and paddings

[mr-mig]

http://trentwalton.com/2012/06/19/fluid-type/ https://bugsnag.com/blog/responsive-typography-with-rems

See the example: http://jsfiddle.net/25gCt/4/embedded/result/

[JoannaWalusiak]

Changes in typography - Styleguide http://typecast.com/QhQQkkddGr/share/87eeaf5d967424f871d1236edad36ee3d46a85b6KrPQgjrbw

1em = 16px

From the top of the question page

Info-task - ENGLISH • HIGHSCHOOL • 10 PTS

p.info-date font-size: 0.8em;
line-height: 1em;

Question text big (first 3 lines):

p.question-big font-size: 1.75em; line-height: 2em;

Question text medium + Answer text + Stream questions text

p.answer-text font-size: 1.125em; 18px line-height: 1.5em; 24px

Blue actions - Comment • Follow • Report

p.action font-size: 1em; line-height: 1em;

Headline - Your Answer, Answers, New Questions

p.headline font-size: 1em; line-height: 1em;

BIT - What do you want to know and others

p.bit font-size: 3.625em; 58px; line-height: 3em; 48px;

Buttons

p.button-addq font-size: 1em; line-height: 3em;

Side stream questions text

p.question-small font-size: 1em; line-height: 1.5em;

Is that clear? :dancer:

[mr-mig]

The font palette is:

h.1 - BIT font-size: 58px; line-height: 48px;

h.2 - question font-size: 28px; line-height: 32px;

h.3 font-size: 18px line-height: 24px

h.4 font-size: 16px; line-height: 24px;

h.5 - small headline font-size: 16px; line-height: 16px;

h.6 - info task font-size: 13px; line-height: 16px;

default text 16px 24px

[mr-mig]

Also, mind letter-spacing in Joanna's example!

[mr-mig]

So, after analysing the codebase I've decided to change text-block, text-description, mint-text-bit components according to the given example.

mint-header-primary: font-size: 48px line-height: 48px

mint-text-block -> mint-text--obscure mint-text-description -> mint-text--standout mint-text-description--large -> mint-headline mint-text-description--large + bold -> mint-header-primary--small mint-header-primary -> mint-text-bit mint-header-primary--small -> mint-text-bit--small mint-text-emphasised -> mint-text--emphasised

[mr-mig]

After discussion with @kdzwinel @matzimowski @vergilius we've decided to refactor those text-* components to a single mint-text.

Also mint-text-bit should be moved in the overview doc to basics next to text examples.

Everything TBD in scope of #13 and this issue,

[mr-mig]

On the other hand, I am wondering whether I should move mint-text to components and not mint-text-bit to basics. As they both assume to be used as a component inside containers.

Also, bit has a variation with logo and can scale down on mobile... Which are seem to me to be more like attributes of “component”

We can visualize the font sizes in basics instead of mint-text WDYT? @aju @kdzwinel @vergilius @matzimowski

[mr-mig]

Tried this thing with cap-height=0.57: https://gist.github.com/razwan/10662500 This approach seems to work only when line-height is always natural multiply of baseline :(