{"action":"created","issue":{"url":"https://api.github.com/repos/Financial-Times/next-type/issues/36","labels_url":"https://api.github.com/repos/Financial-Times/next-type/issues/36/labels{/name}","comments_url":"https://api.github.com/repos/Financial-Times/next-type/issues/36/comments","events_url":"https://api.github.com/repos/Financial-Times/next-type/issues/36/events","html_url":"https://github.com/Financial-Times/next-type/issues/36","id":106211358,"number":36,"title":"Font sizes could be dynamic","user":{"login":"i-like-robots","id":271645,"avatar_url":"https://avatars.githubusercontent.com/u/271645?v=3","gravatar_id":"","url":"https://api.github.com/users/i-like-robots","html_url":"https://github.com/i-like-robots","followers_url":"https://api.github.com/users/i-like-robots/followers","following_url":"https://api.github.com/users/i-like-robots/following{/other_user}","gists_url":"https://api.github.com/users/i-like-robots/gists{/gist_id}","starred_url":"https://api.github.com/users/i-like-robots/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/i-like-robots/subscriptions","organizations_url":"https://api.github.com/users/i-like-robots/orgs","repos_url":"https://api.github.com/users/i-like-robots/repos","events_url":"https://api.github.com/users/i-like-robots/events{/privacy}","received_events_url":"https://api.github.com/users/i-like-robots/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-09-13T11:27:40Z","updated_at":"2015-09-21T10:07:54Z","closed_at":null,"body":"I wonder if we should have mixins to provide text sizing with breakpoints included. Mainly it would help with consistency across ours apps but also cover us well enough when we don't test every screen size. Currently we also have some quite large jumps between sizes when we do something like:\r\n\r\n```scss\r\n.foobar {\r\n  @include nTypeAlphaSize(2);\r\n\r\n  @include oRespondTo('M') {\r\n    // Jumps from 26 -> 40!\r\n    @include nTypeAlphaSize(1);\r\n  }\r\n}\r\n```\r\n\r\nExample usage:\r\n\r\n```scss\r\n@include nTypeAlphaResponsiveSize(2);\r\n```\r\n\r\nMore info:\r\n\r\nhttp://maketea.co.uk/2014/11/05/managing-responsive-typography-with-sass.html\r\n\r\nAnd demo:\r\n\r\nhttp://sassmeister.com/gist/bb6ba4dbb5505841c39a"},"comment":{"url":"https://api.github.com/repos/Financial-Times/next-type/issues/comments/141931753","html_url":"https://github.com/Financial-Times/next-type/issues/36#issuecomment-141931753","issue_url":"https://api.github.com/repos/Financial-Times/next-type/issues/36","id":141931753,"user":{"login":"i-like-robots","id":271645,"avatar_url":"https://avatars.githubusercontent.com/u/271645?v=3","gravatar_id":"","url":"https://api.github.com/users/i-like-robots","html_url":"https://github.com/i-like-robots","followers_url":"https://api.github.com/users/i-like-robots/followers","following_url":"https://api.github.com/users/i-like-robots/following{/other_user}","gists_url":"https://api.github.com/users/i-like-robots/gists{/gist_id}","starred_url":"https://api.github.com/users/i-like-robots/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/i-like-robots/subscriptions","organizations_url":"https://api.github.com/users/i-like-robots/orgs","repos_url":"https://api.github.com/users/i-like-robots/repos","events_url":"https://api.github.com/users/i-like-robots/events{/privacy}","received_events_url":"https://api.github.com/users/i-like-robots/received_events","type":"User","site_admin":false},"created_at":"2015-09-21T10:07:54Z","updated_at":"2015-09-21T10:07:54Z","body":"That would clean up the current usage nicely but it doesn't solve the issue I'm trying to highlight.\r\n\r\nI think size `1` should have multiple sizes configured for different breakpoints rather than a fixed size. For instance an article title may always be size `1` because it should be the largest text on the page but it should be displayed as smaller text on a little screen and large text on a big screen.\r\n\r\n```scss\r\n$text-sizing: (\r\n  5: (\r\n    'S': (\r\n      'font-size': 12px,\r\n      'line-height': 16px\r\n    )\r\n  ),\r\n  4: (\r\n    'S': (\r\n      'font-size': 14px,\r\n      'line-height': 20px\r\n    )\r\n  ),\r\n  3: (\r\n    'S': (\r\n      'font-size': 16px,\r\n      'line-height': 26px\r\n    )\r\n  ),\r\n  2: (\r\n    'S': (\r\n      'font-size': 24px,\r\n      'line-height': 32px\r\n    ),\r\n    'L': (\r\n      'font-size': 28px,\r\n      'line-height': 36px\r\n    )\r\n  ),\r\n  1: (\r\n    'S': (\r\n      'font-size': 36px,\r\n      'line-height': 48px\r\n    ),\r\n    'L': (\r\n      'font-size': 40px,\r\n      'line-height': 60px\r\n    )\r\n  )\r\n);\r\n```"}}