diff --git a/src/address-edit/index.less b/src/address-edit/index.less
index d8d6c84f0..736d48232 100644
--- a/src/address-edit/index.less
+++ b/src/address-edit/index.less
@@ -14,7 +14,7 @@
 
     &__finish {
       color: @address-edit-detail-finish-color;
-      font-size: @address-edit-detail-fnish-font-size;
+      font-size: @address-edit-detail-finish-font-size;
     }
   }
 }
diff --git a/src/address-list/index.less b/src/address-list/index.less
index ebe202aec..607f2e25f 100644
--- a/src/address-list/index.less
+++ b/src/address-list/index.less
@@ -30,7 +30,7 @@
   &__name {
     margin-bottom: 5px;
     font-weight: 500;
-    font-size: 14px;
+    font-size: @font-size-md;
     line-height: 20px;
   }
 
diff --git a/src/contact-list/index.less b/src/contact-list/index.less
index c4e762dcd..6e90c270d 100644
--- a/src/contact-list/index.less
+++ b/src/contact-list/index.less
@@ -22,7 +22,7 @@
 
   &__name {
     font-weight: 500;
-    font-size: 14px;
+    font-size: @font-size-md;
     line-height: 20px;
   }
 
diff --git a/src/coupon/index.less b/src/coupon/index.less
index 88d7cdaaa..df53c249f 100644
--- a/src/coupon/index.less
+++ b/src/coupon/index.less
@@ -34,7 +34,7 @@
 
   p {
     color: @gray-dark;
-    font-size: 12px;
+    font-size: @font-size-sm;
     line-height: 16px;
   }
 
diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less
index 3f9a99e35..6291ea490 100644
--- a/src/nav-bar/index.less
+++ b/src/nav-bar/index.less
@@ -42,7 +42,7 @@
   &__right {
     position: absolute;
     bottom: 0;
-    font-size: 14px;
+    font-size: @font-size-md;
   }
 
   &__left {
diff --git a/src/style/var.less b/src/style/var.less
index 56e45e413..4c41ff679 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -1,4 +1,4 @@
-// Color variables
+// Basic Colors
 @black: #000;
 @white: #fff;
 @red: #f44;
@@ -12,7 +12,7 @@
 @gray-darker: #7d7e80;
 @gray-dark: #969799;
 
-// Default colors
+// Component Colors
 @text-color: #323233;
 @border-color: #ebedf0;
 @active-color: #f2f3f5;
@@ -27,17 +27,23 @@
 @padding-lg: @padding-base * 6;
 @padding-xl: @padding-base * 8;
 
+// Font Size
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+
 // ActionSheet
 @action-sheet-max-height: 90%;
 @action-sheet-header-height: 44px;
-@action-sheet-header-font-size: 16px;
+@action-sheet-header-font-size: @font-size-lg;
 @action-sheet-item-height: 50px;
 @action-sheet-item-background: @white;
-@action-sheet-item-font-size: 16px;
+@action-sheet-item-font-size: @font-size-lg;
 @action-sheet-item-text-color: @text-color;
 @action-sheet-item-disabled-text-color: @gray;
 @action-sheet-subname-color: @gray-darker;
-@action-sheet-subname-font-size: 12px;
+@action-sheet-subname-font-size: @font-size-sm;
 @action-sheet-close-icon-size: 18px;
 @action-sheet-close-icon-color: @gray-dark;
 @action-sheet-close-icon-padding: 0 @padding-sm;
@@ -48,35 +54,35 @@
 @address-edit-buttons-padding: @padding-xl @padding-md;
 @address-edit-button-margin-bottom: @padding-sm;
 @address-edit-detail-finish-color: @blue;
-@address-edit-detail-fnish-font-size: 12px;
+@address-edit-detail-finish-font-size: @font-size-sm;
 
 // AddressList
 @address-list-disabled-text-color: @gray-dark;
-@address-list-disabled-text-font-size: 12px;
+@address-list-disabled-text-font-size: @font-size-sm;
 @address-list-disabled-text-line-height: 30px;
 @address-list-add-button-z-index: 9999;
 @address-list-item-padding: @padding-md;
 @address-list-item-text-color: @gray-darker;
 @address-list-item-disabled-text-color: @gray-dark;
-@address-list-item-font-size: 12px;
+@address-list-item-font-size: @font-size-sm;
 @address-list-item-line-height: 16px;
 @address-list-edit-icon-size: 16px;
 
 // Button
 @button-mini-height: 22px;
 @button-mini-min-width: 50px;
-@button-mini-font-size: 10px;
+@button-mini-font-size: @font-size-xs;
 @button-mini-line-height: 20px;
 @button-small-height: 30px;
-@button-small-font-size: 12px;
+@button-small-font-size: @font-size-sm;
 @button-small-min-width: 60px;
 @button-small-line-height: 28px;
-@button-normal-font-size: 14px;
+@button-normal-font-size: @font-size-md;
 @button-large-height: 50px;
 @button-large-line-height: 48px;
 @button-default-height: 44px;
 @button-default-line-height: 42px;
-@button-default-font-size: 16px;
+@button-default-font-size: @font-size-lg;
 @button-default-color: @text-color;
 @button-default-background-color: @white;
 @button-default-border-color: @border-color;
@@ -100,7 +106,7 @@
 
 // Card
 @card-padding: @padding-xs @padding-md;
-@card-font-size: 12px;
+@card-font-size: @font-size-sm;
 @card-text-color: @text-color;
 @card-background-color: @background-color-light;
 @card-thumb-size: 90px;
@@ -109,10 +115,10 @@
 @card-desc-line-height: 20px;
 @card-price-color: @red;
 @card-origin-price-color: @gray-darker;
-@card-origin-price-font-size: 10px;
+@card-origin-price-font-size: @font-size-xs;
 
 // Cell
-@cell-font-size: 14px;
+@cell-font-size: @font-size-md;
 @cell-line-height: 24px;
 @cell-vertical-padding: 10px;
 @cell-horizontal-padding: @padding-md;
@@ -122,21 +128,21 @@
 @cell-active-color: @active-color;
 @cell-required-color: @red;
 @cell-label-color: @gray-dark;
-@cell-label-font-size: 12px;
+@cell-label-font-size: @font-size-sm;
 @cell-label-line-height: 18px;
 @cell-label-margin-top: 3px;
 @cell-value-color: @gray-dark;
 @cell-icon-size: 16px;
 @cell-right-icon-color: @gray-dark;
 @cell-large-vertical-padding: @padding-sm;
-@cell-large-title-font-size: 16px;
-@cell-large-label-font-size: 14px;
+@cell-large-title-font-size: @font-size-lg;
+@cell-large-label-font-size: @font-size-md;
 
 // CellGroup
 @cell-group-background-color: @white;
 @cell-group-title-color: @gray-dark;
 @cell-group-title-padding: @padding-md @padding-md @padding-xs;
-@cell-group-title-font-size: 14px;
+@cell-group-title-font-size: @font-size-md;
 @cell-group-title-line-height: 16px;
 
 // Checkbox
@@ -180,7 +186,7 @@
 
 // CountDown
 @count-down-text-color: @text-color;
-@count-down-font-size: 14px;
+@count-down-font-size: @font-size-md;
 @count-down-line-height: 20px;
 
 // Coupon
@@ -195,7 +201,7 @@
 @coupon-amount-color: @red;
 @coupon-amount-font-size: 24px;
 @coupon-currency-font-size: 50%;
-@coupon-name-font-size: 16px;
+@coupon-name-font-size: @font-size-lg;
 @coupon-disabled-text-color: @gray-dark;
 @coupon-description-padding: @padding-xs @padding-md;
 @coupon-description-background-color: @background-color-light;
@@ -210,12 +216,12 @@
 @coupon-list-exchange-button-height: 32px;
 @coupon-list-empty-image-size: 200px;
 @coupon-list-empty-tip-color: @gray-dark;
-@coupon-list-empty-tip-font-size: 14px;
+@coupon-list-empty-tip-font-size: @font-size-md;
 @coupon-list-empty-tip-line-height: 20px;
 
 // Dialog
 @dialog-width: 85%;
-@dialog-font-size: 16px;
+@dialog-font-size: @font-size-lg;
 @dialog-transition: .3s;
 @dialog-border-radius: 4px;
 @dialog-background-color: @white;
@@ -224,7 +230,7 @@
 @dialog-header-padding-top: @padding-lg;
 @dialog-header-isolated-padding: @padding-lg 0;
 @dialog-message-padding: @padding-lg;
-@dialog-message-font-size: 14px;
+@dialog-message-font-size: @font-size-md;
 @dialog-message-line-height: 20px;
 @dialog-message-max-height: 60vh;
 @dialog-has-title-message-text-color: @gray-darker;
@@ -234,7 +240,7 @@
 // Divider
 @divider-margin: @padding-md 0;
 @divider-text-color: @gray-dark;
-@divider-font-size: 14px;
+@divider-font-size: @font-size-md;
 @divider-line-height: 24px;
 @divider-border-color: @border-color;
 @divider-content-padding: @padding-md;
@@ -266,7 +272,7 @@
 @grid-item-content-active-color: @active-color;
 @grid-item-icon-size: 28px;
 @grid-item-text-color: @gray-darker;
-@grid-item-text-font-size: 12px;
+@grid-item-text-font-size: @font-size-sm;
 
 // GoodsAction
 @goods-action-background-color: @white;
@@ -274,7 +280,7 @@
 @goods-action-icon-height: 50px;
 @goods-action-icon-color: @text-color;
 @goods-action-icon-size: 18px;
-@goods-action-icon-font-size: 10px;
+@goods-action-icon-font-size: @font-size-xs;
 @goods-action-icon-active-color: @active-color;
 @goods-action-icon-text-color: @gray-darker;
 
@@ -282,20 +288,20 @@
 @index-anchor-padding: 0 @padding-md;
 @index-anchor-text-color: @text-color;
 @index-anchor-font-weight: 500;
-@index-anchor-font-size: 14px;
+@index-anchor-font-size: @font-size-md;
 @index-anchor-line-height: 32px;
 @index-anchor-background-color: transparent;
 @index-anchor-sticky-background-color: @white;
 
 // IndexBar
-@index-bar-index-font-size: 10px;
+@index-bar-index-font-size: @font-size-xs;
 @index-bar-index-line-height: 14px;
 
 // Info
 @info-size: 16px;
 @info-color: @white;
 @info-padding: 0 3px;
-@info-font-size: 12px;
+@info-font-size: @font-size-sm;
 @info-font-weight: 500;
 @info-border-width: 1px;
 @info-background-color: @red;
@@ -303,23 +309,23 @@
 
 // Image
 @image-placeholder-text-color: @gray-dark;
-@image-placeholder-font-size: 14px;
+@image-placeholder-font-size: @font-size-md;
 @image-placeholder-background-color: @background-color;
 
 // ImagePreview
 @image-preview-index-text-color: @white;
-@image-preview-index-font-size: 14px;
+@image-preview-index-font-size: @font-size-md;
 @image-preview-overlay-background-color: rgba(0, 0, 0, .9);
 
 // List
 @list-icon-margin-right: 5px;
 @list-text-color: @gray-dark;
-@list-text-font-size: 13px;
+@list-text-font-size: @font-size-sm;
 @list-text-line-height: 50px;
 
 // Loading
 @loading-text-color: @gray-dark;
-@loading-text-font-size: 14px;
+@loading-text-font-size: @font-size-md;
 
 // NavBar
 @nav-bar-height: 46px;
@@ -327,7 +333,7 @@
 @nav-bar-arrow-size: 16px;
 @nav-bar-icon-color: @blue;
 @nav-bar-text-color: @blue;
-@nav-bar-title-font-size: 16px;
+@nav-bar-title-font-size: @font-size-lg;
 @nav-bar-title-text-color: @text-color;
 
 // NoticeBar
@@ -335,7 +341,7 @@
 @notice-bar-padding: 0 @padding-md;
 @notice-bar-wrapable-padding: @padding-xs @padding-md;
 @notice-bar-text-color: @orange-dark;
-@notice-bar-font-size: 14px;
+@notice-bar-font-size: @font-size-md;
 @notice-bar-line-height: 24px;
 @notice-bar-background-color: @orange-light;
 @notice-bar-icon-size: 16px;
@@ -343,7 +349,7 @@
 
 // Notify
 @notify-padding: @padding-xs @padding-md;
-@notify-font-size: 14px;
+@notify-font-size: @font-size-md;
 @notify-line-height: 20px;
 
 // NumberKeyboard
@@ -352,13 +358,13 @@
 @number-keyboard-key-background: #ebedf0;
 @number-keyboard-key-font-size: 24px;
 @number-keyboard-key-active-color: @active-color;
-@number-keyboard-delete-font-size: 16px;
+@number-keyboard-delete-font-size: @font-size-lg;
 @number-keyboard-title-color: @gray-darker;
 @number-keyboard-title-height: 30px;
-@number-keyboard-title-font-size: 14px;
+@number-keyboard-title-font-size: @font-size-md;
 @number-keyboard-close-padding: 0 @padding-md;
 @number-keyboard-close-color: @blue;
-@number-keyboard-close-font-size: 14px;
+@number-keyboard-close-font-size: @font-size-md;
 @number-keyboard-button-text-color: @white;
 @number-keyboard-button-background-color: @blue;
 
@@ -367,7 +373,7 @@
 
 // Pagination
 @pagination-height: 40px;
-@pagination-font-size: 14px;
+@pagination-font-size: @font-size-md;
 @pagination-item-width: 36px;
 @pagination-item-default-color: @blue;
 @pagination-item-disabled-color: @gray-darker;
@@ -388,7 +394,7 @@
 @password-input-border-radius: 6px;
 @password-input-background-color: @white;
 @password-input-info-color: @gray-dark;
-@password-input-info-font-size: 14px;
+@password-input-info-font-size: @font-size-md;
 @password-input-error-info-color: @red;
 @password-input-dot-size: 10px;
 @password-input-dot-color: @black;
@@ -396,12 +402,12 @@
 // Picker
 @picker-background-color: @white;
 @picker-toolbar-height: 44px;
-@picker-title-font-size: 16px;
+@picker-title-font-size: @font-size-lg;
 @picker-action-padding: 0 @padding-md;
-@picker-action-font-size: 14px;
+@picker-action-font-size: @font-size-md;
 @picker-action-text-color: @blue;
 @picker-action-active-color: @active-color;
-@picker-option-font-size: 16px;
+@picker-option-font-size: @font-size-lg;
 @picker-option-text-color: @black;
 @picker-option-disabled-opacity: .3;
 
@@ -414,13 +420,13 @@
 @progress-height: 4px;
 @progress-background-color: @gray-light;
 @progress-pivot-padding: 0 5px;
-@progress-pivot-font-size: 10px;
+@progress-pivot-font-size: @font-size-xs;
 @progress-pivot-line-height: 1.6;
 @progress-pivot-background-color: @gray-light;
 
 // PullRefresh
 @pull-refresh-head-height: 50px;
-@pull-refresh-head-font-size: 14px;
+@pull-refresh-head-font-size: @font-size-md;
 @pull-refresh-head-text-color: @gray-dark;
 
 // Radio
@@ -444,17 +450,17 @@
 @search-input-height: 34px;
 @search-label-padding: 0 5px;
 @search-label-color: @text-color;
-@search-label-font-size: 14px;
+@search-label-font-size: @font-size-md;
 @search-left-icon-color: @gray-dark;
 @search-action-padding: 0 @padding-xs;
 @search-action-text-color: @text-color;
-@search-action-font-size: 14px;
+@search-action-font-size: @font-size-md;
 
 // Sidebar
 @sidebar-width: 85px;
 
 // SidebarItem
-@sidebar-font-size: 14px;
+@sidebar-font-size: @font-size-md;
 @sidebar-line-height: 1.4;
 @sidebar-text-color: @gray-darker;
 @sidebar-padding: 20px @padding-sm 20px @padding-xs;
@@ -485,14 +491,14 @@
 // Step
 @step-text-color: @gray-dark;
 @step-process-text-color: @text-color;
-@step-font-size: 14px;
+@step-font-size: @font-size-md;
 @step-line-color: @border-color;
 @step-finish-line-color: @green;
 @step-finish-text-color: @text-color;
 @step-icon-size: 12px;
 @step-circle-size: 5px;
 @step-circle-color: @gray-dark;
-@step-horizontal-title-font-size: 12px;
+@step-horizontal-title-font-size: @font-size-sm;
 
 // Steps
 @steps-background-color: @white;
@@ -508,7 +514,7 @@
 @stepper-button-disabled-icon-color: @gray;
 @stepper-input-width: 32px;
 @stepper-input-height: 28px;
-@stepper-input-font-size: 14px;
+@stepper-input-font-size: @font-size-md;
 @stepper-input-text-color: @text-color;
 @stepper-input-disabled-text-color: @gray;
 @stepper-input-disabled-background-color: @active-color;
@@ -521,11 +527,11 @@
 @submit-bar-button-width: 110px;
 @submit-bar-price-color: @red;
 @submit-bar-price-font-size: 18px;
-@submit-bar-currency-font-size: 14px;
+@submit-bar-currency-font-size: @font-size-md;
 @submit-bar-text-color: @text-color;
-@submit-bar-text-font-size: 14px;
+@submit-bar-text-font-size: @font-size-md;
 @submit-bar-tip-padding: @padding-xs @padding-sm;
-@submit-bar-tip-font-size: 12px;
+@submit-bar-tip-font-size: @font-size-sm;
 @submit-bar-tip-line-height: 1.5;
 @submit-bar-tip-color: #f56723;
 @submit-bar-tip-background-color: #fff7cc;
@@ -563,7 +569,7 @@
 @tabbar-background-color: @white;
 
 // TabbarItem
-@tabbar-item-font-size: 12px;
+@tabbar-item-font-size: @font-size-sm;
 @tabbar-item-text-color: @gray-darker;
 @tabbar-item-active-color: @blue;
 @tabbar-item-line-height: 1;
@@ -574,7 +580,7 @@
 @tab-text-color: @gray-darker;
 @tab-active-text-color: @text-color;
 @tab-disabled-text-color: @gray;
-@tab-font-size: 14px;
+@tab-font-size: @font-size-md;
 
 // Tabs
 @tabs-default-color: @red;
@@ -586,9 +592,9 @@
 
 // Tag
 @tag-padding: .2em .5em;
-@tag-font-size: 10px;
-@tag-medium-font-size: 12px;
-@tag-large-font-size: 14px;
+@tag-font-size: @font-size-xs;
+@tag-medium-font-size: @font-size-sm;
+@tag-large-font-size: @font-size-md;
 @tag-text-color: @white;
 @tag-border-radius: .2em;
 @tag-round-border-radius: .8em;
@@ -600,7 +606,7 @@
 
 // Toast
 @toast-max-width: 70%;
-@toast-font-size: 14px;
+@toast-font-size: @font-size-md;
 @toast-text-color: @white;
 @toast-line-height: 20px;
 @toast-border-radius: 4px;
@@ -615,7 +621,7 @@
 @toast-position-bottom-distance: 50px;
 
 // TreeSelect
-@tree-select-font-size: 14px;
+@tree-select-font-size: @font-size-md;
 @tree-select-nav-background-color: @background-color-light;
 @tree-select-content-background-color: @white;
 @tree-select-nav-item-padding: 0 @padding-xs 0 @padding-sm;
@@ -631,7 +637,7 @@
 @uploader-icon-size: 24px;
 @uploader-icon-color: @gray-dark;
 @uploader-text-color: @gray-dark;
-@uploader-text-font-size: 12px;
+@uploader-text-font-size: @font-size-sm;
 @uploader-upload-border-color: @gray-light;
 @uploader-upload-background-color: @white;
 @uploader-delete-color: @white;
@@ -639,5 +645,5 @@
 @uploader-file-background-color: @background-color;
 @uploader-file-icon-size: 20px;
 @uploader-file-icon-color: @gray-darker;
-@uploader-file-name-font-size: 12px;
+@uploader-file-name-font-size: @font-size-sm;
 @uploader-file-name-text-color: @gray-darker;