This site now has automated typographic features
First tests of the OpenTypography php solution is now live!
If the typography; ligatures, small caps and such looks a bit weird and messed up when you visit this site. Don’t worry, it’s because I’ve just put the php version of the OpenTypography solution live and there are some minor adjustments with css and the Merriweather font that I’m using.
You can read more about it here
Automated webtypography with OpenTypography and php
About two years ago Opentypography was born, and together with FontDeck the idea was tested for a few typefaces in their collection. (You can read the release post about the 2012 version of OpenTypography at Smashingmagazine.com)
The goal is to have something running in the background of cms’s like Wordpress, Ghost, Drupal or lighter plattforms like our discontinued Skrivr.
The idea is ﬁrstly to automate as much of the typographic details in a text as possible. But secondly to include more intelligent features in the solutions.
Core features of the solution
- Basic ligatures (ﬁ, ﬂ)
- Other ligatures (fj, fﬁ, fﬂ, ffj and more)
- Lining and old-style numerals
- True small-caps
- Replacing uppercase with small-caps for abbreviations
- Superscripted symbols such as ® and ™
- Replacement of foot and inch-marks for correct quotation marks
- Correct replacement of en and em dashes
Those typographic features in its most rudimentary versions has been ﬁnished in the php version, and after ﬁxing some small-caps abbrevation-bugs I will pretty soon make the ﬁrst real tests on this site.
Top: Text without typographic editing
Bottom: Text automatically edited with the OpenTypography solution
Extended features – formatting numerals
As you see, the core features doesn’t cover all the typographic issues that might occur in a text.
I want to add further intelligence to the solution. If we look at some of the most common shortages caused by todays software and keyboard layouts it is mostly the widly spread misusage of hyphens, minuses or en- and em-dashes that is the issue. But solving this is way more complex than simply replacing quotation marks and ligatures. To know if a en/em-dash is separating or combining words and numbers we have to know the language context they are in.
That is what I’m currently working on. And I have decided to focus on numbers and formatting those in a as correct context as possible.
Examples of what has to be programatically detected:
The hyphen in 1-3 kg has to be turned into an em-dash: 1–3 kg as opposed to Liverpool won the game by 1-3 that shall not be altered.
The numerals in The organisation spent 12003500 dollars … has to be turned into 1,200,350. The phone number in … contact us at 12003500 has to be formatted like 1200 3500 or 120 035 00 or 12 00 35 00 depending on what language the text is written in.
The key to this, I think, will be looking around the numbers and see what preceeds and succeeds them. Based on that we can get clues on how to format them.
So it doesn’t take a neurosurgeon to realise that there is a horseload of work ahead to make that work.
Typeplate – a typographic starter kit
I stumbled across Typeplate in, I think, my twitter feed. It is as it says a typographic starter kit and I have for a pretty long time been looking for one just like it.
Typeplate has some great ‘defaults’ for base type, typographic scale, color, word-wrap, indenting, hyphenation, small capitals, block quotes, pull quotes and such that can be a bit cumbersombe to hash out yourself in css.
What I like about it is that it doesn’t focus on looks and design, it focuses purely on the typographic side of text.
We don’t make aesthetic design choices, but deﬁne proper markup with extensible styling for common typographic patterns.
I’m currently using Typeplace on this site even though my initial super-sparse typography and visual design doesn’t give it the justice it needs. But I will incorprate the php version of OpenTypography further down the road and then I might get write a follow up on Typeplate.
So make sure to have a look at Typeplate and also read up on OpenTypography.
After years of ideas and side-projects I have decided to clear them all out and make a fresh start.
Normaly I would write up some grand plan of what will come, spend silly amounts of hours on redesigning this site, buy a bunch of domains, put up an equal amount of holding pages … but all of that just becomes debris, it ends up as disappointments. So I won’t.
I will just start here. Write about the stuff I do in typography, code, ux and design.
… and to be frank, it feels good, really really good.