typographics/dist/index.css

typographics provides flexible and adaptive styles for typography on web pages. This package allows you to automate the resizing of fonts based on screen width, ensuring good readability on any device.

:root{--t-font-size-min-scale-rem: calc(var(--t-font-size-min-scale, .75) * 1rem);--t-font-size-max-scale-rem: calc(var(--t-font-size-max-scale, 1) * 1rem);--t-font-scale-min-width-rem: calc((var(--t-font-scale-min-width, 600) / 10) * 1rem);--t-slope: calc( (var(--t-font-size-max-scale, 1) - var(--t-font-size-min-scale, .75)) * (100vw - var(--t-font-scale-min-width-rem)) / ((var(--t-font-scale-max-width, 1440) / 10) - (var(--t-font-scale-min-width, 600) / 10)) );--t-font-size-clamp: clamp( var(--t-font-size-min-scale-rem), calc(var(--t-font-size-min-scale-rem) + var(--t-slope)), var(--t-font-size-max-scale-rem) );--t-baseline: .8rem;--t-half-baseline: calc(var(--t-baseline) / 2)}html{font-size:10px;font-feature-settings:"kern" 1,"liga" 0;text-rendering:optimizelegibility;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}body{font-family:var(--t-base-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial),sans-serif;font-size:var(--t-font-size-clamp);line-height:var(--t-line-height-body, 1.5);font-weight:400}*,*:before,*:after{box-sizing:inherit}a{text-decoration-skip-ink:auto}ul,ol{padding-left:0;list-style-position:outside}ul{list-style-type:disc}ol{list-style-type:decimal}input,button,select,textarea{font:inherit;line-height:inherit}.display-large{font-size:5.7em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.display-large:last-of-type:not(:only-of-type){margin-block-end:0}.display-medium{font-size:4.5em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.display-medium:last-of-type:not(:only-of-type){margin-block-end:0}.display-small{font-size:3.6em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.display-small:last-of-type:not(:only-of-type){margin-block-end:0}.headline-large{font-size:3.2em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.headline-large:last-of-type:not(:only-of-type){margin-block-end:0}.headline-medium{font-size:2.8em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.headline-medium:last-of-type:not(:only-of-type){margin-block-end:0}.headline-small{font-size:2.4em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.headline-small:last-of-type:not(:only-of-type){margin-block-end:0}.title-large{font-size:2.2em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.title-large:last-of-type:not(:only-of-type){margin-block-end:0}.title-medium{font-size:2em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.title-medium:last-of-type:not(:only-of-type){margin-block-end:0}.title-small{font-size:1.8em;line-height:var(--t-line-height-heading, 1.3);margin-top:1.25lh;margin-bottom:.5lh;max-inline-size:50ch;text-wrap:balance}.title-small:last-of-type:not(:only-of-type){margin-block-end:0}.label-large{font-size:1.4rem;line-height:1.3;font-weight:600;margin-bottom:.75lh}.label-large:last-of-type:not(:only-of-type){margin-block-end:0}.label-medium{font-size:1.2rem;line-height:1.35;font-weight:600;margin-bottom:.75lh}.label-medium:last-of-type:not(:only-of-type){margin-block-end:0}.label-small{font-size:1.1rem;line-height:1.2;font-weight:600;margin-bottom:.75lh}.label-small:last-of-type:not(:only-of-type){margin-block-end:0}.body-large{font-size:1.6rem;line-height:1.5;font-weight:400;margin-bottom:.75lh}.body-large:last-of-type:not(:only-of-type){margin-block-end:0}.body-medium{font-size:1.4rem;line-height:1.45;font-weight:400;margin-bottom:.75lh}.body-medium:last-of-type:not(:only-of-type){margin-block-end:0}.body-small{font-size:1.2rem;line-height:1.35;font-weight:400;margin-bottom:.75lh}.body-small:last-of-type:not(:only-of-type){margin-block-end:0}ul.list-large,ol.list-large{font-size:1.6rem;line-height:1.5;padding-left:var(--t-list-padding-left, 0);padding-inline-start:2.5rem;margin-block:.75lh .75lh}ul.list-large li,ol.list-large li{margin-block:.25lh}ul.list-medium,ol.list-medium{font-size:1.4rem;line-height:1.45;padding-left:var(--t-list-padding-left, 0);padding-inline-start:2.5rem;margin-block:.5lh .75lh}ul.list-medium li,ol.list-medium li{margin-block:.25lh}ul.list-small,ol.list-small{font-size:1.2rem;line-height:1.35;padding-left:var(--t-list-padding-left, 0);padding-inline-start:2.5rem;margin-block:.5lh .5lh}ul.list-small li,ol.list-small li{margin-block:.25lh}code:not(pre code){display:inline-block;font-family:var(--t-monospace-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono"),monospace;font-size:var(--t-code-inline-font-size, 1em);line-height:var(--t-code-inline-line-height, 1);background:var(--t-code-inline-bg, rgba(0, 0, 0, .05));color:var(--t-code-inline-color, #24292f);border-radius:var(--t-code-inline-border-radius, .3em);padding:var(--t-code-inline-padding, .25em .4em);margin:var(--t-code-inline-margin, 0 .25em);box-shadow:0 0 0 1px var(--t-code-inline-border-color, rgba(0, 0, 0, .1))}pre{font-family:var(--t-monospace-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono"),monospace;font-size:var(--t-code-block-font-size, 1.4rem);line-height:var(--t-code-block-line-height, 1.6);background:var(--t-code-block-bg, #f5f5f5);color:var(--t-code-block-color, #24292f);margin:var(--t-code-block-margin, 1.3em 0);border-radius:var(--t-code-block-border-radius, .6rem);overflow-x:auto;white-space:pre;max-inline-size:100%}pre code{display:inline-block;padding:var(--t-code-block-padding, 1.2rem 2rem)}