Git Product home page Git Product logo

tie's Introduction

Tie - Font Conversion of The Finnish Traffic Sign Typeface

...Based on the original images still used for traffic sign designs! ...Codenamed: Tie!

Tiivistelmä Suomeksi (Finnish Summary)

Suomalaisissa liikennemerkeissä käytetyn kirjasintyypin fontti-konversio alkuperäisten kuvien pohjalta. Projektin koodinimi: Tie.

Käyttöönotto

  1. Lataa fontit /fonts -alikansiosta
  2. Kopioi fontit Font Bookiin (OSX) / Fonts (Ohjauspaneeli) (Windows)
  3. Avaa haluamasi ohjelma, esim. Word tai kuvankäsittelyohjelma - fontit ovat käytössäsi.

Lisätietoja

Lue lisää Wikipediasta ja Väyläviraston sivuilta.

Example of STOP Sign with standard spacing

Preface

The Finnish traffic sign typeface contains a lot of errors and problems. I ended up asking about the typeface used for upcoming renewed signs from Finnish Transport Agency (currently Finnish Transport Infrastructure Agency), and the conversation in Twitter lead to a CC0 release of the original typeface drawn in 1960's.

Tie is a typeface conversion of the original Finnish traffic sign typeface that is available at Finnish Transport Infrastructure Agency page.

Usage / Installation

  1. Download the .OTF and .WOFF versions from the /fonts folder of this repository
  2. Drag-n-drop / copy the downloaded files to Font Book (on OSX) / Fonts (Control Panel) (on Windows)
  3. Open your preferred text / visual editor and start making your own traffic signs

Repository contents

├── README.md
├── Tie-Regular.glyphs     > Glyphs editable version of the typeface
├── examples               > Example images
├── fonts                  > Distributable fonts (OTF, WOFF)
└── wordlists              > Wordlists for testing the typeface

Conversion

The conversion was made using Adobe Illustrator, by defining the x-height, cap height, ascender height and descender height based on the following letters:

dxHP

the method is described in a tutorial video on YouTube.

After that, the letters were copied one by one to Glyphs app and scaled with same proportions.

Spacing of the typeface was done using the original spacing tables, from page 287->.

Kerning tables aren't done, as I felt a bit unmotivated since the original kerning is somewhat bad.

Observations made during the conversion

  • Intriguingly, the cap height and the ascender height are the same
  • Originals, especially the lower-case ones, contain a lot of artefacts, and is not clear how to fix them

Problems fixed

I was brave enough to fix some of the problems that exist in the original typeface

  • Letters a, å, ä and y had some artefacts, so I removed them
  • Spacing (still pretty much WIP)
  • Semicolon spacing is taken from colon
  • Colon spacing is taken from from period
  • ! spacing is from capital I
  • ? spacing is from capital S

Existing problems and issues (TODO)

  • Artefacts from the originals should be removed and fixed
  • Kerning is not done (feel free to contribute, the information exists is on page 293->)
  • Some curves aren't curves - they have angular shapes
  • Missing: Cyrillics and their spacing, from page 298->

Major improvement ideas - How to make Tie actually work for traffic signs

  • Design is not pretty by the standards of modern typography
  • Design doesn't work well for traffic signs, as the glyphs become interchangeable when seen from a distance
  • Missing a LOT of glyphs
  • parenleft, and parenright seem like they are originally from another typeface (should have a thicker stroke)
  • There seems to be multiple originals, parenleft & parenright are good examples of these, compare with the traffic sign example
  • Human visual perception should be compensated with adding an overshoot (=placed below the baseline) to letters such as the letter o.
  • Add support to more glyphs
  • Add arrows and other signs used in the Finnish traffic signs to the typeface itself as ligatures, so they can be used whilst using the typeface itself
  • Missing different weights and styles (this could improve readability depending on the context)

TLDR: Not very well suitable for the traffic sign system at all

Potential benchmarks (Some european wayfinding typefaces)

  • Tratex
  • Dansk Vejtavleskrift
  • British Road Alphabet
  • DIN1451

References

More Examples

All Municipalities Random

License

CC0

Contributing

Make a PR.

Acknowledgements

This is a pro-bono hobby project. If you have any suggestions or wish to contact me, you can create an issue on the repo.

tie's People

Contributors

lapintom avatar thevangelist avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

tie's Issues

Amateurish attempt at expanding the provided font

Here is my amateurish attempt at expanding the provided font, so as to have it support most Latin, Cyrillic and some Greek characters, all done in an amateurish manner, as I have little experience of FontForge. Kerning, thus, is not really the best and I've only created characters that can be generated from exstant ones already.

Another expansion of mine is to recycle the fullwidth forms' pool to be able to output Finnish road names (e.g. (1) to output Finland_road_sign_F29-1 svg) and German-style autobahn numbers (e.g. [1] gives 16px-Bundesautobahn_1_number svg).

A (failed) attempt of mine was to insert also road signs as emojis, but I can't get colours to work.

EDIT: Managed to make use of ligatures, so that emoji flags get substituted with the correct DSIT code oval. Made us of some X codes as following for unrecognized countries (🇽🇦 - Abkhazia; 🇽🇨 - Northern Cyprus; 🇽🇩 - Donetsk People's Republic; 🇽🇰 - Kosovo; 🇽🇱 - Luhansk People's Republic; 🇽🇴 - South Ossetia; 🇽🇹 - Transnistria; 🇽🇿 - Zanzibar)

Tie-Regular.zip

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.