Introduction

- TYPOGRAPHY

@MiaFolio

Ensuring the correct vertical position of large text OpenType Feature Database font-variant-alternates - CSS: Cascading Style Sheets | MDN OpenType font features guide - CSS: Cascading Style Sheets | MDN Introduction List of typographic features - Wikipedia

typography

@MiaFolio

Open Props: sub-atomic styles Open Props: sub-atomic styles Introduction

Typography Misc

@MiaFolio

Ensuring the correct vertical position of large text OpenType Feature Database font-variant-alternates - CSS: Cascading Style Sheets | MDN OpenType font features guide - CSS: Cascading Style Sheets | MDN Introduction List of typographic features - Wikipedia

#open-type #typography

Introduction

https://opentypecookbook.com/

#typography #open-type #guide

OpenType font features guide - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide

#css #open-props #typography

Open Props: sub-atomic styles

--font-size-{00-8}
--font-size-fluid-{0-3}
--font-weight-{1-9}
--font-letterspacing-{0-7}
--font-lineheight-{00-5}

#css #open-props #typography

Open Props: sub-atomic styles

--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;

#typography #opentype

OpenType Feature Database

https://simoncozens.github.io/feature-tags/?utm_source

#typography

font-variant-alternates - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates

#typography #typographic #features

List of typographic features - Wikipedia

https://en.wikipedia.org/wiki/List_of_typographic_features

#list #typography #css

break-inside

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

#typography #css #fluid

Simplified Fluid Typography

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) );
}

#typography #css #fluid

Using calc to figure out optimal line-height

line-height: calc(2px + 2ex + 2px);

#typography #css #fluid

Style Link by URL

a[href="your url here"]{
    background:red;
}

#typography #css #fluid

CSS Clamp

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

#typography #css #fluid

Line Clamp

p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#typography #css #line-height

Line-height calculator

https://www.thegoodlineheight.com

#css #typography #layout

Vertical rhythm using CSS lh and rlh units

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

main {
  padding: 1rlh; /* 🫶 */
}

Save snippets that work from anywhere online with our extensions

Comments

More like this

- TYPOGRAPHY

typography

Typography Misc

Browse more snippets >>

Introduction

Save snippets that work from anywhere online with our extensions

Comments

More like this

- TYPOGRAPHY

typography

Typography Misc

Browse more snippets >>

Embed code snippet