Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty

AllThingsSmitty/flexible-type.css

Last active February 21, 2017 10:17
Show Gist options
  • Save AllThingsSmitty/ca2b5f00b430c1926c4cea90c57f7ff7 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/ca2b5f00b430c1926c4cea90c57f7ff7 to your computer and use it in GitHub Desktop.
Download ZIP
Use :root for flexible type
Raw
flexible-type.css
/* This has been added to CSS Protips https://github.com/AllThingsSmitty/css-protips */
/* The type font size in a responsive layout should be able to adjust with each viewport.
You can calculate the font size based on the viewport height and width using :root */
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
/* Now you can utilize the root em unit based on the value calculated by :root */
body {
font: 1em/1.6 sans-serif;
}
@ashikjs
Copy link

ashikjs commented Jun 1, 2016

Can you show a demo link it will be batter for understand .. 👍

@AllThingsSmitty
Copy link
Author

@ashikjs I totally forgot to post the link to a demo I did months back. Here it is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment