Notes

CSS Style Notes

css tips i keep reusing, like responsive font sizes with calc and vw, rem units, font stacks, a flexbox sticky footer and favicon markup

Edit on GitHub

CSS & Sass
2 minutes
CSS typography

Typography

Responsive Typography

x

Use calc and vw to your advantage. calc let’s you easily calculate values based on unknown variables like percentages and ems and vw is the width of the viewport at any given time. One viewport unit is 1% (1/100th) of the viewport size.

1body {
2  font-size: calc(14px + .3vw);
3}

Here 14px is going to be the smallest font size and it’s going to increase with the width of the viewport (screen).

To achieve responsive typography, you should only have to adjust the font size of the :root. All other font sizes should adjust based on the root size (i.e. use rem units).

Line height

1.6 is usually a good starting point.

Font stacks

 1body {
 2  font-family: "Open Sans", Tahoma, sans-serif;
 3  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 4}
 5
 6h1, h2, h3, h4, h5, h6 {
 7
 8  /* 
 9    Merriweather,
10    are all good fonts for headings
11  */
12}
13
14code, pre {
15  font-family: "Consolas", Monaco, Lucida Console, monospace;
16  /* 
17  'Source Code Pro' is also a good font
18  'Menlo' is the one used by Visual Code
19  */
20}

Using rem units

x

1html { font-size: 62.5%; } 
2body { font-size: 1.4rem; } /* =14px */
3h1   { font-size: 2.4rem; } /* =24px */

By defining a base font-size of 62.5%, you have the convenience of sizing rems in a way that is similar to using px, i.e. 2.4rem for 24px, 1.8rem for 18px etc.

x

 1html {
 2  height: 100%
 3}
 4
 5body {
 6  min-height: 100%;
 7  display: flex;
 8  flex-direction: column;
 9}
10 .content {
11   flex: 1
12 }

Media Queries using Sass

x

Favicon and Site Icons

1<!-- Favicon -->
2<link href="/favicon.ico" rel="shortcut icon">
3
4<!-- Apple Touch Icons -->
5<link href="/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" type="image/png">
6<link href="/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" type="image/png">
7<link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" type="image/png">
8<link href="/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" type="image/png">

Related

Browse all topics