by: Tyler Sanguinette | July 2014

Normalize-OpenType.css, a project by Kenneth Ormandy, adds OpenType features such as ligatures, kerning and more to Normalize.css. It is a great starting resource to address some of the most common typographic details often never messed with on the web. The content is good and the code is easy to implement. Visit Ormandy’s website to view his thought process and explanation of the project or grab the code on Github.


the Ways

by: Tyler Sanguinette | March 2014

Their may have been some confusion as to what this project was suppose to accomplish, code related. It was created to serve as a conversation starter and learning tool for more advanced typographic control on the web. This includes the font-feature-settings property in its experimental alternative state to the font-variant feature which is the current “recommended” way to use CSS3 OpenType features for webfonts. Engineers have worked hard to make this feature a recommendation standard for the w3c and web community. It deals with understandable language such as “common-ligatures” and “discretionary-ligatures” as opposed to “liga” and “dlig”. This is certainly a good place to start if you are interested in basic finer typographic control on the web, especially if you are not familiar with the specifics of OpenType itself. The font-feature-settings property however is a low-level settings control and a different way of applying the same features as the font-variant property. With my experiences and purposes, the font-feature-setting has been easier to use when it comes to swash, stylistic sets and implementation. Try both methods and see which you like better because after all if you are going to be a type nerd why not use real OpenType tags in your code.

Finally, I am happy to include as a source for well known and OpenType feature rich webfonts. They offer free trials so what better opportunity do you have to test these CSS properties yourself!



by: Tyler Sanguinette | January 2014

There has always been an issue with webfonts in regards to web production phase and seeing what a typeface looks like in context before actually purchasing it or publishing it. FontShop, the exquisitely ran type foundry by Erik Spickerman, has produced a heavily efficient and flexible tool called Webfonter. Webfonter gives you three ways to access FontShop’s typefaces: Chrome extension, bookmarklet and in-browser. One of Webfonter’s nicest features is that you don’t have to login to gain access to the library of typefaces, how great is that! Now that you have your typefaces to test it would be helpful to adjust size, line height and letter spacing to see if they fit well. Of course Webfonter has this as an option called “Tweak” where you can adjust all of the properties I previously mentioned. and Typekit don’t offer any tool such as this other than single line input boxes, however, they both have dedicated tools for delivering and testing fonts. Typekit uses the Creative Cloud program whereas uses SkyFonts. Unfortunately you need accounts when accessing their libraries.



by: Tyler Sanguinette | January 2014

After spending quite a bit of time testing typographic details on the web I found out that support for smart quotes is lacking immensely across the board. By default you get dumb quotes. I solved my problem on this website by painstakingly replacing every single or double quote with an HTML character code. The codes are as followed: (left single #8216), (right single #8217), (left double #8220) and (right double #8221). Top type foundries know this is an issue and describes smart quotes as an unfortunate glitch in web typography. Should developers demand better web development tools, is it a Unicode issue or browser rendering problem?



by: Tyler Sanguinette | October 2013

Typekit is slowly incorporating a variety of features in its “Launch Kit” component to better control typographic details. Within this feature Adobe has given you the choice to enable/disable support for several mobile platforms. It sounds great at first and most likely is, however, with this project -hosted on Typekit- I found myself at a disappointment. By default the mobile settings are all checked so I published the project and assumed it would display ligatures and other OpenType features on my iPad Mini. This was far from the case. I repeatedly unchecked, rechecked and published the project as the Typekit support staff suggested I do as a solution to the problem. I responded to let them know their solution was not working. Eight days later, after I wrote a second response, Adobe finally responded with the following email.

See what Typekit said.



by: Tyler Sanguinette | October 2013

Finding the perfect typeface for my senior thesis has been a challenge. First I started with Hoefler Text and Gotham from HFJ. Once applied the typefaces looked great, however, I quickly figured out that they would not work for my project because certain ligatures ct, st, etc were non-existent. HFJ does not support font-feature-settings currently because the feature is not a w3c standard - it is in the draft stages. Granted my problem was very particular I can understand why HFJ has chosen not to implement font-feature-settings yet: 1.) It is not a w3c standard yet (although widely used). 2.) HFJ are meticulous about constancy and the overall quality of their typefaces so they want to make sure every detail is worked out before implementing.

See what HFJ said.


Bakarat - EnergyCasino

Within the vibrant tapestry of our collaborations, EnergyCasino emerges as a distinguished partner, weaving together ventures with unparalleled zest.