Snippets Collections
html {
  font-size: 100%;
  line-height: 1.5;
}

main {
  padding: 1rlh; /* 🫶 */
}
p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}
a[href="your url here"]{
    background:red;
}
html {
  font-size: min(max(1rem, 4vw), 22px);
}

/* or */

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
}

/* with variables */

h1 {
  --minFontSize: 32px;
  --maxFontSize: 200px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
--font-serif: ui-serif, serif;
--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
--font-size-{00-8}
--font-size-fluid-{0-3}
--font-weight-{1-9}
--font-letterspacing-{0-7}
--font-lineheight-{00-5}
star

Tue Mar 05 2024 15:34:14 GMT+0000 (Coordinated Universal Time) https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/

#css #typography #layout
star

Fri Mar 24 2023 12:01:23 GMT+0000 (Coordinated Universal Time) https://www.thegoodlineheight.com

#typography #css #line-height
star

Mon Jan 16 2023 09:32:34 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text

#typography #css #fluid
star

Thu Dec 08 2022 12:05:43 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

#typography #css #fluid
star

Thu Nov 17 2022 08:54:51 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/29331831/css-styling-a-link-based-on-its-href

#typography #css #fluid
star

Thu Oct 27 2022 14:08:01 GMT+0000 (Coordinated Universal Time) https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/

#typography #css #fluid
star

Thu Oct 27 2022 13:28:14 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/simplified-fluid-typography/

#typography #css #fluid
star

Thu Oct 20 2022 14:06:51 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/almanac/properties/b/break-inside/

#list #typography #css
star

Sun Sep 11 2022 08:00:22 GMT+0000 (Coordinated Universal Time) https://en.wikipedia.org/wiki/List_of_typographic_features

#typography #typographic #features
star

Sun Sep 11 2022 07:56:45 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates

#typography
star

Sun Sep 11 2022 07:56:16 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide

#typography #open-type #guide
star

Sun Sep 11 2022 07:55:36 GMT+0000 (Coordinated Universal Time) https://opentypecookbook.com/

#open-type #typography
star

Sun Sep 11 2022 07:15:18 GMT+0000 (Coordinated Universal Time) https://simoncozens.github.io/feature-tags/?utm_source

#typography #opentype
star

Fri Dec 10 2021 12:53:39 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #typography
star

Fri Dec 10 2021 12:51:07 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #typography

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension