An Open Source Traffic Sign Font. Read more on traffico.io
Getting the dependencies
To build traffico you need homebrew and ruby installed. These are dependencies of fontcustom gem.
brew install fontforge --with-python brew install eot-utils node gem install fontcustom
Linux (Ubuntu 14.04 LTS or 15.04)
sudo apt-get install fontforge nodejs nodejs-legacy npm ruby-dev woff-tools zlib1g-dev sudo gem install fontcustom
The build process is a simple gulp task.
First get the gulp dependencies:
To finally build the font run:
npm run build to build traffico, or
npm run check for building plus additional checks.
build-folder contains the following:
build/fonts/contains the packaged font in different formats (woff, svg, eot, ttf)
build/fonts/traffico-preview.htmla collection of all available symbols for building custom signs
build/signscontains json-files with pre-built sign-definitions
build/sign-overview.htmlan overview of all the pre-built signs from the
build/stylesheets/traffico.cssthis file lets you simply use CSS-classes for constructing signs (see section "Usage")
To remove all the generated files run
npm run clean.
To use the font in HTML, simply include
traffico.css (ensure, that the fonts reside in the directory
../fonts relative to the CSS).
A sign consists of a
<span>-tag with class
t, that contains one or more
<i>-tags which represent the various elements of the sign.
<i>-tags have two classes: One is
ID is the ID of the symbol (see
build/fonts/traffico-preview.html for available symbols).
The other one is
COLOR is the color of the symbol (one of
<span class="t"> <i class="t-square-bg t-c-blue"></i> <i class="t-tri-angular t-c-white" style="transform:scale(.8)"></i> <i class="t-pedestrian-crossing t-c-black"></i> </span> <span class="t"> <i class="t-circle-bg t-c-white"></i> <i class="t-circle-o t-c-red"></i> <i class="t-content t-c-black">130</i> </span>
Status & Contributing
Traffico is under heavy development and the amount of shapes it contains will grow in the future. Contributions are welcome.
- finding a good naming convention for signs across countries
- finding a good taxonomy for traffic sign categories to make if more future proof
- publish binary .sketch file with predefined export settings and all current shapes to make life easier
- more shapes!