diff --git a/src/components/Button.js b/src/components/Button.js
index 5d7f785ac0b7..a1231b7e9425 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -217,7 +217,7 @@ class Button extends Component {
                         {textComponent}
                     </View>
                     {this.props.shouldShowRightIcon && (
-                        <View>
+                        <View style={styles.justifyContentCenter}>
                             <Icon
                                 src={this.props.iconRight}
                                 fill={this.props.iconFill}
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index 505f896cba56..456cd1ecf3f0 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -50,7 +50,7 @@ const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]
 // costly invalidations and commits.
 const BaseHTMLEngineProvider = (props) => {
     // We need to memoize this prop to make it referentially stable.
-    const defaultTextProps = useMemo(() => ({selectable: props.textSelectable}), [props.textSelectable]);
+    const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false}), [props.textSelectable]);
 
     // We need to pass multiple system-specific fonts for emojis but
     // we can't apply multiple fonts at once so we need to pass fallback fonts.
diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js
index 773a73a84177..3aaab0e0188b 100644
--- a/src/components/Picker/index.js
+++ b/src/components/Picker/index.js
@@ -187,6 +187,7 @@ class Picker extends PureComponent {
                         fixAndroidTouchableBug
                         onOpen={() => this.setState({isOpen: true})}
                         onClose={() => this.setState({isOpen: false})}
+                        textInputProps={{allowFontScaling: false}}
                         pickerProps={{
                             onFocus: () => this.setState({isOpen: true}),
                             onBlur: () => {
diff --git a/src/components/RNTextInput.js b/src/components/RNTextInput.js
index 75e14b0966e5..ab924357e68b 100644
--- a/src/components/RNTextInput.js
+++ b/src/components/RNTextInput.js
@@ -15,6 +15,7 @@ const defaultProps = {
 
 const RNTextInput = props => (
     <TextInput
+        allowFontScaling={false}
         ref={(ref) => {
             if (!_.isFunction(props.forwardedRef)) {
                 return;
diff --git a/src/components/TestToolRow.js b/src/components/TestToolRow.js
index 505dfefa2172..5364f44537b0 100644
--- a/src/components/TestToolRow.js
+++ b/src/components/TestToolRow.js
@@ -14,7 +14,7 @@ const propTypes = {
 
 const TestToolRow = props => (
     <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter]}>
-        <View style={styles.flex3}>
+        <View style={styles.flex2}>
             <Text>
                 {props.title}
             </Text>
diff --git a/src/components/Text.js b/src/components/Text.js
index 6b4aab927282..64044cb98509 100644
--- a/src/components/Text.js
+++ b/src/components/Text.js
@@ -64,7 +64,7 @@ const Text = React.forwardRef(({
 
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
-        <RNText ref={ref} style={[componentStyle]} {...props}>{children}</RNText>
+        <RNText allowFontScaling={false} ref={ref} style={[componentStyle]} {...props}>{children}</RNText>
     );
 });
 
diff --git a/src/components/TextInput/TextInputLabel/index.native.js b/src/components/TextInput/TextInputLabel/index.native.js
index 2d62a2e647a4..2927930b8216 100644
--- a/src/components/TextInput/TextInputLabel/index.native.js
+++ b/src/components/TextInput/TextInputLabel/index.native.js
@@ -15,6 +15,7 @@ class TextInputLabel extends PureComponent {
     render() {
         return (
             <Animated.Text
+                allowFontScaling={false}
                 onLayout={({nativeEvent}) => {
                     this.setState({width: nativeEvent.layout.width});
                 }}
diff --git a/src/components/TextInput/styleConst.js b/src/components/TextInput/styleConst.js
index 0adfbbc0c60e..0535656d2f30 100644
--- a/src/components/TextInput/styleConst.js
+++ b/src/components/TextInput/styleConst.js
@@ -1,7 +1,9 @@
+import variables from '../../styles/variables';
+
 const ACTIVE_LABEL_TRANSLATE_Y = 4;
 const ACTIVE_LABEL_SCALE = 0.8668;
 
-const INACTIVE_LABEL_TRANSLATE_Y = 16;
+const INACTIVE_LABEL_TRANSLATE_Y = variables.INACTIVE_LABEL_TRANSLATE_Y;
 const INACTIVE_LABEL_SCALE = 1;
 
 export {
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index 2d0067217c1b..2297f8fc5368 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -25,7 +25,7 @@ const defaultProps = {
     onClick: () => {},
 };
 
-const MARKER_INACTIVE_TRANSLATE_Y = -30;
+const MARKER_INACTIVE_TRANSLATE_Y = -40;
 const MARKER_ACTIVE_TRANSLATE_Y = 10;
 
 class FloatingMessageCounter extends PureComponent {
@@ -78,7 +78,7 @@ class FloatingMessageCounter extends PureComponent {
                             small
                             onPress={this.props.onClick}
                             ContentComponent={() => (
-                                <View style={[styles.flexRow]}>
+                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                     <Icon small src={Expensicons.DownArrow} fill={themeColors.textLight} />
                                     <Text
                                         selectable={false}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7b1f38723746..24d81a0854e0 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -29,7 +29,7 @@ const picker = {
     paddingHorizontal: 11,
     paddingBottom: 8,
     paddingTop: 23,
-    height: 50,
+    height: variables.inputHeight,
     borderWidth: 0,
     borderRadius: variables.componentBorderRadiusNormal,
     textAlign: 'left',
@@ -216,25 +216,25 @@ const styles = {
 
     label: {
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
     },
 
     textLabel: {
         color: themeColors.text,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
     },
 
     mutedTextLabel: {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
     },
 
     textMicro: {
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     textMicroBold: {
@@ -248,7 +248,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     textExtraSmallSupporting: {
@@ -605,7 +605,7 @@ const styles = {
     badgeText: {
         color: themeColors.text,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 16,
+        lineHeight: variables.lineHeightNormal,
         ...whiteSpace.noWrap,
     },
 
@@ -652,7 +652,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 14,
+        lineHeight: variables.lineHeightSmall,
     },
 
     chatItemComposeSecondaryRowOffset: {
@@ -679,7 +679,7 @@ const styles = {
     },
 
     componentHeightLarge: {
-        height: variables.componentSizeLarge,
+        height: variables.inputHeight,
     },
 
     textInputContainer: {
@@ -808,7 +808,7 @@ const styles = {
     },
     picker: (disabled = false) => ({
         iconContainer: {
-            top: 15,
+            top: Math.round(variables.inputHeight * 0.5) - 11,
             right: 10,
             zIndex: -1,
         },
@@ -862,21 +862,21 @@ const styles = {
         fontWeight: fontWeightBold,
         color: themeColors.heading,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
         marginBottom: 8,
     },
 
     formHelp: {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.lineHeightLarge,
         marginBottom: 4,
     },
 
     formError: {
         color: themeColors.textError,
         fontSize: variables.fontSizeLabel,
-        lineHeight: 18,
+        lineHeight: variables.formErrorLineHeight,
         marginBottom: 4,
     },
 
@@ -965,7 +965,7 @@ const styles = {
         alignItems: 'center',
         display: 'flex',
         justifyContent: 'center',
-        paddingVertical: 20,
+        paddingVertical: variables.lineHeightXLarge,
         width: '100%',
     },
 
@@ -1179,8 +1179,8 @@ const styles = {
 
     optionDisplayName: {
         fontFamily: fontFamily.EXP_NEUE,
-        height: 20,
-        lineHeight: 20,
+        height: variables.alternateTextHeight,
+        lineHeight: variables.lineHeightXLarge,
         ...whiteSpace.noWrap,
     },
 
@@ -1199,8 +1199,8 @@ const styles = {
     },
 
     optionAlternateText: {
-        height: 20,
-        lineHeight: 20,
+        height: variables.alternateTextHeight,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     optionAlternateTextCompact: {
@@ -1312,7 +1312,7 @@ const styles = {
         fontFamily: fontFamily.EXP_NEUE_BOLD,
         fontSize: variables.fontSizeNormal,
         fontWeight: fontWeightBold,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         paddingRight: 5,
         paddingBottom: 4,
         ...wordBreak.breakWord,
@@ -1323,14 +1323,14 @@ const styles = {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeSmall,
         height: 24,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     chatItemMessage: {
         color: themeColors.text,
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.EXP_NEUE,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         marginTop: -2,
         marginBottom: -2,
         maxWidth: '100%',
@@ -1343,7 +1343,7 @@ const styles = {
         color: themeColors.link,
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.EXP_NEUE,
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
     },
 
     chatItemComposeWithFirstRow: {
@@ -1399,7 +1399,7 @@ const styles = {
         borderWidth: 0,
         borderRadius: 0,
         height: 'auto',
-        lineHeight: 20,
+        lineHeight: variables.lineHeightXLarge,
         ...overflowXHidden,
 
         // On Android, multiline TextInput with height: 'auto' will show extra padding unless they are configured with
@@ -2466,7 +2466,7 @@ const styles = {
     peopleBadgeText: {
         color: themeColors.textReversed,
         fontSize: variables.fontSizeSmall,
-        lineHeight: 16,
+        lineHeight: variables.lineHeightNormal,
         ...whiteSpace.noWrap,
     },
 
@@ -2574,7 +2574,7 @@ const styles = {
     },
 
     communicationsLinkHeight: {
-        height: 20,
+        height: variables.communicationsLinkHeight,
     },
 
     floatingMessageCounterWrapper: {
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 409c9be576f2..34f57d03fa3b 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -1,6 +1,22 @@
+import {PixelRatio} from 'react-native';
+
+/**
+ * Calculate the fontSize, lineHeight and padding when the device font size is changed, In most cases users do not change their device font size so PixelRatio.getFontScale() = 1 and this
+ * method always returns the defaultValue (first param). When the device font size increases/decreases, the PixelRatio.getFontScale() value increases/decreases as well.
+ * This means that if you have text and its 'fontSize' is 19, the device font size changed to the 5th level on the iOS slider and the actual fontSize is 19 * PixelRatio.getFontScale()
+ * = 19 * 1.11 = 21.09. Since we are disallowing font scaling we need to calculate it manually. We calculate it with: PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue :
+ * defaultValue * PixelRatio getFontScale() This means that the fontSize is increased/decreased when the device font size changes up to maxValue (second param)
+ * @param {Number} defaultValue
+ * @param {Number} maxValue
+ * @returns {Number}
+ */
+function getValueUsingPixelRatio(defaultValue, maxValue) {
+    return PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue : defaultValue * PixelRatio.getFontScale();
+}
+
 export default {
-    contentHeaderHeight: 65,
-    componentSizeSmall: 28,
+    contentHeaderHeight: getValueUsingPixelRatio(65, 100),
+    componentSizeSmall: getValueUsingPixelRatio(28, 32),
     componentSizeNormal: 40,
     inputComponentSizeNormal: 42,
     componentSizeLarge: 52,
@@ -17,17 +33,17 @@ export default {
     avatarSizeSmallSubscript: 14,
     fontSizeOnlyEmojis: 30,
     fontSizeOnlyEmojisHeight: 35,
-    fontSizeSmall: 11,
+    fontSizeSmall: getValueUsingPixelRatio(11, 17),
     fontSizeExtraSmall: 9,
-    fontSizeLabel: 13,
-    fontSizeNormal: 15,
-    fontSizeMedium: 16,
-    fontSizeLarge: 17,
+    fontSizeLabel: getValueUsingPixelRatio(13, 19),
+    fontSizeNormal: getValueUsingPixelRatio(15, 21),
+    fontSizeMedium: getValueUsingPixelRatio(16, 22),
+    fontSizeLarge: getValueUsingPixelRatio(17, 19),
     fontSizeHero: 36,
     fontSizeh1: 19,
     fontSizeXXLarge: 28,
     fontSizeXXXLarge: 32,
-    fontSizeNormalHeight: 20,
+    fontSizeNormalHeight: getValueUsingPixelRatio(20, 28),
     lineHeightHero: 40,
     iconSizeXXXSmall: 4,
     iconSizeXXSmall: 8,
@@ -52,7 +68,16 @@ export default {
     minHeightToShowGraphics: 854, // Login form layout breaks below this height due to insufficient space to show the form and graphics
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
-    optionsListSectionHeaderHeight: 54,
+    optionsListSectionHeaderHeight: getValueUsingPixelRatio(54, 60),
+    lineHeightSmall: getValueUsingPixelRatio(14, 16),
+    lineHeightNormal: getValueUsingPixelRatio(16, 21),
+    lineHeightLarge: getValueUsingPixelRatio(18, 24),
+    lineHeightXLarge: getValueUsingPixelRatio(20, 24),
+    inputHeight: getValueUsingPixelRatio(50, 72),
+    formErrorLineHeight: getValueUsingPixelRatio(18, 23),
+    communicationsLinkHeight: getValueUsingPixelRatio(20, 30),
+    alternateTextHeight: getValueUsingPixelRatio(20, 24),
+    INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21),
     sliderBarHeight: 8,
     sliderKnobSize: 26,
 };