diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less
index 6146182..bbdfc8b 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -14,6 +14,8 @@
  */
 @fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
 @fontFamilyBase: @fontFamilySans;
+
+@fontSizeBrowserDefault: 16; // Assumed browser default of `16px`.
 @tocFontSize: 0.8em;
 
 @indicatorFontSize: 0.4em;
@@ -44,7 +46,8 @@
 @contentMargin: 16px;
 
 // Header
-@headerHeight: 3.35em;
+@headerHeight: unit( 54 / @fontSizeBrowserDefault, em );
+@headerVerticalPadding: 0.15em;
 @headerMarginTop: -1px; // used to hide the header border top when a banner is not present
 @searchBoxWidth: 375/16em;
 @iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;
diff --git a/skinStyles/mobile.startup/Overlay.less b/skinStyles/mobile.startup/Overlay.less
index e5f8775..ac7119e 100644
--- a/skinStyles/mobile.startup/Overlay.less
+++ b/skinStyles/mobile.startup/Overlay.less
@@ -25,7 +25,7 @@
 }
 
 .overlay-header .overlay-title {
-	padding: 0.15em 0;
+	padding: @headerVerticalPadding 0;
 
 	&:last-child {
 		// Reserve space to the right in case the search form in the header or
diff --git a/skinStyles/mobile.startup/search/SearchOverlay.less b/skinStyles/mobile.startup/search/SearchOverlay.less
index 70d532b..d6cd7fd 100644
--- a/skinStyles/mobile.startup/search/SearchOverlay.less
+++ b/skinStyles/mobile.startup/search/SearchOverlay.less
@@ -11,9 +11,10 @@
 
 	.clear {
 		position: absolute;
-		top: ( @headerHeight / 2 ) - ( @iconSize / 2 );
+		// the icon should take into account overlay-title top padding
+		// and then be centered
+		top: ( @iconSize / 2 ) + @headerVerticalPadding;
 		right: 0;
-		margin-top: @headerMarginTop;
 	}
 }