npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

datalegreya

v0.3.0

Published

Datalegreya, the typeface that melts text and data visualisation

Downloads

9

Readme

Datalegreya

the typeface that melts text and data visualisation

Specimen

Datalegreya is a typeface which can interweave data curves with text. It is designed by Figs, on the basis of open source font Alegreya Sans SC Thin by type designer Juan Pablo del Peral.

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

Check out our demo on our website!

The conversion tool inside the /tools folder of this repository is also available here

How to install

  1. Download 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.

Datalegreya – Simplest form

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

Datalegreya – Simple graph

Neutral characters

To improve legibility of sentences, some characters won’t display the graph:

« » ! ? / ( ),; : *_

Datalegreya – Neutral characters

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.

Datalegreya

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

Datalegreya – Min / Max indicators

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.

Datalegreya – Neutral spaces

Non neutral spaces

But spaces can also be part of the graph.

Use them just as normal characters:

space + | (pipe) + value

Datalegreya – Non neutral spaces

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.

Datalegreya – X-axis legend

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.

Datalegreya – Y-axis legend

Webfont

@font-face

To use it on the web, simply load the OTF file in your CSS using the @font-face rule:

@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:

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:

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Browser support

Browser | CSS OTF + font-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

Feedback or questions?

Feel free to contact us at [email protected] HIGHLIGHTS BY 0