# Datalegreya ### the typeface that melts text and data visualisation ![Specimen](http://figs-lab.com/content/datalegreya/readme-specimen.png) >Datalegreya 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). >Datalegreya 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. >It 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. >Standards compliance makes it equally available on the web or software embedded. >Most 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. ## Summary - [**Demo**](http://figs-lab.com/datalegreya) - [**How to install**](#how-to-install) - [**How to use it**](#how-to-use-it) - [Simplest form](#simplest-form) - [Simple graph](#simple-graph) - [Neutral characters](#neutral-characters) - [Start value](#start-value) - [Min / Max indicators](#min--max-indicators) - [Neutral spaces](#neutral-spaces) - [Non neutral spaces](#non-neutral-spaces) - [X axis legend](#x-axis-legend) - [Y axis legend](#y-axis-legend) - [**Webfont**](#webfont) - [`@font-face`](#font-face) - [`font-feature-settings` + `font-variant-ligatures`](#font-feature-settings--font-variant-ligatures) - [`text-rendering` + `font-smoothing`](#text-rendering--font-smoothing) - [Browser support](#browser-support) - [**License**](#license) - [**Feedback or questions?**](#feedback-or-questions) ------ ## Demo Check out our [**demo**](http://figs-lab.com/datalegreya) on our website! The conversion tool inside the [`/tools`](https://github.com/figs-lab/datalegreya/tree/master/tools) folder of this repository is also available [**here**](http://www.figs-lab.com/content/datalegreya/convert.html) ## How to install 1. [**Download ZIP**](https://github.com/figs-lab/datalegreya/archive/master.zip) 2. Unzip `datalegreya-master.zip` 3. Go to `/font-files` folder and double-click on OTF files in each subfolder to install it on your computer. 4. Open you favorite design software 5. Activate the following OpenType features: - Ligatures - Discretionary Ligatures - Contextual Alternates 6. Enjoy! ## How to use it To 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. Under the hood, Datalegreya makes use of OpenType advanced features: multiple substitutions grant the possibility to replace several glyphs by one unique character. ### Simplest form Datalegreya can be used like a standard font. Its design is nearly the same than Alegreya Sans SC Thin.

bingo

![Datalegreya – Simplest form](http://www.figs-lab.com/datalegreya/readme-12.png) ### Simple graph Use the following encoding to display a graph inside a word: `character` + `|` (pipe character) + `value` > *Remember:* > > - *only use lower case characters* > - *only use integer values between 0 and 3*

b|1i|3n|2g|2o|1

![Datalegreya – Simple graph](http://www.figs-lab.com/datalegreya/readme-13.png) ### Neutral characters To improve legibility of sentences, some characters won’t display the graph: `« » ! ? / ( ),; : *_`

b|1i|3n|2g|2o|1!|3

![Datalegreya – Neutral characters](http://www.figs-lab.com/datalegreya/readme-14.png) ### Start value By 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.

§1b|1i|3n|2g|2o|1

![Datalegreya](http://www.figs-lab.com/datalegreya/readme-15.png) ### Min / Max indicators The graph can be documented with indicators pointing on the minimum and / or maximum values. Simply insert after the selected value one of the following code, enclosed into brackets: `[-]` --> abbreviated minimum indicator `[--]` --> minimum indicator `[+]` --> abbreviated maximum indicator `[++]` --> maximum indicator

b|1i|3[+]n|2g|2o|1

![Datalegreya – Min / Max indicators](http://www.figs-lab.com/datalegreya/readme-16.png) ### Neutral spaces Spaces can be inserted in a graphed sentence. To achieve precise display of the character following the space, a `\` (antislash) character must be inserted right after each space. > *Remember:* > > - *if you put more than 5 consecutive spaces or neutral characters, the following character won’t remember the value of the previous character.*

b|1i|3n|2g|2o|1 \h|2o|2p|3

![Datalegreya – Neutral spaces](http://www.figs-lab.com/datalegreya/readme-17.png) ### Non neutral spaces But spaces can also be part of the graph. Use them just as normal characters: `space` + `|` (pipe) + `value`

b|1i|3n|2g|2o|1 |2h|2o|2p|3

![Datalegreya – Non neutral spaces](http://www.figs-lab.com/datalegreya/readme-18.png) ### X axis legend It is possible to add information about the meaning of the values on the X-axis of the graph. Put 5 characters (no more, no less) inside `{ }` (accolades). Placing this code on the beginning and / or at the end of the string determine the position of the legend. > *Remember:* > > - *5 characters are needed inside the accolades. You can eventually use spaces to complete.* > - *spaces are allowed, as well as lower-case letters, digits, `-` (minus), `/` (slash) and `°` (degree) characters.* > - *accented characters are not supported.*

{24/04}b|1i|3n|2g|2o|1{31/08}

![Datalegreya – X-axis legend](http://www.figs-lab.com/datalegreya/readme-19.png) ### Y axis legend User can also add legend about the Y-axis of the graph. Here is the code to achieve that: Between `[ ]` (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). > *Remember:* > > - *available characters are lower-case letters, digits, `-` (minus), `/` (slash) and `°` (degree) characters.* > - *accented characters are not supported.* > - *each side of the central bracket must contain 5 characters, no more, no less.*

b|1i|3n|2g|2o|1[50   \[0    \]

![Datalegreya – Y-axis legend](http://www.figs-lab.com/datalegreya/readme-20.png) ## Webfont ### @font-face To use it on the web, simply load the OTF file in your CSS using the `@font-face` rule: ```css @font-face { font-family: 'Datalegreya-Thin'; src: url('[path/to/your/fonts/folder]/Datalegreya-Thin.otf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Datalegreya-Gradient'; src: url('[path/to/your/fonts/folder]/Datalegreya-Gradient.otf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Datalegreya-Dot'; src: url('[path/to/your/fonts/folder]/Datalegreya-Dot.otf'); font-weight: normal; font-style: normal; } ``` ### `font-feature-settings` + `font-variant-ligatures` To 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: ```css body { -webkit-font-feature-settings: "kern" on, "liga" on, "calt" on; -moz-font-feature-settings: "kern" on, "liga" on, "calt" on; -webkit-font-feature-settings: "kern" on, "liga" on, "calt" on; -ms-font-feature-settings: "kern" on, "liga" on, "calt" on; font-feature-settings: "kern" on, "liga" on, "calt" on; font-variant-ligatures: common-ligatures discretionary-ligatures contextual; } ``` ### `text-rendering` + `font-smoothing` To optimize font rendering, you can also use `text-rendering` and `font-smoothing` properties as following: ```css body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` ### Browser support Browser | CSS [OTF](http://caniuse.com/#feat=ttf) + [font-feature-settings](http://caniuse.com/#search=feature-settings) support ---------------------------| ------------------ IE 9 | ✗ No IE 10+ | ~ Partial Edge 12+ | ✓ Yes Firefox 34+ | ✓ Yes Chrome 48+ | ✓ Yes Opera 35+ | ✓ Yes Safari 9.1+ | ✓ Yes iOS Safari 4.3+ | ✓ Yes Opera Mini | ✗ No Opera Mobile 37+ | ✓ Yes Android Browser 52+ | ✓ Yes Blackberry Browser 10+ | ✓ Yes Chrome for Android 53+ | ✓ Yes Firefox for Android 49+ | ✓ Yes IE Mobile | ✗ No ## License This font is licensed under the [SIL Open Font License (OFL), Version 1.1](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) ## Feedback or questions? Feel free to contact us at HIGHLIGHTS BY 0