{"id":13515789,"url":"https://github.com/figs-lab/datalegreya","last_synced_at":"2025-03-31T05:31:03.600Z","repository":{"id":46918917,"uuid":"70789265","full_name":"figs-lab/datalegreya","owner":"figs-lab","description":"Datalegreya, the typeface that melts text and data visualisation","archived":false,"fork":false,"pushed_at":"2023-11-06T16:50:04.000Z","size":2769,"stargazers_count":593,"open_issues_count":5,"forks_count":25,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-05-22T21:32:09.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/figs-lab.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}},"created_at":"2016-10-13T09:11:35.000Z","updated_at":"2024-08-01T06:07:32.973Z","dependencies_parsed_at":"2024-08-01T06:22:24.635Z","dependency_job_id":null,"html_url":"https://github.com/figs-lab/datalegreya","commit_stats":{"total_commits":66,"total_committers":7,"mean_commits":9.428571428571429,"dds":0.5606060606060606,"last_synced_commit":"d98a9ebe1f2f7d7910990db55ede862c452da63c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figs-lab%2Fdatalegreya","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figs-lab%2Fdatalegreya/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figs-lab%2Fdatalegreya/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figs-lab%2Fdatalegreya/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/figs-lab","download_url":"https://codeload.github.com/figs-lab/datalegreya/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246423527,"owners_count":20774795,"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:16.008Z","updated_at":"2025-03-31T05:30:58.585Z","avatar_url":"https://github.com/figs-lab.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Fonts","others","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Others"],"readme":"# Datalegreya\n### the typeface that melts text and data visualisation\n\n![Specimen](http://www.datalegreya.com/assets/img/readme-specimen.png)\n\n\u003eDatalegreya is a typeface which can interweave data curves with text. It is designed by [Figs](http://figs-lab.com), on the basis of open source font [Alegreya Sans SC Thin](https://fonts.google.com/specimen/Alegreya+Sans+SC) by type designer [Juan Pablo del Peral](https://twitter.com/juandelperal). \n\n\u003eDatalegreya can be used in all contexts where small space is available to synthetically display graphical data: connected objects, embedded displays, annual reports, weather report, stock prices, etc.\n\n\u003eIt doesn’t need any specialized software: users just have to install it in the operating system and launch any software able to display OpenType fonts, such as Microsoft Word, Apple TextEdit, Adobe Suite, etc. \n\n\u003eStandards compliance makes it equally available on the web or software embedded.\n\n\u003eMost connected objects feature a small sized screen, and all of them are about data. By its hybrid design aimed to displaying text and data in compact spaces, Datalegreya brings a realistic and elegant solution to this ever growing market’s specific issues.\n\n\n## Summary\n- [**Demo**](http://www.datalegreya.com)\n- [**How to install**](#how-to-install)\n- [**How to use it**](#how-to-use-it)\n\t- [Simplest form](#simplest-form)\n\t- [Simple graph](#simple-graph)\n\t- [Neutral characters](#neutral-characters)\n\t- [Start value](#start-value)\n\t- [Min / Max indicators](#min--max-indicators)\n\t- [Neutral spaces](#neutral-spaces)\n\t- [Non neutral spaces](#non-neutral-spaces)\n\t- [X axis legend](#x-axis-legend)\n\t- [Y axis legend](#y-axis-legend)\n- [**Webfont**](#webfont)\n\t- [`@font-face`](#font-face)\n\t- [`font-feature-settings` + `font-variant-ligatures`](#font-feature-settings--font-variant-ligatures)\n\t- [`text-rendering` + `font-smoothing`](#text-rendering--font-smoothing)\n\t- [Browser support](#browser-support)\n- [**License**](#license)\n- [**Feedback or questions?**](#feedback-or-questions)\n\n------\n\n## Demo\nCheck out our [**demo**](http://www.datalegreya.com) on our website!\n\nThe conversion tool inside the \"tools\" folder of this repository is also available at [**this url**](http://www.datalegreya.com/convert.html?lang=en)\n\n## How to install\n\n1. [**Download ZIP**](https://github.com/figs-lab/datalegreya/archive/master.zip)\n2. Unzip `datalegreya-master.zip`\n3. Go to `/font-files` folder and double-click on OTF files in each subfolder to install it on your computer.\n4. Open you favorite design software\n5. Activate the following OpenType features:\n\t- Ligatures\n\t- Discretionary Ligatures\n\t- Contextual Alternates\n6. Enjoy!\n\n\n## How to use it\n\nTo use it, one just have to insert after each letter a special character followed by a number. The font automatically replaces this simple code by the characters that will display the curve corresponding to the selected values.\nUnder the hood, Datalegreya makes use of OpenType advanced features: multiple substitutions grant the possibility to replace several glyphs by one unique character.\n\n\n### Simplest form\n\nDatalegreya can be used like a standard font. \nIts design is nearly the same than Alegreya Sans SC Thin.\n\n\u003cpre\u003e\u003ccode\u003ebingo\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – Simplest form](http://www.datalegreya.com/assets/img/readme-12.png)\n\n\n### Simple graph\n\nUse the following encoding to display a graph inside a word: \n\n`character`  +  `|` (pipe character)  +  `value`\n\n\n\u003e *Remember:*\n\u003e \n\u003e - *only use lower case characters*\n\u003e - *only use integer values between 0 and 3*\n\n\u003cpre\u003e\u003ccode\u003eb|1i|3n|2g|2o|1\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – Simple graph](http://www.datalegreya.com/assets/img/readme-13.png)\n\n\n### Neutral characters\n\nTo improve legibility of sentences, some characters won’t display the graph: \n\n`« » ! ? / ( ),; : *_`\n\n\u003cpre\u003e\u003ccode\u003eb|1i|3n|2g|2o|1!|3\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – Neutral characters](http://www.datalegreya.com/assets/img/readme-14.png)\n\n\n### Start value\n\nBy default, the start value of the graph is 0, but user can start with another value by inserting the `§` (section) character, followed by a integer between 0 and 3.\n\n\u003cpre\u003e\u003ccode\u003e§1b|1i|3n|2g|2o|1\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya](http://www.datalegreya.com/assets/img/readme-15.png)\n\n\n### Min / Max indicators\n\nThe graph can be documented with indicators pointing on the minimum and / or maximum values.\n\nSimply insert after the selected value one of the following code, enclosed into brackets:\n\n`[-]` --\u003e abbreviated mininum indicator\n\n`[--]` --\u003e mininum indicator\n\n`[+]` --\u003e abbreviated maxinum indicator\n\n`[++]` --\u003e maxinum indicator\n\n\u003cpre\u003e\u003ccode\u003eb|1i|3[+]n|2g|2o|1\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – Min / Max indicators](http://www.datalegreya.com/assets/img/readme-16.png)\n\n\n### Neutral spaces\n\nSpaces can be inserted in a graphed sentence.\n\nTo achieve precise display of the character following the space, a `\\` (antislash) character must be inserted right after each space.\n\n\u003e *Remember:*\n\u003e \n\u003e - *if you put more than 5 consecutive spaces or neutral characters, the following character won’t remember the value of the previous character.*\n\n\u003cpre\u003e\u003ccode\u003eb|1i|3n|2g|2o|1 \\h|2o|2p|3\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – Neutral spaces](http://www.datalegreya.com/assets/img/readme-17.png)\n\n\n### Non neutral spaces\n\nBut spaces can also be part of the graph. \n\nUse them just as normal characters:\n\n`space` + `|` (pipe) + `value`\n\n\u003cpre\u003e\u003ccode\u003eb|1i|3n|2g|2o|1 |2h|2o|2p|3\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – Non neutral spaces](http://www.datalegreya.com/assets/img/readme-18.png)\n\n\n### X axis legend\n\nIt is possible to add information about the meaning of the values on the X-axis of the graph.\n\nPut 5 characters (no more, no less) inside `{ }` (accolades). \n\nPlacing this code on the beginning and / or at the end of the string determine the position of the legend.\n\n\u003e *Remember:*\n\u003e \n\u003e - *5 characters are needed inside the accolades. You can eventually use spaces to complete.*\n\u003e - *spaces are allowed, as well as lower-case letters, digits, `-` (minus), `/` (slash) and `°` (degree) characters.*\n\u003e - *accented characters are not supported.*\n\n\u003cpre\u003e\u003ccode\u003e{24/04}b|1i|3n|2g|2o|1{31/08}\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – X-axis legend](http://www.datalegreya.com/assets/img/readme-19.png)\n\n\n### Y axis legend\n\nUser can also add legend about the Y-axis of the graph. Here is the code to achieve that:\n\nBetween `[ ]` (brackets), put 5 characters (the top value legend) followed by a separator `[` (left bracket) or `]` (right bracket), then again 5 characters (the bottom value legend). \n\n\u003e *Remember:*\n\u003e \n\u003e - *available characters are lower-case letters, digits, `-` (minus), `/` (slash) and `°` (degree) characters.*\n\u003e - *accented characters are not supported.*\n\u003e - *each side of the central bracket must contain 5 characters, no more, no less.*\n\n\u003cpre\u003e\u003ccode\u003eb|1i|3n|2g|2o|1[50   \\[0    \\]\u003c/code\u003e\u003c/pre\u003e\n\n![Datalegreya – Y-axis legend](http://www.datalegreya.com/assets/img/readme-20.png)\n\n\n## Webfont\n\n### @font-face\nTo use it on the web, simply load the OTF file in your CSS using the `@font-face` rule:\n\n```css\n@font-face {\n\tfont-family: 'Datalegreya-Thin';\n\tsrc: url('[path/to/your/fonts/folder]/Datalegreya-Thin.otf');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n@font-face {\n\tfont-family: 'Datalegreya-Gradient';\n\tsrc: url('[path/to/your/fonts/folder]/Datalegreya-Gradient.otf');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n@font-face {\n\tfont-family: 'Datalegreya-Dot';\n\tsrc: url('[path/to/your/fonts/folder]/Datalegreya-Dot.otf');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n```\n\n### `font-feature-settings` + `font-variant-ligatures`\nTo display the font properly, you must enable `kern` (kerning), `liga` (ligatures) and `calt` (contextual alternates) features by adding the following code to your CSS file:\n\n```css\nbody {\n\t-webkit-font-feature-settings: \"kern\" on, \"liga\" on, \"calt\" on;\n\t-moz-font-feature-settings: \"kern\" on, \"liga\" on, \"calt\" on;\n\t-webkit-font-feature-settings: \"kern\" on, \"liga\" on, \"calt\" on;\n\t-ms-font-feature-settings: \"kern\" on, \"liga\" on, \"calt\" on;\n\tfont-feature-settings: \"kern\" on, \"liga\" on, \"calt\" on;\n\tfont-variant-ligatures: common-ligatures discretionary-ligatures contextual;\n}\n```\n\n### `text-rendering` + `font-smoothing`\nTo optimize font rendering, you can also use `text-rendering` and `font-smoothing` properties as following:\n\n```css\nbody {\n\ttext-rendering: optimizeLegibility;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n```\n\n### Browser support\nBrowser | CSS [OTF](http://caniuse.com/#feat=ttf) + [font-feature-settings](http://caniuse.com/#search=feature-settings) support\n---------------------------| ------------------\nIE 9                       | ✗ No\nIE 10+                     | ~ Partial\nEdge 12+                   | ✓ Yes\nFirefox 34+                | ✓ Yes\nChrome 48+                 | ✓ Yes\nOpera 35+                  | ✓ Yes\nSafari 9.1+                | ✓ Yes\niOS Safari 4.3+            | ✓ Yes\nOpera Mini                 | ✗ No\nOpera Mobile 37+           | ✓ Yes\nAndroid Browser 52+        | ✓ Yes\nBlackberry Browser 10+     | ✓ Yes\nChrome for Android 53+     | ✓ Yes\nFirefox for Android 49+    | ✓ Yes\nIE Mobile                  | ✗ No\n\n\n\n## License\nThis font is licensed under the [SIL Open Font License (OFL), Version 1.1](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi\u0026id=OFL)\n\n\n## Feedback or questions?\nFeel free to contact us at \u003ccontact@figs-lab.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigs-lab%2Fdatalegreya","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffigs-lab%2Fdatalegreya","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigs-lab%2Fdatalegreya/lists"}