RSS

Design

テーブルで組まれたフォームをレスポンシブ対応に

フォームページはまだテーブルで組まれたものも多いです。
レスポンシブ対応にする際に、縦に並べたいのですが、さてどうしようと考えていたのですが、


table th,
table td,
table tr {
display:block;
}

ひとまず、これでなんとかなりました。あとは微調整してやればいけました…。
小ネタですが、フォームまわりはまだまだテーブルレイアウトで作られたものもあるので、めんどくさいときはこれで対応しています。

覚書:Webの文字にオートカーニング

ブラウザでのオートカーニングについては、データベースが飛ぶ前、ここで随分前に触れましたし、すでに十分浸透していることなのですが、一応覚書として。

OpenTypeフォントには「プロポーショナルメトリクス」という、カーニング情報が埋め込まれています。
Webフォントもこうしたカーニング情報を持っているものが増えており、CSSプロパティで利用できます。

section{
font-feature-settings : "palt" 1;
}

こう書くと、オートカーニングが効いて表示されます。
ほとんどのWebフォントも対応し、今はもう必須ともいえるプロパティだと思います。

Obscure Fontその後

先日ご紹介させていただいたObscureフォントですが、小文字も追加で作り始めました。

こういう感じでIllustratorで書き起こしたものをGriphsに取り込んでおります。
いま、ペアカーニング情報を設定しているところです。

グリフ別にひとつひとつ設定していくのですが、上書きされていたりとまだよくわかっていません…
岡倉覚三「茶の本」の欧文で様子をみております。

なんとか見られるようになってきているので、もうちょっとしたらSTORESの方でリリースしたいと思っています。

“Obscure” Font

STORESに新しいフォントを追加しました。
「I/A Obscure」という名前で、セリフ書体をベースに途切れたような、朦朧とした(obscure)感じのデザインです。
OpenType/TrueTypeだけでなく、Webフォント(.woff)もあります。
よければ以下から見てやってください。

I/A Obscure

フォントを作ってみました

仕事などで描きためた欧文文字がいくつかあったので、ひとつ試しにGlyphsを使ってフォントにしてみました。
Webフォントも用意しております。

サンプルはこちら
さらに、試しにSTORESで販売してみることにしました。.otfと.woffのセットで1800円です。高かったかな…

STORESはこちら

よければご覧ください。

1 2