Adjusting fonts for dark mode: full demo Live Preview

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjUzNjg0OTcxLCJpYXQiOjE2NTM2ODEzNzEsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.8PYAh-uH6CuMqk1GjbGcXGs3fRd0mK72H4OTMbMy5qkWpszbYg8oo9UEh2HlD4VMxHkvQlBg7C1bkuWeWvqw8a9zcnkyKfy6L-AyIzQvpSaZrSu0gbqPxU7E19br__h45WCDSYg70O3bNZQQxJhQw-zG3iRxMFzMpJA1zck5ScwnWmGzPyCAFM6pLDvFkyoiMWq6lLUj8IwNmp8J-ggKokb95qvg2DfAS6AmPs7wq_jvq4Q1Y3c4koJhrLvC4L8MdXpY3qHwBfNp0-tTEIrbQH-ubySe-QYR8jhOjImSUYYBz00koEoCtU3XG8W8Hb5y_CNmy1isYKQR_UWGrIGWEA"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"User","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":47250541,\"user_id\":279673,\"html\":\"  <div class=\\\"page\\\">\\n    <header>\\n      <h1>Adjusting variable fonts for dark mode<\\/h1>\\n      <p>This demo is a companion to <a href=\\\"https:\\/\\/css-tricks.com\\/using-css-custom-properties-to-adjust-variable-font-weights-in-dark-mode\\/\\\">my article on the topic at CSS-Tricks<\\/a>.<\\/p>\\n      <p>Developed by <a href=\\\"https:\\/\\/twitter.com\\/hellogreg\\\">@hellogreg<\\/a>.<\\/p>\\n    <\\/header>\\n\\n    <section>\\n      <h2>1) Using a font weight multiplier and letter spacing<\\/h2>\\n      <p><b>Font used in demo: <a href=\\\"https:\\/\\/github.com\\/adobe-fonts\\/source-sans-pro\\\">Source Sans Pro<\\/a> (free).<\\/b>\\n        <br \\/>This solution works for variable fonts with a weight axis—which is most of them! We can either hard code in new font weights or make a CSS custom property by which we multiply the original weights when in dark mode.\\n      <p>For many fonts, changing weights also affects character widths, so we may want to add letter spacing to keep flow and elements looking similar to their light mode equivalents.<\\/code>.\\n      <\\/p>\\n      <ul>\\n        <li>Panel 1: Light with default heading (700) and text (400) weights.<\\/li>\\n        <li>Panel 2: Dark with default heading (700) and text (400) weights.<\\/li>\\n        <li>Panel 3: Dark with hard-coded lighter heading (600) and text (350) weights.<\\/li>\\n        <li>Panel 4: Dark with a weight multiplier: 700×.85 headings (595) and 400×.85 text (340).<\\/li>\\n        <li>Panel 5: Dark with a weight multiplier and .02ch letter spacing.<\\/li>\\n      <\\/ul>\\n      <article class=\\\"light\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark thin\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark thin-mult\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark thin-mult spaced\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n    <\\/section>\\n\\n    <section>\\n      <h2>2) Using a font weight multiplier with set-width fonts<\\/h2>\\n      <p><b class=\\\"recursive\\\">Font used in demo: <a href=\\\"https:\\/\\/github.com\\/arrowtype\\/recursive\\/tree\\/main\\/fonts\\/ArrowType-Recursive-1.064\\\">Recursive<\\/a> (free).<\\/b>\\n        <br \\/>The individual characters in some variable fonts, like Recursive, don't change width when we alter the weight axis. For these fonts, we don't have to worry about elements (e.g., buttons) changing size when we adjust weights for dark mode. Therefore, we don't have to add letter spacing to maintain appearance.\\n      <\\/p>\\n      <ul>\\n        <li>Panel 1: Light with default heading (700) and text (400) weights.<\\/li>\\n        <li>Panel 2: Dark with default heading (700) and text (400) weights.<\\/li>\\n        <li>Panel 3: Dark with weight multiplier: 700×.85 headings and 400×.85 text.<\\/li>\\n      <\\/ul>\\n      <article class=\\\"light recursive\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark recursive\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark recursive thin-mult\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n    <\\/section>\\n\\n    <section>\\n      <h2>3) Using the grade axis<\\/h2>\\n      <p><b class=\\\"roboto\\\">Font used in demo: <a href=\\\"https:\\/\\/github.com\\/TypeNetwork\\/Roboto-Flex\\\">Roboto Flex<\\/a> (free).<\\/b>\\n        <br \\/>For fonts with a grade axis, we may not have to change the font weights at all. When using the Roboto Flex font in dark mode, just lower the font's grade (<code>\\\"GRAD\\\"<\\/code>) axis from its default (0) to a value between 0 and -1. Grade doesn't affect font character widths, so page flow and element sizes are not affected by changes.\\n      <\\/p>\\n      <ul>\\n        <li>Panel 1: Light with default heading (700) and text (400) weights.<\\/li>\\n        <li>Panel 2: Dark with default heading (700) and text (400) weights.<\\/li>\\n        <li>Panel 3: Dark with default weights and grade axis set to -.75.<\\/li>\\n      <\\/ul>\\n      <article class=\\\"light roboto\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark roboto\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark roboto grade\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n    <\\/section>\\n\\n    <section>\\n      <h2>4) Using the darkmode axis<\\/h2>\\n      <p><b class=\\\"darkmodeDEMO\\\">Font used in demo: <a href=\\\"https:\\/\\/www.daltonmaag.com\\/library\\/darkmode\\\">Darkmode<\\/a> (commercial).<\\/b>\\n        <br \\/>There's currently only one typeface I know of with this axis: Dalton Maag's Darkmode. We can switch on its darkmode (<code>\\\"DRKM\\\"<\\/code>) axis to give the font a lighter appearance without affecting character widths. It's essentially a grade axis, but with only two preset values: 0 (off) and 1 (on).\\n      <\\/p>\\n      \\n      <ul>\\n        <li>Panel 1: Light with default heading (700) and text (400) weights.<\\/li>\\n        <li>Panel 2: Dark with default weights and darkmode set to its default of 0 (off).<\\/li>\\n        <li>Panel 3: Dark with default weights and darkmode set to 1 (on).<\\/li>\\n      <\\/ul>\\n      \\n      \\n      <article class=\\\"light darkmode\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark darkmode\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n      <article class=\\\"dark darkmode on\\\">\\n        <h3>Our Mutual Friend<\\/h3>\\n        <p>Plashwater Weir Mill Lock looked tranquil and pretty...<\\/p>\\n      <\\/article>\\n    <\\/section>\\n  <\\/div>\",\"css\":\"@font-face {\\n  src: url('https:\\/\\/hellogreg.github.io\\/fonts\\/SourceSans3VF-Roman.ttf.woff2') format('woff2-variations');\\n  font-family: 'SourceSans';\\n  font-weight: 100 900;\\n}\\n\\n@font-face {\\n  src: url('https:\\/\\/hellogreg.github.io\\/fonts\\/SourceSans3VF-Roman.ttf.woff2') format('woff2-variations');\\n  font-family: 'SourceSans';\\n  font-weight: 100 900;\\n}\\n\\n@font-face {\\n  src: url('https:\\/\\/hellogreg.github.io\\/fonts\\/SourceCodeVariable-Roman.ttf') format('truetype-variations');\\n  font-family: 'SourceCode';\\n  font-weight: 100 900;\\n}\\n\\n@font-face {\\n  src: url('https:\\/\\/hellogreg.github.io\\/fonts\\/RobotoFlex.woff2') format('woff2-variations');\\n  font-family: 'RobotoFlex';\\n  font-weight: 100 900;\\n}\\n\\n@font-face {\\n  src: url('https:\\/\\/hellogreg.github.io\\/fonts\\/Recursive_VF_1.036.woff2') format('woff2-variations');\\n  font-family: 'Recursive';\\n  font-weight: 100 900;\\n}\\n\\n@font-face {\\n  src: url('https:\\/\\/hellogreg.github.io\\/fonts\\/DarkmodeVFTrial.woff2') format('woff2-variations');\\n  font-family: 'Darkmode';\\n  font-weight: 100 900;\\n}\\n\\n.recursive {\\n  font-family: Recursive;\\n}\\n\\n.roboto {\\n  font-family: RobotoFlex;\\n}\\n\\n.darkmode {\\n  font-family: Darkmode;\\n}\\n\\n\\n*, *::before, *::after {\\n  margin: 0;\\n  padding: 0;\\n\\n  strong, b, th, h1, h2, h3, h4, h5, h6 {\\n    font-variation-settings: \\\"wght\\\"400;\\n  }\\n}\\n\\nstrong, b, th, h1, h2, h3, h4, h5, h6 {\\n  font-variation-settings: \\\"wght\\\"700;\\n}\\n\\nhtml {\\n  font-size: 150%;\\n  font-size: clamp(1em, calc(.625em + 1vw), 2em);\\n}\\n\\nbody {\\n  background: #e1e1e1;\\n  color: #060606;\\n  font-family: \\\"SourceSans\\\", \\\"system-ui\\\", sans-serif;\\n  line-height: 1.5;\\n}\\n\\nh1, h2, h3 {\\n  line-height: 1.25;\\n}\\n\\nul, ol {\\n  margin-left: 1.2rem;\\n}\\n\\nimg {\\n\\tborder: 0;\\n  display: block;\\n  height: auto;\\n  margin: 0;\\n  max-width: 100%;\\n\\tpadding: 0;\\n}\\n\\ncode, pre {\\n  background-color: #ccc;\\n  font-family: \\\"SourceCode\\\", monospace;\\n  font-size: .875rem;\\n  font-variation-settings: \\\"wght\\\"400;\\n}\\n\\n.page {\\n  gap: 0;\\n  margin: 1rem auto;\\n  max-width: 80ch;\\n  width: 94vw;\\n\\n  >*+* {\\n    margin-top: 2rem;\\n  }\\n\\n  section b {\\n    border-radius: .5rem;\\n    display: inline-block;\\n    font-weight: 500;\\n    border: 2px dotted #aaa;\\n    margin-bottom: .5rem;\\n    padding: .5rem;\\n  }\\n\\n  section>*+* {\\n    margin-top: 1rem;\\n  }\\n\\n  article {\\n    padding: 1rem;\\n  }\\n\\n  *+article {\\n    margin-top: 1rem;\\n  }\\n\\n  article+article {\\n    border-top: 2px solid #ffffff11;\\n    margin-top: 0;\\n  }\\n}\\n\\n\\/\\/ Default Light\\narticle.light {\\n  background: #fff;\\n  color: #111;\\n}\\n\\n\\/\\/ Default Dark\\narticle.dark {\\n  background: #222;\\n  color: #fff;\\n}\\n\\n\\/\\/ Dark with lighter fonts\\narticle.dark.thin {\\n  font-variation-settings: \\\"wght\\\"350;\\n\\n  strong, b, th, h1, h2, h3, h4, h5, h6 {\\n    font-variation-settings: \\\"wght\\\"600;\\n  }\\n}\\n\\n\\/\\/ Dark with lighter font multiplier\\narticle.thin-mult {\\n  --font-weight-multiplier: .85;\\n\\n  font-variation-settings: \\\"wght\\\"calc(400*var(--font-weight-multiplier));\\n\\n  strong, b, th, h1, h2, h3, h4, h5, h6 {\\n    font-variation-settings: \\\"wght\\\"calc(700*var(--font-weight-multiplier));\\n  }\\n}\\n\\n\\/\\/ Dark with lighter fonts and spacing\\narticle.thin-mult.spaced {\\n  letter-spacing: .02ch;\\n}\\n\\n\\n\\/\\/ Dark with lighter grade\\narticle.dark.grade {\\n  --GRAD: -.75;\\n  font-variation-settings: \\\"wght\\\"400, \\\"GRAD\\\"var(--GRAD, 0);\\n\\n  strong, b, th, h1, h2, h3, h4, h5, h6 {\\n    font-variation-settings: \\\"wght\\\"700, \\\"GRAD\\\"var(--GRAD, 0);\\n  }\\n}\\n\\n\\n\\/\\/ Dark mode with Darkmode's dark mode on!\\narticle.dark.darkmode.on {\\n  --DRKM: 1;\\n  font-variation-settings: \\\"wght\\\"400, \\\"DRKM\\\"var(--DRKM);\\n\\n  strong, b, th, h1, h2, h3, h4, h5, h6 {\\n    font-variation-settings: \\\"wght\\\"700, \\\"DRKM\\\"var(--DRKM);\\n  }\\n}\",\"parent\":46958841,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2020-09-24T23:45:19.000Z\",\"updated_at\":\"2020-12-12T15:57:37.000Z\",\"session_hash\":null,\"title\":\"Adjusting fonts for dark mode: full demo\",\"description\":\"\",\"slug_hash\":\"xxVMmNW\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"1811c97a14a3a05788d91aea4bdefd95\",\"has_animation\":true,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":null,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":null,\"deleted_at\":null,\"deleted_by_user_id\":null,\"hard_delete_at\":null,\"pen_hash\":null,\"hashid\":\"xxVMmNW\"}"}