{"id":3934,"url":"https://github.com/hectahertz/react-native-typography","last_synced_at":"2025-05-12T15:15:46.600Z","repository":{"id":27250926,"uuid":"113065002","full_name":"hectahertz/react-native-typography","owner":"hectahertz","description":"Pixel–perfect, native–looking typographic styles for React Native ✒️","archived":false,"fork":false,"pushed_at":"2025-01-12T18:46:25.000Z","size":4166,"stargazers_count":3463,"open_issues_count":19,"forks_count":109,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-23T17:09:25.077Z","etag":null,"topics":["android","ios","react","react-native","typography","typography-themes"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hectahertz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-12-04T16:12:46.000Z","updated_at":"2025-04-22T12:04:06.000Z","dependencies_parsed_at":"2025-04-10T23:21:39.599Z","dependency_job_id":"3029a6af-a439-4a25-9bcd-086d4172136e","html_url":"https://github.com/hectahertz/react-native-typography","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Freact-native-typography","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Freact-native-typography/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Freact-native-typography/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Freact-native-typography/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hectahertz","download_url":"https://codeload.github.com/hectahertz/react-native-typography/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477812,"owners_count":21437049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react","react-native","typography","typography-themes"],"created_at":"2024-01-05T20:16:55.778Z","updated_at":"2025-04-23T17:09:34.814Z","avatar_url":"https://github.com/hectahertz.png","language":"JavaScript","funding_links":[],"categories":["Components","Usage","JavaScript","Others"],"sub_categories":["UI","Example usages","Fonts"],"readme":"\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./images/logoDark.png\"\u003e\n  \u003cimg alt=\"React Native typography\" src=\"./images/logo.png\" width=\"275\"\u003e\n\u003c/picture\u003e\n\nPixel–perfect, native–looking typographic styles for React Native.\n\n[![npm version](https://img.shields.io/npm/v/react-native-typography.svg)](https://www.npmjs.com/package/react-native-typography)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-typography.svg)](https://www.npmjs.com/package/react-native-typography)\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"React Native Typography Human Showcase\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-human-ios.png\" width=\"49.7%\"/\u003e\n\u003cimg alt=\"React Native Typography Material Showcase\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-material-android.png\" width=\"49.7%\"/\u003e\n\u003c/p\u003e\n\n## Why\n\nCreating great Text Styles in React Native\n[is not a simple task](https://medium.com/@martin_adamko/react-native-quirks-2fb1ae0bbf80),\nit requires a lot of fiddling and handling edge cases.\n\nThis library provides a good set of defaults and helpers that cover the majority\nof the cases you'll need, make your code much simpler and ✨*bonus*✨ render\ngreat [on iOS, Android and the web](#cross-platform) 😄\n\n## Quick start\n\nAdd the dependency:\n\n```sh\nyarn add react-native-typography\n```\n\nSet a style in your component:\n\n```JSX\nimport { material } from 'react-native-typography'\n\n\u003cText style={material.display1}\u003eHello Typography!\u003c/Text\u003e\n```\n\nAnd it will look like this:\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"Material Design Collection\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/hello-world.png\" width=\"40%\" height=\"40%\"/\u003e\n\u003c/p\u003e\n\n### Demo app\n\n* You can run the [included Demo Expo app](demo/), all of the screenshots are taken directly from there!\n\n## Typography collections\n\nWe provide a series of predefined collections for you to start with that match\nthe native design systems for iOS and Android.\n\nYou can **use them directly** wherever you would supply a\n[textStyle](https://facebook.github.io/react-native/docs/text#style).\n\nThere's also the option of [extending them](#customization--helpers) to create\nyour own styles.\n\n### Material Design\n\nIncludes all the styles defined in the\n[Material Design Guidelines](https://material.io/guidelines/style/typography.html#typography-styles).\nDefines size, weight and color.\n\n```JSX\nimport { material } from 'react-native-typography'\n\n\u003cText style={material.display4}\u003eHello Material!\u003c/Text\u003e\n```\n\n\u003cimg alt=\"Material Design Collection\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/material-collection-android.png\" width=\"80%\" height=\"80%\"/\u003e\n\n### Human Interface Guidelines\n\nDefined in the\n[Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/).\nDefines size, weight and color.\n\n```JSX\nimport { human } from 'react-native-typography'\n\n\u003cText style={human.largeTitle}\u003eHello Human!\u003c/Text\u003e\n```\n\n\u003cimg alt=\"Human Interface Collection\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/human-collection-ios.png\" width=\"80%\" height=\"80%\"/\u003e\n\n### iOSUIKit\n\nExtracted from\n[the official Apple sketch file](https://developer.apple.com/design/resources/)\n\nThese are the text styles that fall under the category of iOS UIKit, and are\nused to build the UI components of iOS Apps.\n\nThey build on top of the Human Interface styles, customizing some properties\nsuch as weight or letter spacing.\n\n```JSX\nimport { iOSUIKit } from 'react-native-typography'\n\n\u003cText style={iOSUIKit.largeTitleEmphasized}\u003eHello iOS UI Kit!\u003c/Text\u003e\n```\n\n\u003cimg alt=\"iOSUIKit Collection\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/iosuikit-collection-ios.png\" width=\"80%\" height=\"80%\"/\u003e\n\n## Customization \u0026 Helpers\n\nThe collections provide every style in 2 different ways:\n\n* As a StyleSheet, e.g.: `material.title`\n* As a plain object, e.g.: `material.titleObject`\n\nThe basic way to use them is to set the StyleSheet directly where you would\nsupply a\n[textStyle](https://facebook.github.io/react-native/docs/text#style):\n\n```JSX\n\u003cText style={material.title}\u003eTitle\u003c/Text\u003e\n```\n\nTo extend the styles, you can **spread the object** inside your own StyleSheet\nand override some of its attributes:\n\n```JSX\nconst styles = StyleSheet.create({\n  yellowTitle: {\n    ...material.titleObject,\n    color: iOSColors.yellow,\n  },\n});\n\n\u003cText style={styles.yellowTitle}\u003eTitle\u003c/Text\u003e\n```\n\nAnother option would be to **combine the provided StyleSheet** with your own\nStyleSheet.\n\n```JSX\nconst styles = StyleSheet.create({\n  yellow: {\n    color: iOSColors.yellow,\n  },\n});\n\n\u003cText style={[material.title, styles.yellow]}\u003eTitle\u003c/Text\u003e\n```\n\n### Weights\n\nA font weight in React Native is sometimes formed by a pair of a fontFamily and\na fontWeight, but not always! It depends on the typeface, sometimes it's just\ndefined by the fontFamily.\n\nWith these helpers, you don't have to worry about those inconsistencies.\n\nTo combine them with a collection style (or your own styles) just spread them,\nas they are plain objects.\n\n```JSX\nconst styles = StyleSheet.create({\n  lightTitle: {\n    ...material.titleObject,\n    ...systemWeights.light,\n  },\n});\n\n\u003cText style={styles.lightTitle}\u003eTitle\u003c/Text\u003e\n```\n\n#### System Weights\n\n```JSX\nimport { systemWeights } from 'react-native-typography'\n```\n\nThe System weights render visually similar weights of the **Native\ntypefaces** on each platform.\n[Read more about cross-platform here.](#cross-platform)\n\nThis is the recommended way of customizing your weights unless you really need\ndifferent visual styles for each platform.\n\nThey follow the San Francisco naming convention, as it has more steps, which\nmakes it more future–proof.\n\n\u003cimg alt=\"System Weights iOS\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/system-weights-ios.png\" width=\"80%\" height=\"80%\"/\u003e\n\n\u003cimg alt=\"System Weights Android\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/system-weights-android.png\" width=\"80%\" height=\"80%\"/\u003e\n\n\u003cimg alt=\"System Weights Web\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/system-weights-web.png\" width=\"80%\" height=\"80%\"/\u003e\n\n#### San Francisco Weights\n\n```JSX\nimport { sanFranciscoWeights } from 'react-native-typography'\n```\n\nThese weights are **only intended for iOS**, as they directly reference the\nnative San Francisco typeface.\n\n\u003cimg alt=\"San Francisco Weights\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/san-francisco-weights.png\" width=\"80%\" height=\"50%\"/\u003e\n\n#### Roboto Weights\n\n```JSX\nimport { robotoWeights } from 'react-native-typography'\n```\n\nThese weights are **only intended for Android**, as they directly reference the\nnative Roboto typeface.\n\n\u003cimg alt=\"Roboto Weights\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/roboto-weights.png\" width=\"80%\" height=\"80%\"/\u003e\n\n#### Web Weights\n\n```JSX\nimport { webWeights } from 'react-native-typography'\n```\n\nThese weights are **only intended for the web**, and render [react-native-web](https://github.com/necolas/react-native-web)'s system font stack.\n\n\u003cimg alt=\"Web Weights\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/web-weights.png\" width=\"80%\" height=\"80%\"/\u003e\n\n### Colors\n\nWe also include the default text color hex values for each platform.\n\n#### iOS\n\n```JSX\nimport { iOSColors } from 'react-native-typography'\n```\n\n\u003cimg alt=\"Colors iOS\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/ios-colors.png\" width=\"50%\" height=\"50%\"/\u003e\n\n```JSX\nconst styles = StyleSheet.create({\n  yellowTitle: {\n    ...human.title3Object,\n    color: iOSColors.yellow,\n  },\n});\n\n\u003cText style={styles.yellowTitle}\u003eTitle\u003c/Text\u003e\n```\n\n#### Material\n\n```JSX\nimport { materialColors } from 'react-native-typography'\n```\n\n\u003cimg alt=\"Colors Material\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/material-colors.png\" width=\"50%\" height=\"50%\"/\u003e\n\n```JSX\nconst styles = StyleSheet.create({\n  tertiaryTitle: {\n    ...material.titleObject,\n    color: materialColors.blackTertiary,\n  },\n});\n\n\u003cText style={styles.tertiaryTitle}\u003eTitle\u003c/Text\u003e\n```\n\n### Spacing/Kerning\n\n#### San Francisco\n\nThe San Francisco typeface defines its letter spacing via Kerning. This\nis not compatible with the React Native text style properties, as they take\nletter-spacing instead.\n\nTo perform this conversion on iOS you can use the `sanFranciscoSpacing` function, which\nreceives the font size and returns the appropriate letter spacing.\n\nThis is not needed for the web as the browsers already take care of this.\n\n```JSX\nimport { sanFranciscoSpacing } from 'react-native-typography'\n\nconst styles = StyleSheet.create({\n  customSize: {\n    ..., // some other props\n    fontSize: 34,\n    letterSpacing: sanFranciscoSpacing(34),\n  },\n});\n```\n\nThis is already taken care of on the collections, but if you want to define your\nown sizes you can adjust the spacing on iOS with this helper.\n\n## Dense and tall scripts\n\nDense and tall scripts are fully supported, check [the full documentation here!](DENSE_TALL.md)\n\n```JSX\nimport { materialDense } from 'react-native-typography'\n\n\u003cText style={materialDense.display4}\u003e你好排版！\u003c/Text\u003e\n```\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"Material Design Collection\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/hello-world-chinese.png\" width=\"190\" height=\"70\"/\u003e\n\u003c/p\u003e\n\n## Cross-platform\n\nQuoting\n[the Material Design Platform recommendations](https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-platform-recommendations)\n\n\u003e The default typeface on iOS is San Francisco. Using this typeface is the\n\u003e easiest way to implement accessibility features like Dynamic Type. Using other\n\u003e typefaces may require making adjustments to get the same accessibility\n\u003e features.\n\nThis is the approach that we like to follow, and all the collections exported\nfrom this library render nicely on all the supported platforms with their respective native\ntypefaces, for that we use the [System](#system-weights) weight helper.\n\nYou can [check the code of the example app](example/App.js) where we included a\ncouple of screens that follow this philosophy, this is how they render on iOS and Android:\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"React Native Typography Human Showcase on iOS\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-human-ios.png\" width=\"49.7%\"/\u003e\n\u003cimg alt=\"React Native Typography Human Showcase on Android\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-human-android.png\" width=\"49.7%\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"React Native Typography Human Showcase on iOS\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-material-ios.png\" width=\"49.7%\"/\u003e\n\u003cimg alt=\"React Native Typography Material Showcase on Android\" src=\"https://raw.githubusercontent.com/hectahertz/react-native-typography/HEAD/images/showcase-material-android.png\" width=\"49.7%\"/\u003e\n\u003c/p\u003e\n\n## F.A.Q.\n\n#### But I don't wanna use the Material Design or Human Interface Guidelines! Is there any reason why I should use this library?\n\nAbsolutely! The helpers are very convenient to build your own text styles as\nthey work around\n[the quirks of working with text styles on React Native](https://medium.com/@martin_adamko/react-native-quirks-2fb1ae0bbf80),\neven if you want to specify your own sizes and weights,\n[check them out!](#customization--helpers)\n\n#### Kerning is not 100% accurate on the Display sizes for the Material styles on Android\n\nThere's no support for letter spacing on React Native Android yet. ☹️\n\n#### Where is Roboto Black?\n\nIt's not available by default on React Native Android yet. 😐\n\n#### Why are there less weights available for CJK(Chinese, Japanese, Korean) languages on Android than iOS?\n\nAndroid uses Noto Sans CJK (also known as Source Han Sans) to render those\nlanguages, and\n[even though it has seven weights](https://material.io/guidelines/style/typography.html#typography-typeface),\nthey're not shipped with Android. 😕\n\nThere are some issues tracking this already, hopefully they will be included in\nthe future.\n\n* https://issuetracker.google.com/issues/37064674\n* https://issuetracker.google.com/issues/37106325\n\n#### I use styled-components/glamorous/etc. Can I use react-native-typography?\n\nOf course! Just use the plain objects accordingly as explained above.\n\n#### Why is this library exporting StyleSheets and objects instead of components?\n\nThe idea behind it is that textStyles are the universally accepted way of\nstyling text and this makes integration\n[with many libraries](https://reactnavigation.org/docs/navigators/stack#headerTitleStyle)\neasier.\n\nThe StyleSheet/Object pattern is\n[already being used](https://facebook.github.io/react-native/docs/stylesheet.html#absolutefill)\nin the React Native codebase to provide an easy way to extend exported\nStyleSheets.\n\nIf you enjoy using pre-styled components for your text, you can easily\ndefine them and just supply the desired styles from this library! 🙂\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available,\nsee the\n[tags in this repository](https://github.com/hectahertz/react-native-typography/tags).\n\n## Authors\n\n* **[Hector Garcia](https://github.com/hectahertz)**\n\nSee also the list of\n[contributors](https://github.com/hectahertz/react-native-typography/contributors)\nwho participated in this project.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Acknowledgments\n\n* [Kyle Hickinson](https://github.com/kylehickinson) - thanks for\n  [the work on the kerning values for San Francisco](https://github.com/kylehickinson/Sketch-SF-UI-Font-Fixer)\n  and for being so nice!\n* [Bartol Karuza](https://github.com/bartolkaruza) \u0026\n  [Chris Lewis](https://github.com/cdlewis) - thanks for the work on fixing the\n  line heights inconsistencies in React Native.\n* [Alina Cvetkova](https://twitter.com/nuacco) - thanks for your help with the\n  UX and visual fine–tuning.\n\n### Pictures for the demo app by:\n\n* [Sasha Freemind](https://unsplash.com/@sashafreemind)\n* [Seth Doyle](https://unsplash.com/@sethdoylee)\n* [Angel Jimenez](https://unsplash.com/@particularangelvision)\n* [Efe Kurnaz](https://unsplash.com/@efekurnaz)\n* [Mário Silva](https://unsplash.com/@mariosilva)\n* [Paul Morris](https://unsplash.com/@oldskool2016)\n* [Joel Filipe](https://unsplash.com/@joelfilip)\n* [Wild Vibez](https://unsplash.com/@wldvbz)\n\n## References\n\n* https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/\n* https://material.io/guidelines/style/typography.html\n* https://developer.apple.com/design/resources/\n* https://facebook.github.io/react-native/docs/text.html#style\n* https://medium.com/@knoland/typography-in-react-native-f09c43b5b435\n* https://developer.apple.com/videos/play/wwdc2015/804/\n* https://developer.apple.com/videos/play/wwdc2016/801/\n* https://medium.com/react-native-training/list-of-available-react-native-fonts-ed78b48bd45e\n* https://developer.apple.com/documentation/uikit/uifontdescriptor/font_weights\n* https://v1.designcode.io/iosdesign-guidelines\n* http://devsign.co/notes/tracking-and-character-spacing\n* https://www.raizlabs.com/dev/2015/08/advanced-ios-typography/\n* https://medium.com/@sauvik_dolui/handling-fonts-in-ios-development-a-simpler-way-32d360cdc1b6\n* https://readymag.com/arzamas/132908/6/\n* https://github.com/facebook/react-native/pull/14609\n* https://github.com/react-native-training/react-native-fonts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhectahertz%2Freact-native-typography","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhectahertz%2Freact-native-typography","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhectahertz%2Freact-native-typography/lists"}