Creating charts and charts without JS, just with a web do

Today the BlogDuWebdesign presents you the font AtF Spark, a font of writing allowing to insert in an extremely simple way graphs in your texts and webdesigns.

To create graphs, you have many choices at your disposal.

You could for example completely create your graphs in SVG, where to use a Javascript tool that will do it for you. This solution is perfect if you need large dynamic graphs, but its implementation will not be very simple, and the information transmitted by your graphs will be lost during a copied-pasted.

You could also use an image manipulation technique such as Imagemagick to generate your server dimension graphs in the form of an image. Here, it would indeed be possible to copy and paste the result (which after generation is only an image finally), but the implementation of a solution of this kind would be complex.

I propose to you today a third solution: a simple font of writing!


AtF Spark, a font to create graphs

As the title of this paragraph indicates so well, AtF Spark is a writing font that allows to create extremely simple types of graph types.


To create this kind of graphs, download and install the font (s) that interest you in the CSS of your page, then define a class with the font of your choice. Resource developers advise you to enable the “calt” property for older browsers, which allows ligatures to work.

.class {
font-variant-ligatures: contextual;
-moz-font-feature-settings: “calt”;
-webkit-make-feature-settings: “calt”;
font-feature-settings: “calt”;
Once all this is done, you just have to create a graph with the following syntax! 123} 456 {30,60,90.


As you can see, the graphs are quite dynamic and change at the same time as the data changes. Moreover, being a simple font, it is quite possible to copy and paste one of the graphs, which allows us to get the numbers necessary for its construction. Not necessarily as readable, but the information is totally retained.