{"id":6261,"date":"2020-09-25T16:04:53","date_gmt":"2020-09-25T10:34:53","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6261"},"modified":"2020-09-25T16:04:53","modified_gmt":"2020-09-25T10:34:53","slug":"adjustable-font-sizes-in-react-native","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/","title":{"rendered":"Adjustable font sizes in React Native"},"content":{"rendered":"

You may have occurred with the problem of font sizes not adjusting according to the screen size. Smart devices are coming in a number of sizes, from tablet to small smartphones. The ios and android have different pixel ratios too. If you are defining the font sizes in pixels then the size may vary from device to device as the pixel of every device is different. So we have to define every font according to the device pixel density and dimensions of the device.<\/span><\/p>\n

React Native provides two API for the dimension of the device and a pixel density of the device.<\/span><\/p>\n

\"\"<\/p>\n

Now we have to do some math to calculate the required font size.<\/span><\/p>\n

The minimum width and minimum height of available devices are 375 and 667mm respectively.<\/span><\/p>\n

So we put them in a constant.<\/span><\/p>\n

const baseWidth = 375;\r\n\r\nconst baseHeight = 667;<\/pre>\n
\u00a0Now we will calculate the scale using the baseWidth.<\/span><\/p>\n
const scale = SCREEN_WIDTH \/ 320;<\/pre>\n
We have to create a function to calculate the font of the device.<\/span><\/p>\n
export function normalize(size) {\r\n\r\n\u00a0\u00a0const newSize = size * scale\u00a0\r\n\r\n\u00a0\u00a0if (Platform.OS === 'ios') {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Math.round(PixelRatio.roundToNearestPixel(newSize))\r\n\r\n\u00a0\u00a0} else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n
\"\"<\/p>\n
This normalise function is exported to calculate the font sizes.<\/span><\/p>\n
Demonstrating an example below:<\/span><\/p>\n
import { Dimensions, Platform, PixelRatio } from 'react-native';\r\n\r\nconst {\r\n\r\n\u00a0\u00a0width: SCREEN_WIDTH,\r\n\r\n\u00a0\u00a0height: SCREEN_HEIGHT,\r\n\r\n} = Dimensions.get('window');\r\n\r\n\r\nconst scale = SCREEN_WIDTH \/ 320;\r\n\r\nexport function normalize(size) {\r\n\r\n\u00a0\u00a0const newSize = size * scale\u00a0\r\n\r\n\u00a0if (Platform.OS === 'ios') {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Math.round(PixelRatio.roundToNearestPixel(newSize))\r\n\r\n\u00a0\u00a0} else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n
Usage example :<\/span><\/p>\n
const styles = {\r\n\r\n\u00a0\u00a0mini: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0fontSize: normalize(12),\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0small: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0fontSize: normalize(15),\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0medium: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0fontSize: normalize(17),\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0large: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0fontSize: normalize(20),\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0xlarge: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0fontSize: normalize(24),\r\n\r\n\u00a0\u00a0},\r\n\r\n};<\/pre>\n
We can import this function and can use it to define fonts where we want.<\/span><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
You may have occurred with the problem of font sizes not adjusting according to the screen size. Smart devices are coming in a number of sizes, from tablet to small smartphones. The ios and android have different pixel ratios too. If you are defining the font sizes in pixels then the size may vary from […]<\/p>\n","protected":false},"author":1,"featured_media":6264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[412],"tags":[542,14],"class_list":["post-6261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-adjustable-font-sizes-in-react-native","tag-innovationm"],"yoast_head":"\nAdjustable font sizes in React Native - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adjustable font sizes in React Native - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"You may have occurred with the problem of font sizes not adjusting according to the screen size. Smart devices are coming in a number of sizes, from tablet to small smartphones. The ios and android have different pixel ratios too. If you are defining the font sizes in pixels then the size may vary from […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-25T10:34:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Adjustable-Font-Sizes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Adjustable font sizes in React Native\",\"datePublished\":\"2020-09-25T10:34:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/\"},\"wordCount\":195,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Adjustable-Font-Sizes.png\",\"keywords\":[\"Adjustable font sizes in React Native\",\"InnovationM\"],\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/\",\"name\":\"Adjustable font sizes in React Native - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Adjustable-Font-Sizes.png\",\"datePublished\":\"2020-09-25T10:34:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Adjustable-Font-Sizes.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Adjustable-Font-Sizes.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/adjustable-font-sizes-in-react-native\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adjustable font sizes in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adjustable font sizes in React Native - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Adjustable font sizes in React Native - InnovationM - Blog","og_description":"You may have occurred with the problem of font sizes not adjusting according to the screen size. Smart devices are coming in a number of sizes, from tablet to small smartphones. The ios and android have different pixel ratios too. If you are defining the font sizes in pixels then the size may vary from […]","og_url":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-09-25T10:34:53+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Adjustable-Font-Sizes.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Adjustable font sizes in React Native","datePublished":"2020-09-25T10:34:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/"},"wordCount":195,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Adjustable-Font-Sizes.png","keywords":["Adjustable font sizes in React Native","InnovationM"],"articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/","url":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/","name":"Adjustable font sizes in React Native - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Adjustable-Font-Sizes.png","datePublished":"2020-09-25T10:34:53+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Adjustable-Font-Sizes.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Adjustable-Font-Sizes.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/adjustable-font-sizes-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adjustable font sizes in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6261"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6261\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6264"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}