diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 82e2e128..143fb7dd 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -48,12 +48,15 @@ class Template extends Component<Props> {
           valign="stretch"
           css={{
             flex: '1 0 auto',
-            marginTop: 60,
-            [media.between('medium', 'large')]: {
-              marginTop: 50,
+            marginTop:
+              'calc(var(--header-height-large) + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+            [media.size('medium')]: {
+              marginTop:
+                'calc(var(--header-height-normal) + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
             },
-            [media.lessThan('medium')]: {
-              marginTop: 40,
+            [media.lessThan('small')]: {
+              marginTop:
+                'calc(var(--header-height-small) + var(--survey-banner-height-small) + var(--social-banner-height-small))',
             },
           }}>
           {children}
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 64573ba0..e4ac955f 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -58,12 +58,12 @@ const Header = ({location}: {location: Location}) => (
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
-          height: 60,
-          [media.between('small', 'large')]: {
-            height: 50,
+          height: 'var(--header-height-large)',
+          [media.size('medium')]: {
+            height: 'var(--header-height-normal)',
           },
           [media.lessThan('small')]: {
-            height: 40,
+            height: 'var(--header-height-small)',
           },
         }}>
         <Link
diff --git a/src/components/MarkdownHeader/MarkdownHeader.js b/src/components/MarkdownHeader/MarkdownHeader.js
index 1c684005..b04beda1 100644
--- a/src/components/MarkdownHeader/MarkdownHeader.js
+++ b/src/components/MarkdownHeader/MarkdownHeader.js
@@ -17,23 +17,15 @@ const MarkdownHeader = ({title}: {title: string}) => {
         css={{
           color: colors.dark,
           marginBottom: 0,
-          marginTop:
-            'calc(40px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+          marginTop: 80,
           ...fonts.header,
 
-          [media.lessThan('small')]: {
-            marginTop:
-              'calc(40px + var(--survey-banner-height-small) + var(--social-banner-height-small))',
-          },
-
           [media.size('medium')]: {
-            marginTop:
-              'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+            marginTop: 60,
           },
 
-          [media.greaterThan('large')]: {
-            marginTop:
-              'calc(80px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+          [media.lessThan('small')]: {
+            marginTop: 40,
           },
         }}>
         {title}
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index 56767421..df754178 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -16,9 +16,8 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import FeedbackForm from 'components/FeedbackForm';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
-import {sharedStyles} from 'theme';
 import createCanonicalUrl from 'utils/createCanonicalUrl';
-import {colors, media} from 'theme';
+import {sharedStyles, colors, media, fonts} from 'theme';
 
 import type {Node} from 'types';
 
@@ -75,11 +74,10 @@ const MarkdownPage = ({
         position: 'relative',
         zIndex: 0,
         '& h1, & h2, & h3, & h4, & h5, & h6': {
-          scrollMarginTop:
-            'calc(var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
-          [media.lessThan('small')]: {
-            scrollMarginTop:
-              'calc(var(--survey-banner-height-small) + var(--social-banner-height-small))',
+          scrollMarginTop: fonts.header.fontSize,
+
+          [media.lessThan('medium')]: {
+            scrollMarginTop: fonts.header[media.lessThan('medium')].fontSize,
           },
         },
       }}>
diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
index 8fe30646..cdcbbfd1 100644
--- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
+++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
@@ -118,21 +118,18 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               transition: 'transform 0.5s ease',
             }}
             css={{
-              marginTop:
-                'calc(60px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+              marginTop: 60,
 
               [media.size('xsmall')]: {
                 marginTop: 40,
               },
 
               [media.between('small', 'medium')]: {
-                marginTop:
-                  'calc(20px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+                marginTop: 20,
               },
 
               [media.between('medium', 'large')]: {
-                marginTop:
-                  'calc(50px + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+                marginTop: 50,
               },
 
               [media.greaterThan('small')]: {
diff --git a/src/html.js b/src/html.js
index d060dfb7..482fa437 100644
--- a/src/html.js
+++ b/src/html.js
@@ -107,6 +107,9 @@ export default class HTML extends React.Component<Props> {
                   };
 
                   function updateStyles() {
+                    document.documentElement.style.setProperty('--header-height-large', '60px');
+                    document.documentElement.style.setProperty('--header-height-normal', '50px');
+                    document.documentElement.style.setProperty('--header-height-small', '40px');
                     if (activeSurveyBanner) {
                       document.documentElement.style.setProperty('--survey-banner-display', 'block');
                       document.documentElement.style.setProperty('--survey-banner-height-normal', activeSurveyBanner.normalHeight + 'px');
diff --git a/src/pages/index.js b/src/pages/index.js
index 88804b4b..3e16f93c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -56,11 +56,6 @@ class Home extends Component {
         <div
           css={{
             width: '100%',
-            marginTop: 'var(--banner-height-normal)',
-
-            [media.lessThan('small')]: {
-              marginTop: 'var(--banner-height-small)',
-            },
           }}>
           <header
             css={{