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).
1.6 is usually a good starting point.
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}
rem units1html { 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.
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 }
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">