//// /// @group settings/typography //// /// Whether or not to define font sizes in rem, improving accessibility by /// allowing users to adjust the base font-size. This is currently off by /// default, but will be enabled by default for projects that do not use /// alphagov/govuk_template in the next major release. /// /// If you enable this, you should make sure that `$govuk-root-font-size` is set /// correctly for your project. /// /// @type Boolean /// @access public $govuk-typography-use-rem: false !default; /// Root font size /// /// This is used to calculate rem sizes for the typography, and should match the /// _effective_ font-size of your root (or html) element. /// /// Ideally you should not be setting the font-size on the html or root element /// in order to allow it to scale with user-preference, in which case this /// should be set to 16px. /// /// If you are integrating Frontend into an existing project that also uses /// alphagov/govuk_template then you should set this to 10px to match the 62.5% /// (10px) base font size that govuk_template sets on the element. /// /// @type Number /// @access public $govuk-root-font-size: 16px !default; /// Responsive typography font map /// /// This is used to generate responsive typography that adapts according to the /// breakpoints. /// /// Font size and font weight can be defined for each breakpoint. You can define /// different behaviour on tablet and desktop. The 'null' breakpoint is for /// mobile. /// /// Line-heights will automatically be converted from pixel measurements into /// relative values. For example, with a font-size of 16px and a line-height of /// 24px, the line-height will be converted to 1.5 before output. /// /// You can also specify a separate font size and line height for print media. /// /// @type Map /// /// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint` /// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint` /// @prop {Number} $point.print.font-size - Font size for `$point` when printing /// @prop {Number} $point.print.line-height - Line height for `$point` when printing /// /// @access public $govuk-typography-scale: ( 80: ( null: ( font-size: 53px, line-height: 55px ), tablet: ( font-size: 80px, line-height: 80px ), print: ( font-size: 53pt, line-height: 1.1 ) ), 48: ( null: ( font-size: 32px, line-height: 35px ), tablet: ( font-size: 48px, line-height: 50px ), print: ( font-size: 32pt, line-height: 1.15 ) ), 36: ( null: ( font-size: 24px, line-height: 25px ), tablet: ( font-size: 36px, line-height: 40px ), print: ( font-size: 24pt, line-height: 1.05 ) ), 27: ( null: ( font-size: 18px, line-height: 20px ), tablet: ( font-size: 27px, line-height: 30px ), print: ( font-size: 18pt, line-height: 1.15 ) ), 24: ( null: ( font-size: 18px, line-height: 20px ), tablet: ( font-size: 24px, line-height: 30px ), print: ( font-size: 18pt, line-height: 1.15 ) ), 19: ( null: ( font-size: 16px, line-height: 20px ), tablet: ( font-size: 19px, line-height: 25px ), print: ( font-size: 14pt, line-height: 1.15 ) ), 16: ( null: ( font-size: 14px, line-height: 16px ), tablet: ( font-size: 16px, line-height: 20px ), print: ( font-size: 14pt, line-height: 1.2 ) ), 14: ( null: ( font-size: 12px, line-height: 15px ), tablet: ( font-size: 14px, line-height: 20px ), print: ( font-size: 12pt, line-height: 1.2 ) ) ) !default;