{"id":30835819,"url":"https://github.com/ruuuff/responsive-fontsize-js","last_synced_at":"2026-06-19T18:31:41.199Z","repository":{"id":152626860,"uuid":"358702407","full_name":"ruuuff/responsive-fontsize-js","owner":"ruuuff","description":"Adjust the font size depending on the size of the user's viewport.","archived":false,"fork":false,"pushed_at":"2021-04-16T20:24:22.000Z","size":5,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-06T17:52:04.061Z","etag":null,"topics":["font-size","fonts","javascript","responsive"],"latest_commit_sha":null,"homepage":"https://responsive-fontsize-js.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruuuff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-04-16T19:39:44.000Z","updated_at":"2025-04-05T20:12:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"9b65b748-2acd-437f-8821-f79fb4913bfa","html_url":"https://github.com/ruuuff/responsive-fontsize-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ruuuff/responsive-fontsize-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruuuff%2Fresponsive-fontsize-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruuuff%2Fresponsive-fontsize-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruuuff%2Fresponsive-fontsize-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruuuff%2Fresponsive-fontsize-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruuuff","download_url":"https://codeload.github.com/ruuuff/responsive-fontsize-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruuuff%2Fresponsive-fontsize-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34544403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["font-size","fonts","javascript","responsive"],"created_at":"2025-09-06T17:37:19.198Z","updated_at":"2026-06-19T18:31:41.184Z","avatar_url":"https://github.com/ruuuff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚙️ Project\n\nI created this project, using **JavaScript**, to solve a need of mine, to adjust the font size depending on the size of the user's viewport, in a **more responsive** and **intuitive** way than mediaqueries, from CSS.\n\n# ✈️ Technologies\n\n- HTML\n- CSS\n- JavaScript\n\n# 💻 Result\n\n\u003e COMING SOON...\n\n# 🤷‍♂️ How to use?\n\nIn the \u003ca href=\"https://github.com/RuuuFF/responsive-fontsize-js/blob/master/Fonts.js\"\u003eFonts.js\u003c/a\u003e folder have an object called **_Options_** and an array called **_Fonts_**.\n\nStarting with **_Options_**:\n\n```js\nconst Options = {\n  minWidth: 420,\n  maxWidth: 1365,\n  measure: \"rem\",\n};\n```\n\nIn the object **_Options_**, i'm passing the minimum (minWidth) amount and the maximum (maxWidth) of the viewport, so that it scales the font size while between these two values, with them, the measure that I will use (important for the next part).\n\nNow in the array **_Fonts_**:\n\n```js\nconst Fonts = [\n  {\n    selector: \"h1\",\n    minFontsize: 2.2,\n    maxFontsize: 3,\n    minLineheight: 2.8,\n    maxLineheight: 3.6,\n  },\n\n  {\n    selector: \"p\",\n    minFontsize: 1.6,\n    maxFontsize: 2.4,\n    minLineheight: 2.2,\n    maxLineheight: 3,\n  },\n];\n```\n\nIn the array **_Fonts_** i add objects, inside each object I pass the _selector_, the minimum and maximum font size and line height value (_minFontsize_, _maxFontsize_, _minLineheight_, _maxLineheight_) I want.\n\nSo, while the screen is between _420px_ e _1365px_, font-size of element **p** will scale from 1.6rem (16px) to 2.4rem (24px). Being the same with **h1** and yours line height values.\n\n# ⚖ License\n\nThe MIT License\n\nCopyright (c) 2021 Carlos Daniel\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruuuff%2Fresponsive-fontsize-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruuuff%2Fresponsive-fontsize-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruuuff%2Fresponsive-fontsize-js/lists"}