ABCDEFGHIJKLMNOPQRSTUVWXYZ

CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。
WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。

CSS SANS is the font created by CSS, the programming language for web designing and typesetting.
It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape.

フォントの成り立ち

How the font is made

CSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。
ただひとつ、「文字自体をデザインすること」だけができませんでした。そこでつくったのが CSS SANS。CSS で使える様々な要素を活用することで、AからZまでの文字をデザイン。それぞれの文字を、ひとつの <div>タグで作成しています。
各文字がどのように作られているかについては、フォントページからご覧ください。

What CSS can do is changing the layout of web pages, typesetting, adjusting letter spacing and so on. Yet, there was one thing that CSS couldn't do. That is "To design a character itself." And that's why we have created CSS SANS. We have designed letters from A to Z by facilitating the various factors of CSS. Each letter is made by one <div> tag.
Please visit "FONTS" page to see how each letter is made.

View all fonts →
.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;
}

WEBの進化を記録するフォント

Records of the font continuously evolving with the Web

CSS SANS は、時代に合わせてフォントの形が変わります。
それは、時代とともに CSS でできることが進化してきたから。
そのため、「ブラウザ」というその時代を反映するフィルタを通すと、
同じコードで書かれているのに、フォントの形は変わります。
どのブラウザでどのようなフォントが映し出されるのか、
アーカイブページで体験してみてください。

CSS SANS is the font transforming its shape along with the times. This is because CSS itself has been developing its abilities. Therefore, looking the font through a "browser", a filter that reflects the times, shapes of the font look different hence it’s written by the same code.
Please visit "ARCHIVE" page to see how the shape changes.

View font archive →
Fonts

クレジット

Credits

企画・制作/ Planning˙Production
音楽/ Music
協力/ Special Thanks
  • 木戸 竜也(Tatsuya Kido)
  • ノダ ナナエ(Nanae Noda)