Yusuke Sugomori (巣籠 悠輔) – a Japanese creative technologist / planner / engineer / designer – came up with the an interesting take on a pure CSS font.
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. – Wikipedia
Yusuke Sugomori is not the first designer/developer to create a font alphabet purely in the CSS language, however the way he has named his font fittingly CSS Sans, designed a neat Japanese/English introduction website and even recorded a subtitled video (including a collaboration for the soundtrack), makes one believe this is a real font for sale and download.
Actually this is half true since there are in fact versions of the font for download, free of cost. However these are only a by-product of the web browser rendering (more on this below).
To better read the subtitles see a large version here.
The more interesting part is the backstory of this font – or rather alphabet – which only lives in the browser and tells tales from the history of the Cascading Style Sheets language (CSS).
It is correct that CSS is mainly a language to describe the look and formatting of a website, but also to define the layout at various screen sizes (responsive web design) and many things more. Using CSS to design a font could arguably be considered a slight abuse of the language. Though due the infinite scalability of a CSS defined object without quality loss – and the benefit that it can be animated – probably contributed to the emergence of more and more pure CSS icons and illustrations these days (not so much fonts though).
CSS Sans
This is what the CSS code for the letter “A” looks like, apart from that only a single DIV element with the class “A” is needed (look here for the CSS code of the full alphabet):
.A{
position:relative;
left:30px;
width:60px;
height:91px;
border-bottom:solid 14px #000000;
}
.A:before{
transform:skew(-19deg,0);
position:absolute;
content:'';
top:12.5px;
left:0;
width:16px;
height:125px;
background-color:#000000;
}
.A:after{
transform:skew(19deg,0);
position:absolute;
content:'';
top:12.5px;
left:45px;
width:16px;
height:125px;
background-color:#000000;
}
A font for recording the evolution of the web
The CSS language has a already quite a history, currently version 3 (CSS3) is mostly supported by current browsers, but browser had (and still have) various levels of support for the features of each CSS version e.g. v1, v2 and v3.
This is the part where CSS Sans becomes interesting: Due to the lack of support of newer CSS3 features, the font degrades when viewed in the various historic versions of older browsers.
Here is a screenshot for “Design Made in Japan” written in CSS Sans across various older browser versions:
Yusuke Sugomori offers renderings of the CSS Sans font in various browser versions as download (.ttf and .otf formats) on the CSS Sans website, as well as the pure CSS code. Download them from here ».
Follow Yusuke Sugomori on his many other digital adventures on these channels:
