diff --git a/components/common.less b/components/common.less
index 300faa39b..323202cde 100644
--- a/components/common.less
+++ b/components/common.less
@@ -7,7 +7,7 @@
 
 /* Framework */
 html {
-	font-size: @html-font-size;
+	font-size: @font-size-root;
 }
 
 html,
diff --git a/components/search.less b/components/search.less
index 78495cd72..cca5e7f55 100644
--- a/components/search.less
+++ b/components/search.less
@@ -38,15 +38,16 @@
 }
 
 // The search input.
+
 #searchInput {
 	width: 100%;
 	.box-sizing( border-box );
 	border: @border-width-base solid @colorGray10;
 	border-radius: @borderRadius;
 	// `padding-right` equals to `#searchbutton` width below.
-	padding: 0.4em 1.818em 0.4em 0.4em;
+	padding: 0.4em @width-search-button 0.4em 0.4em;
 	.box-shadow( @boxShadowWidget );
-	font-size: 0.8125em; // Equals to `13px` at browser default of `16px`.
+	font-size: @font-size-search-input;
 	direction: ltr;
 	.transition( ~'border-color 250ms, box-shadow 250ms' );
 	// Support: Webkit browsers. Undo the proprietary styles applied to `type=search` fields,
@@ -84,12 +85,15 @@
 	position: absolute;
 	top: @border-width-base;
 	bottom: @border-width-base;
+	// `@border-width-base * 2` is in regards to harmonize position start and end.
 	right: @border-width-base;
-	min-width: 20px;
-	width: 1.818em; // Equals to `20px` at `11px` base.
+	min-width: 24px;
+	width: @width-search-button;
 	border: 0;
 	padding: 0;
 	cursor: pointer;
+	// Equal `font-size` to search input for `padding` calculationo.
+	font-size: @font-size-search-input;
 	/* Opera 12 on RTL flips the text in a funny way without this. */
 	/* @noflip */
 	direction: ltr;
diff --git a/variables.less b/variables.less
index 7e3883d39..e819761e4 100644
--- a/variables.less
+++ b/variables.less
@@ -1,6 +1,6 @@
 @import 'mediawiki.ui/variables';
 
-@html-font-size: 100%;
+@font-size-root: 100%;
 @font-size-browser: 16; // Assumed browser default of `16px`
 
 @font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@@ -44,3 +44,7 @@
 @background-position-menu-personal-icon: left ( 4 / @font-size-browser / @font-size-menu-personal );
 @font-size-menu-personal: 0.75em;
 @line-height-menu-personal: 14 / @font-size-browser / @font-size-menu-personal; // equals `1.667em`≈`14px`
+
+// Search
+@width-search-button: 24 / @font-size-browser / @font-size-search-input;
+@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.