{"id":19903888,"url":"https://github.com/zerotohero-dev/font-size","last_synced_at":"2025-05-03T00:31:28.710Z","repository":{"id":51862550,"uuid":"83997583","full_name":"zerotohero-dev/font-size","owner":"zerotohero-dev","description":"font-size is a command-line utility to calculate the best font-size for you, so that your eyes won’t bleed during long programming sessions.","archived":false,"fork":false,"pushed_at":"2021-05-09T11:18:17.000Z","size":69,"stargazers_count":8,"open_issues_count":8,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-29T18:53:14.502Z","etag":null,"topics":["accessibility","byte-sized","bytesized-javascript","bytesized-tv","distance","education","eyes","font-preference","font-size","inches","javascript","nodejs","pixel","screen-resolution","screencast","studies","training","usability","user-experience","vidcast"],"latest_commit_sha":null,"homepage":"https://bytesized.tv/","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/zerotohero-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-05T19:50:46.000Z","updated_at":"2025-04-05T20:07:01.000Z","dependencies_parsed_at":"2022-08-29T22:22:36.358Z","dependency_job_id":null,"html_url":"https://github.com/zerotohero-dev/font-size","commit_stats":null,"previous_names":["jsbites/font-size"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Ffont-size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Ffont-size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Ffont-size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Ffont-size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerotohero-dev","download_url":"https://codeload.github.com/zerotohero-dev/font-size/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252126529,"owners_count":21698963,"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":["accessibility","byte-sized","bytesized-javascript","bytesized-tv","distance","education","eyes","font-preference","font-size","inches","javascript","nodejs","pixel","screen-resolution","screencast","studies","training","usability","user-experience","vidcast"],"created_at":"2024-11-12T20:25:49.816Z","updated_at":"2025-05-03T00:31:28.342Z","avatar_url":"https://github.com/zerotohero-dev.png","language":"JavaScript","readme":"[![tests][tests]][tests-url]\n[![deps][deps]][deps-url]\n[![npm][npm]][npm-url]\n[![license][license]][license-url]\n\n[tests]: https://img.shields.io/travis/jsbites/font-size.svg\n[tests-url]: https://travis-ci.org/jsbites/font-size\n[deps]: https://david-dm.org/jsbites/font-size.svg\n[deps-url]: https://david-dm.org/jsbites/font-size\n[npm-url]: https://www.npmjs.com/packages/font-size\n[npm]: https://img.shields.io/npm/v/font-size.svg\n[deploy]: https://img.shields.io/github/last-commit/jsbites/font-size.svg?label=last%20deployed\n[deploy-url]: https://github.com/jsbites/font-size/\n[license]: https://img.shields.io/npm/l/font-size.svg\n[license-url]: https://www.npmjs.com/package/font-size\n\n```\n  ___________________\n |\"|\"|\"|\"|\"|\"|\"|\"|\"|\"|\n | f o n t - s i z e |\n '-------------------'\n```\n\n`font-size` is a command-line utility that tells gives you the best font size to use based on your font preference, your viewing distance, and your screen’s resolution.\n\n## About `font-size`\n\n`font-size` is a command-line utility that tells gives you the best font size to use based on your font preference, your viewing distance, and your screen’s resolution.\n\n\u003e Note that having a 10-minute walk every couple of hours will also help you protect your eyes (and sanity); and as a side benefit you won’t have eye strains regardless of how tiny your font preference is.\n\nBut you know yourself, don’t you? — When you are “in the zone” time dilates, and one earthling day feels like ten minutes to you. — But, not (necessarily) to your body.\n\n**`font-size` will convince you to bump up your font-size a notch**, so that you won’t have to consume Advils like jelly beans when you come back from “the zone” to the real world.\n\n## How “Scientific” is This?\n\nWell, so far (it works for me)™ **:)**.\n\nI’ve read a bunch of papers and meta-studies about text readability(*one of them is cited, inside the source code — see [./lib/config.js](lib/config.js)*). — The problem is: None of the studies that I’ve found target digital screens. I’ve tried to adjust values based on a few facts:\n\n* Programmers use monotype type faces, which are designed to be readable in smaller font-sizes than a typical serif font like “Times New Roman”.\n* Modern displays have good enough resolution; so reading a text on a Retina display should be a fairly similar experience to reading the same text at the same distance and size on paper.\n\nTo me, it gave fairly accurate results. Though, [please file an issue](https://github.com/jsbites/font-size/issues/new) if you think the settings can be adjusted to give better results (*see [./lib/config.js](lib/config.js) for the configuration options*).\n\nAlso, [please shoot me an email](mailto:me@volkan.io) if you find an article or study that covers the effect of typeface and font x-height ratio regarding readability and eye fatigue.\n\n## Can You Be More Specific, Please?\n\nThe “*x-height critical size*” of a text that you are reading, in other words, the minimum size that the text is still legible is about **4.5 points at 16’’**, or **about 0.2° of visual arc**, for readers with **20/20 vision**. \n\nFor older readers, this increases to **0.3°** (*~6 pts*); for those with much older and less flexible eyes, it rises to as much as **1.0°** (*~20 pts*).\n\nThe lesson to learn here is that, the exact font size and shape that feels comfortable depends on many factors including, age, eyesight, and personal preference (*there even are people who **love** to code with “Comic Sans MS”, for example*)\n\nI’ve created this app to suit for a normalized used case.\n\nAlso note that:\n\n* Each font will have a different **x-height**.\n* **x-height** is not the only thing that increases the font’s readability. A narrow font with a high x-height can be less readable than a wider font with relatively lower x-height.\n* Certain people (*people with astigmatism, dyslexia…) feel more comfortable with certain kinds of fonts regardless of the font’s x-height ratio.\n* The angle you look at the screen also affects your visual arc. The code simplifies the computation by assuming that you are directly looking at the screen; which is the case most of the time anyway.\n\nAdditionally, the article that I cited talks about **print size**. — **72 points** on paper is **1 inches**; that’s a fact, and it does not change. \n\nOne other thing is: Although almost all operating systems assume that your monitor has a 96 pixels-per-inch resolution, your display may have higher or lower pixels per physical ruler inch. — Which means 96 computer pixels, which is 1 computer inches, may not be 1 physical-world ruler inch. — To make the math simpler, the algorithm in this app calculates font sizes in pixels instead of points. — If you need a point font-size instead; it should be relatively easy to convert.\n\n## Can I configure it for my taste?\n\n`font-size` assumes perfect vision, or perfectly adjusted vision (*i.e. corrective lenses*).\n\nYour adjusted vision might be less-than-perfect due to many factors, age being one of them.\n\nCurrently the only way to configure `font-size` is through **forking it** and changing the visual arc degrees in [./lib/config.js](lib/config.js).\n\nI know that’s not ideal. — Please **create a pull request** if you want to let those values to be configurable externally (*say, by reading an external config file*).\n\n## Installation\n\nInstall using **NPM**:\n\n```bash\nnpm install -g font-size\n```\n\n## Usage Examples\n\nThe `font-size` API is simple; you provide your distance to the screen (*in inches* — sorry rest of the world), the x-height ratio of your preferred font, and your screen resolution (*in PPI*); and `font-size` gives you some recommendations:\n\n```bash\nfont-size --distance 28 --x-height .53 --resolution 110\n\n    For your typeface, the minimum legible font size is 19px\n        (you don’t want to hurt your eyes, do you?).\n\n    Your text is nicely readable starting from… 22px;\n\n    however, anything beyond 27px will damage readability.\n```\n\nIf you are a laptop user, on average, your eyes will be 23’’ from the monitor. Let’s change the distance to see what `font-size` recommends:\n\n```bash\nfont-size --distance 23 --x-height .53 --resolution 110\n\n    For your typeface, the minimum legible font size is 16px\n        (you don’t want to hurt your eyes, do you?).\n\n    Your text is nicely readable starting from… 18px;\n\n    however, anything beyond 22px will damage readability.\n```\n\nFair enough. And you generally hold your tablet around 14’’ from your eyes. Let’s recalculate with adjusted distance, using an Apple iPad Mini at 163 dpi:\n\n```bash\nfont-size --distance 14 --x-height .53 --resolution 163\n\n    For your typeface, the minimum legible font size is 14px\n        (you don’t want to hurt your eyes, do you?).\n\n    Your text is nicely readable starting from… 17px;\n\n    however, anything beyond 20px will damage readability.\n```\n\n## I Need Help\n\nYou may use `--help` flag to get help:\n\n```bash\nfont-size --help\n```\n\n## Dependencies\n\nYou will need the **current** version of [Node.JS](https://nodejs.org/) with all the bells and whistles — [You can install it from nodejs.org](https://nodejs.org/).\n\n`font-size` is self-sufficient; all of its dependencies will be fetched during install time. — You can look at `package.json` to glance over the dependencies.\n\n## Package Scripts\n\nHere are the helper npm scripts that you can run via `npm`:\n\n* `npm test`: Executes the unit tests.\n* `npm run lint`: Checks whether the source JavaScript is well-formed.\n\n## Important Files and Folders\n\n* `./index.js`: The main entry point.\n* `bin`: Scripts that are mostly used by `npm`.\n* `CHANGELOG.md`: A log of what has been done since the last version.\n* `CODE_OF_CONDUCT.md`: Tells the collaborators to be nice to each other.\n* `README.md`: This very file.\n* `.eslintrc`: Used for development; configures `eslint`.\n* `.travis.yml`: Used for CI; configures Travis.\n\n## Wanna Help?\n\nAny help is more than appreciated.\n\nIf you want to contribute to the source code, **fork this repository** and **create a pull request**.\n\n\u003e In lieu of a formal style guide, take care to maintain the existing coding style.\n\nAlso, don’t forget to add unit tests for any new or changed functionality.\n\nIf you want to report a bug; or share a comment or suggestion, [file an issue](https://github.com/jsbites/font-size/issues/new).\n\n## I’ve Found a Bug; I Have an Idea\n\n[For bug reports and suggestions, please file an issue](https://github.com/jsbites/font-size/issues/new).\n\n## Contact Information\n\n* **Project Maintainer**: [Volkan Özçelik](https://volkan.io/)\n* **Project Website**: [bytesized.tv](https://bytesized.tv/)\n\n## License\n\nMIT-licensed. — [See the license file for details](LICENSE.md).\n\n## Code of Conduct\n\nWe are committed to making participation in this project a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.\n\n[See the code of conduct for details](CODE_OF_CONDUCT.md).\n\n## A [ByteSized.TV][vidcast] Project\n\nThis repository is a part of the [Byte-Sized JavaScript VideoCasts][vidcast].\n\nIt is a compilation of short (*around ten minutes*) screencasts about **JavaScript** and related technologies.\n\n[**Learn**, **explore**, and **have fun**][vidcast]!\n\n[vidcast]: https://bytesized.tv/ \"ByteSized.TV\"\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerotohero-dev%2Ffont-size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerotohero-dev%2Ffont-size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerotohero-dev%2Ffont-size/lists"}