{"id":13516481,"url":"https://github.com/yumyo/js-type-master","last_synced_at":"2025-04-09T16:22:24.895Z","repository":{"id":7687246,"uuid":"9050761","full_name":"yumyo/js-type-master","owner":"yumyo","description":"A curated collection of javascript resources about web typography ","archived":false,"fork":false,"pushed_at":"2015-01-28T11:30:59.000Z","size":310,"stargazers_count":101,"open_issues_count":0,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-15T09:44:53.565Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"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/yumyo.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}},"created_at":"2013-03-27T09:46:35.000Z","updated_at":"2023-03-19T21:07:15.000Z","dependencies_parsed_at":"2022-09-01T16:50:19.692Z","dependency_job_id":null,"html_url":"https://github.com/yumyo/js-type-master","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumyo%2Fjs-type-master","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumyo%2Fjs-type-master/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumyo%2Fjs-type-master/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yumyo%2Fjs-type-master/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yumyo","download_url":"https://codeload.github.com/yumyo/js-type-master/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065454,"owners_count":21041902,"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":[],"created_at":"2024-08-01T05:01:22.634Z","updated_at":"2025-04-09T16:22:24.863Z","avatar_url":"https://github.com/yumyo.png","language":null,"readme":"![JS type master](type-master.png)\n\nA curated collection of javascript resources about web typography\n\n* [General](#general)\n* [Hypenation](#hypenation)\n* [Widows](#widows)\n* [Ellipsis](#ellipsis)\n* [Wrap around](#wrap-around)\n* [Kerning](#kerning)\n* [Vertical rhythm](#vertical-rhythm)\n* [Fitting Text](#fitting-text)\n* [Responsive](#responsive)\n* [Individual sentence/word/letter Control](#individual-sentencewordletter-control)\n* [Side \u0026 footnotes](#side--footnotes)\n* [User text selection](#user-text-selection)\n* [Transform Text](#transform-text)\n* [Other Special Effects](#other-special-effects)\n\n\n##General\n\n####Typography.js\nThis is a small project that simply brings together several useful JavaScript functions.\n[https://github.com/elliottcable/typography.js](https://github.com/elliottcable/typography.js)\n\n####Font.js\nThis library adds a Font object to the collection of predefined objects available to you when doing JS coding for the web.   \n[http://pomax.nihongoresources.com/pages/Font.js/](http://pomax.nihongoresources.com/pages/Font.js/)\n\n####Typesetter.js\nan open source project with the goal of bringing better typography to every type of digital screen    \n[https://github.com/nofont/Typesetter.js](https://github.com/nofont/Typesetter.js)\n\n####typogr.js\nprovides a set of functions which automatically apply various transformations to plain text in order to yield typographically-improved HTML.    \n[https://github.com/ekalinin/typogr.js](https://github.com/ekalinin/typogr.js)\n\n####Calzone\nBetter typesetting for EPUB (and HTML).\t\t\n[https://github.com/simoncozens/calzone](https://github.com/simoncozens/calzone)\n\n##Hypenation:\n\n####TeX line breaking algorithm in JavaScript.\t\t\n[https://github.com/bramstein/typeset](https://github.com/bramstein/typeset)\n\n####Hypher\nA small and fast JavaScript hyphenation engine. Can be used in Node.js and as a jQuery plugin.\n[https://github.com/bramstein/Hypher](https://github.com/bramstein/Hypher)\n\n####BalanceText\nA jQuery plugin to provide an alternate text wrapping algorithm.   \n[https://github.com/adobe-webplatform/balance-text](https://github.com/adobe-webplatform/balance-text)\n\n##Widows:\n\n####The Widow Tamer\n…is a Javascript to automatically fix typographic widows on your web pages.\n[https://github.com/nathanford/widowtamer](https://github.com/nathanford/widowtamer)\n\n####typorphanage\nA simple jQuery script for managing typographic orphans \u0026 widows as programmatically as possible.\n[https://github.com/Nilloc/typorphanage](https://github.com/Nilloc/typorphanage)\n\n##Ellipsis:\n\n####trunk8\njQuery Truncation Plugin based on n.° of lines.   \n[https://github.com/rviscomi/trunk8](https://github.com/rviscomi/trunk8)\n\nZepto version   \n[https://github.com/etouches/trunk8-zepto](https://github.com/etouches/trunk8-zepto)\n\n####Ellipsis\nEllipsis is a customizable jQuery plugin for the smart truncation of text base on container width and not character count.   \n[https://github.com/kanikarphan/ellipsis](https://github.com/kanikarphan/ellipsis)\n\n####Clamp.js\nClamps an HTML element by adding ellipsis to it if the content inside is too long.\n[https://github.com/josephschmitt/Clamp.js](https://github.com/josephschmitt/Clamp.js)\n\n####jQuery.dotdotdot\nan advanced cross-browser ellipsis for multiple line content plugin.   \n[http://dotdotdot.frebsite.nl/](http://dotdotdot.frebsite.nl/)\n\n####TextTailor.js   \nTailor-made text to fit your needs! Responsive text to fill the height of the parent element or ellipse it when it doesn't fit.      \n[http://jpntex.com/texttailor/](http://jpntex.com/texttailor/)\n\n##Wrap around:\n\n####jQSlickWrap\nthe pixel-perfect prose plugin.   \n[https://github.com/jasonwyatt/jQSlickWrap](https://github.com/jasonwyatt/jQSlickWrap)\n\n####Bacon!\na jQuery plugin that allows you to wrap text around a bezier curve or a line.   \n[https://github.com/hudsonfoo/jQuery-Bacon](https://github.com/hudsonfoo/jQuery-Bacon)\n\n##Kerning\n\n####kern.js\nA super-simple bookmarklet for designers that finally puts you back in control of your website's typography.   \n[http://www.kernjs.com/](http://www.kernjs.com/)\n\n####jKerny\nkerning get easy.   \n[https://github.com/clearideaz/jKerny](https://github.com/clearideaz/jKerny)\n\n####TypeButter\nallows you to set optical kerning for any font on your website.   \n[http://typebutter.com/](http://typebutter.com/)\n\n####Kerning.js\ntake control of your web typography   \n[https://github.com/endtwist/kerning.js](https://github.com/endtwist/kerning.js)\n\n##Vertical rhythm\n\n####mini-rhythm.js\nPure JavaScript way of keeping elements adhering to a vertical rhythm.\nAround 561 bytes. Not dependant on jQuery. cross browser compatibility (**IE7** onwards).\nIntended to accompany CSS vertical rhythm – not replace it!    \n[https://github.com/RShergold/mini-rhythm.js](https://github.com/RShergold/mini-rhythm.js)    \n\n####Auto line-height\na jQuery plugin for flexible layouts.   \n[http://www.ollicle.com/2007/jun/03/jquery_lineheight_flexible.html](http://www.ollicle.com/2007/jun/03/jquery_lineheight_flexible.html)\n\n####Line In Typography   \n[https://github.com/SimonFairbairn/Line-In-Typography](https://github.com/SimonFairbairn/Line-In-Typography)\n\n####jMetronome   \nUsing jQuery to keep typographic rhythm.      \n[http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm](http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm)\n\n####Baseline.js\nBaseline.js is a simple jQuery plugin for restoring baselines thrown off by odd image sizes.   \n[https://github.com/daneden/Baseline.js](https://github.com/daneden/Baseline.js)\n\n##Fitting Text\n\n####FitText.js\na jQuery plugin for inflating web type.   \n[https://github.com/davatron5000/FitText.js](https://github.com/davatron5000/FitText.js)\n\n####jSlabify\na jQuery plugin for creating slabbed typography.   \n[https://github.com/gschoppe/jSlabify](https://github.com/gschoppe/jSlabify)\n\n####BigText\njQuery plugin   \n[https://github.com/zachleat/BigText](https://github.com/zachleat/BigText)\n\n####Hatchshow\nis a jQuery typesetting plugin. it balances measures.   \n[http://charliepark.org/hatchshow/](http://charliepark.org/hatchshow/)\n\n####Slabtext\na jquery plugin for producing big, bold \u0026 responsive headlines.   \n[https://github.com/freqDec/slabText/](https://github.com/freqDec/slabText/)\n\n####TextTailor.js   \nTailor-made text to fit your needs! Responsive text to fill the height of the parent element or ellipse it when it doesn't fit.      \n[http://jpntex.com/texttailor/](http://jpntex.com/texttailor/)\n\n####jQuery responsiveText\nA jQuery plugin to set font sizes responsively based on its' container width. Use jQuery responsiveText to have scalable headlines, build responsive tables and more!    \n[https://github.com/ghepting/jquery-responsive-text](https://github.com/ghepting/jquery-responsive-text)\n\n####textFit v2.1.0\nA fast, jQuery-free text sizing component that quickly fits single and multi-line text to the width (and optionally height) of its container.   \n[https://github.com/STRML/textFit](https://github.com/STRML/textFit)\n\n####Squishy.js\nSquishy is a jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part.   \n[http://cmsauve.com/projects/squishy/](http://cmsauve.com/projects/squishy/)\n\n####jQuery TextFill\nThis jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible.    \n[https://github.com/jquery-textfill/jquery-textfill](https://github.com/jquery-textfill/jquery-textfill)\n\n####WideText \nA lightweight jQuery plugin that allows your to create full width text elements that will resize according to the browser window.      \n[https://bitbucket.org/cbavota/widetext/](https://bitbucket.org/cbavota/widetext/)\n\n####textStretch.js\nA javascript function and a jQuery extension for maximizing font sizes to fill out the element's width.   \ntextStretch.js is minimal, fast and robust. It doesn't require or add any wrappers or child-elements, and it adapts to when you resize the window or flip your device. t**extStretch is build with older browsers in mind. It's tested and works with Chrome, Safari, Firefox and Internet Explorer (I haven't tested any version older than 6 though).**    \n[https://github.com/friday/textStretch.js](https://github.com/friday/textStretch.js)\n\n####Font-to-Width\nFont-To-Width if a small Javascript routine which fits text to the width of an element using multiple font families of different widths.   \n[https://github.com/chrissam42/font-to-width](https://github.com/chrissam42/font-to-width)\n\n####Fitter Happier Text\nPerformant, fully fluid headings    \n[http://jxnblk.github.io/fitter-happier-text/](http://jxnblk.github.io/fitter-happier-text/)\n\n##Responsive\n\n####Responsive-Measure\nA jQuery plugin for generating a responsive ideal measure.\n[https://github.com/jbrewer/Responsive-Measure](https://github.com/jbrewer/Responsive-Measure)\n\n####jQuery.responsiveText\nA simple jQuery plugin to make a specific selector's or the whole page's text responsive.\n[https://github.com/klr/jQuery.responsiveText](https://github.com/klr/jQuery.responsiveText)\n\n####FlowType.JS\nResponsive web typography at its finest: font-size and line-height based on element width.    \n[http://simplefocus.com/flowtype/](http://simplefocus.com/flowtype/)\n\n####jQuery.fontFlex\nLightweight jQuery extension for dynamically changing font sizes according to screen / browser width. Intended to be used with responsive or adaptive CSS layouts.    \n[https://github.com/NathanRutzky/jQuery.fontFlex](https://github.com/NathanRutzky/jQuery.fontFlex)\n\n##Individual sentence/word/letter Control\n\n####Lettering.js\na jQuery plugin for radical Web Typography.    \n[https://github.com/davatron5000/Lettering.js](https://github.com/davatron5000/Lettering.js)\n\n####Blast.js\nBlast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively,Blast can match custom regular expressions and phrases.    \n[http://julian.com/research/blast/](http://julian.com/research/blast/)\n\n##Side \u0026 footnotes\n\n####SideComments.js\nA sweet-ass interface component to give your site Medium.com style comments.    \n[http://aroc.github.io/side-comments-demo/](http://aroc.github.io/side-comments-demo/)\n\n####Footnoted\nMake superscript footnote markers with scrolling anchor links to a footnote section.    \n[https://github.com/jheftmann/footnoted](https://github.com/jheftmann/footnoted)\n\n####Bigfoot\nA jQuery plugin for empowering footnotes.    \n[http://www.bigfootjs.com/](http://www.bigfootjs.com/)\n\n####jQuery.sidenotes\nTransform Markdown footnotes into superpowered1 sidenotes.    \n[http://acdlite.github.io/jquery.sidenotes/](http://acdlite.github.io/jquery.sidenotes/)\n\n####jquery inline footnotes\njQuery plugin to create inline plugins from Markdown-created HTML footnotes.    \n[https://github.com/oncomouse/jquery-inline-footnotes](https://github.com/oncomouse/jquery-inline-footnotes)\n\n####Responsive Sidenotes [Tutorial]\nFootnotes and sidenotes are both useful ways to annotate online blog posts and articles. With the help of responsive design, it's now possible to use both approaches at the same time.    \n[http://johndjameson.com/blog/responsive-sidenotes/](http://johndjameson.com/blog/responsive-sidenotes/)\n\n####Foot2Side\na tiny jQuery script that transforms footnotes into sidenotes and align them vertically with their references.\n[https://github.com/metaphox/footnote-to-sidenote](https://github.com/metaphox/footnote-to-sidenote)\n\n##User text selection\n\n####Selection sharer\nMedium like popover menu to share on Twitter or by email any text selected on the page.    \n[https://github.com/xdamman/selection-sharer](https://github.com/xdamman/selection-sharer)\n\n####SelectText.js\nSelectText.JS: Highlight, Share, and Copy the text your users want.    \n[https://github.com/ptariche/selectText.js](https://github.com/ptariche/selectText.js)\n\n####Annotatorjs\nAnnotator is an open-source JavaScript library to easily add annotation functionality to any webpage. Annotations can have comments, tags, links, users, and more. Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour.    \n[http://annotatorjs.org/](http://annotatorjs.org/)\n\n####selectionmenu\nJavaScript context menu for selected text; Insert a source reference in copied text.    \n[https://github.com/molily/selectionmenu](https://github.com/molily/selectionmenu)\n\n##Transform Text\n\n####Simple Text Rotator\nAdd a super simple rotating text to your website with little to no markup.    \n[https://github.com/peachananr/simple-text-rotator](https://github.com/peachananr/simple-text-rotator)\n\n####Morphext\nA simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css.    \n[https://github.com/MrSaints/Morphext](https://github.com/MrSaints/Morphext)\n\n####Textualizer\na jQuery plug-in that allows you to transition through blurbs of text.\n[https://github.com/krisk/textualizer](https://github.com/krisk/textualizer)\n\n####JQuery ShuffleText Plugin\nJQuery Shuffle Text is a lightweight JQuery plugin able to shuffle any of your text content. Easy to use, it offers a set of options to customize it...    \n[https://github.com/Anthodpnt/JQuery-ShuffleText-Plugin](https://github.com/Anthodpnt/JQuery-ShuffleText-Plugin)\n\n####Shuffle Letters Effect\na jQuery Plugin.    \n[http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/](http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/)\n\n####funnyText.js\nCreate funny and crazy moving texts in a simple way.   \n[https://github.com/alvarotrigo/funnyText.js](https://github.com/alvarotrigo/funnyText.js)\n\n####Airport\njqQery plugin which emulates the style of those flickering information boards.   \n[http://www.unwrongest.com/projects/airport/](http://www.unwrongest.com/projects/airport/)\n\n##Other Special Effects\n\n####Textillate\nA simple plugin for CSS3 text animations.   \n[http://jschr.github.io/textillate/](http://jschr.github.io/textillate/)\n\n####Web Typography for the Lonely\n[http://webtypographyforthelonely.com/](http://webtypographyforthelonely.com/)\n\n####Arctext.js\ncurving text with css3 \u0026 jquery.\n[http://tympanus.net/Development/Arctext/](http://tympanus.net/Development/Arctext/)\n\n####TextGrad jQuery plugin\nA plugin to make color gradients in texts.\n[https://github.com/subtenante/TextGrad](https://github.com/subtenante/TextGrad)\n\n\n####jQisotext\njquery text effect plugin.   \n[https://code.google.com/p/jqisotext/downloads/list](https://code.google.com/p/jqisotext/downloads/list)\n\n####grab bag\nassorted text effects jQuery plugins   \n[http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html](http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html)\n\n####Creative web typography styles\n[http://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/](http://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/)\n","funding_links":[],"categories":["Technical"],"sub_categories":["ramanihiteshc@gmail.com"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyumyo%2Fjs-type-master","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyumyo%2Fjs-type-master","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyumyo%2Fjs-type-master/lists"}