{"componentChunkName":"component---src-templates-blog-post-tsx","path":"/frontmatter/fluid-typography/","result":{"data":{"site":{"siteMetadata":{"title":"heinerbehrends.eu"}},"mdx":{"id":"daa1229f-bad5-5e73-b3bb-a7aa1508b6d8","excerpt":"The CSS math functions min(), max() and clamp() can be used for responsive font sizes.\nIn this blog post I want to reveal to you the logic behind fluid…","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Fluid typography and CSS math functions\",\n  \"date\": \"2021-07-09T09:12:03.284Z\",\n  \"description\": \"All you need to know about fluid typography using CSS math functions,  featuring an interactive code generator.\",\n  \"ogimage\": \"https://heinerbehrends.eu/og-fluid-typography.png\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"The CSS math functions min(), max() and clamp() can be used for responsive font sizes.\\nIn this blog post I want to reveal to you the logic behind fluid typography and offer\\nan interactive code generator, so you can easily experiment with the settings.\"), mdx(\"p\", null, \"Specifying the font size in vw units allows us to scale make the font size resond to\\nthe width of the viewport.\\nvw (viewport width) is defined as 1/100 of the viewport width. To calculate\\nthe correct font size in vw units we need to know the preferred font size at a specific\\nviewport width. For example, if we want a font size of 24 pixels at a 1200 pixel wide\\nscreen that would translate to 24 / (1200 / 100) = 2vw. Use the code generator\\nbelow to get the right vw value for any given viewport width and font size.\"), mdx(VwFontSize, {\n    mdxType: \"VwFontSize\"\n  }), \"The second use case that we'll look at is a heading that grows taller as the viewport gets wider and stops growing as the maximum width of the layout is reached. An example for this behaviour is the text on the header of the home page of this blog. What we need to define here is the maximum width of the layout and the desired font size at the maximum width. The CSS min() function allows us to define the responsive preferred value and a maximum value.\", mdx(MinFnFontSize, {\n    mdxType: \"MinFnFontSize\"\n  }), \"The next example adds a minimum value to the equation. The clamp() function takes a minimum value, a responsive preferred value and a maximum value: clamp(min, preferred, max).\", mdx(ClampFnFontSize, {\n    mdxType: \"ClampFnFontSize\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"ogimage":"https://heinerbehrends.eu/og-fluid-typography.png","title":"Fluid typography and CSS math functions","date":"July 09, 2021","description":"All you need to know about fluid typography using CSS math functions,  featuring an interactive code generator."}},"previous":null,"next":{"fields":{"slug":"/responsive-layouts/"},"frontmatter":{"title":"Responsive layouts with CSS grid"}}},"pageContext":{"id":"daa1229f-bad5-5e73-b3bb-a7aa1508b6d8","previousPostId":null,"nextPostId":"de8a95ea-5e55-5c70-9a3a-5fa93946f536","url":"frontmatter/fluid-typography/"}},"staticQueryHashes":["3257411868","956904941"]}