Tag: Typography

タグ Typography がつけられた記事のリストです。

Mojik

ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリ、Mojikを公開。

ウェブサイトでシステムフォント

システムフォントをウェブサイトのUIに採用する意義と方法、そしてUIとコンテンツでのフォントの使い分けについて。

行の長さ

ウェブ・デザインにおける和文横組みの本文で、適切な行の長さはどのくらいか。いくつかの事例をもとに、「読みやすいのは 24 字から 40 字程度で、長くても 48 字程度までにすると良い」というガイドラインを提案。

游と Merriweather

このサイトのフォントを游書体と Merriweather の組み合わせに変えました。

#767676

前景色 #767676 は、背景色が #ffffff のとき WCAG 2.0 の達成基準「最低限のコントラスト (レベル AA)」を満たすもっとも明るいグレー。覚えておくと便利。

擬似要素を利用したベースライン・グリッド

擬似要素を利用してテキストをベースライン・グリッドに揃える方法。

和欧混植の条件分岐

ウェブフォントを利用して、ユーザーのローカル環境にインストールされている和文フォントを検出し、その結果に応じて欧文フォントを組み合わせる手法について。

グラデーションとテキスト・シャドウによるリンクの下線

リンクの下線をグラデーションの背景とテキスト・シャドウで表現する手法について。

横に水平線のあるテキスト

おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法を考えてみました。とくに flexbox を利用したパターンがいかに優れているかについて。

ハヤカワ・ポケット・ミステリのデザイン

水戸部功氏によるハヤカワ・ポケット・ミステリのデザインが好きなので並べてみた。

Hybridity

今週の土曜日、友人のレコード店 Rubbergard Record がオーガナイズする Hybridity というパーティがあるんですが、その告知ページを作るという仕事をしました。イヴェントの内容は、僕はこっち方面のシーンには明るくないのであれなんですが、その筋では知る人ぞ知る方々が出演するらしく、とくにブラジル音楽が好きなら楽しめると思います。お暇ならぜひ!

幅の狭い画面向けの等幅フォントに M+ 1m を採用

このサイトでは記事にソースコードを掲載することが多いけど、スマートフォンなど幅の狭い画面では折り返しが増えて読みづらくなってしまう。そこで幅の狭い等幅フォントに変えれば多少は読みやすくなるかと考え、M+ Fonts の M+ 1m をウェブフォントとして利用させていただくことにした。

text-rendering: optimizeLegibility

CSS の text-rendering: optimizeLegibility はカーニングと合字 (リガチャ) をうまい具合に調整してくれるもので、けっこう使えそうです。

Google Web Fonts が IE で適切に読み込まれない

Google Web Fonts のウェブフォントが IE 8 以下で適切に読み込まれず「にせのボールドとイタリック」になってしまうバグとその回避策。

テーブルセルの vertical-align: baseline

CSS でテーブルセルに対して vertical-align: baseline を指定したときの挙動はちょっと面白いです。そのセルが属するテーブル行で vertical-align: baseline が指定されたセルのうち、テキストの最初の行のベースラインの位置がもっとも低いセルによってそのテーブル行のベースラインが決まり、セルのテキストの最初の行のベースラインがそこに合わせられます。また、これを応用して、横に並べたフォントサイズの異なる異なるボックスのベースラインを揃えることができます。

Open Sans

このサイトのボディの欧文フォントとして Google Web Fonts で提供されている Open Sans を使ってみることにした。Chrome ウェブストア とかで採用されてるので見たことある人も多いんじゃないでしょうか。

フォント変えた

このサイトの基本のフォントファミリーを変えてみた。 /* 変更前 */ body { font-family: “Helvetica Neue”, “Helvetica”, “Arial”, “Hiragino Kaku […]

Bulletproof @font-face: Smiley variation

CSS の @font-face ルールの「安全な」書式として Paul Irish 氏の提唱する Bulletproof @font-face syntax (邦訳: hail2u.net – Weblog […]

13 か 15

先日、Twitter で @smashongmag (Smashing Magazine のアカウント) からこんな問いかけがありました: What font-size do you usually use for yo […]

リデザイン!

約 1 年半ぶりにサイトをリデザインした。細かいところはまだいろいろといじると思うけど、とりあえずおもな変更点をまとめておきたい。 Before: Vesion 2.1 After: Version 3.0 レイアウト […]

Font Squirrel で始める @font-face

書式が複雑、IE 向けの EOF ファイルを用意するのが面倒、ライセンスが英語でわからん、などの理由から CSS の @font-face にとっつきにくさを感じている人は少なくないと思います。そのあたりのハードルをかな […]

俺の CSS リセット: 2009 冬

各ブラウザが持つデフォルトのスタイルをいったんリセットし、のちのスタイル指定を容易にするための「CSS リセット」。どこまでリセットするかは難しいところで、俺も常に試行錯誤を続けていますが、この頃はだいたいこんなふうにし […]

Courier、Courier New、Consolas

前回の記事 では CSS で Mac 向けに等幅フォントを指定する際の注意点を取り上げ、Menlo と Monaco はあまりおすすめできない、Courier が無難、と結論づけた。しかしそこでは Courier とその […]

Menlo と Mac の等幅フォント

Opera 10.5 ではイタリックとボールドともに有効ですが、ボールドの太り方がやや弱いようです。 Firefox でイタリックまたはボールドを指定すると Menlo でレンダリングされない問題は修正されています。Op […]

チェック/ペケ

HTML/XHTML で チェックマーク (Tick) や ペケ (X mark) を表示させるには以下の文字参照が使える。 数値文字参照名称 ✓&#10003;CHECK MARK (tick) ✔&#10004;HEAVY CHECK MARK (bold tick) ✗&#10007;BALLOT X (cross) ✘&#10008;HEAVY BALLOT X (bold cross) しかし IE6 では文字化けすることが多いようなので、CSS で Unicode フォントを指定するといいみたい。 <!– HTML/XHTML…

スペースの幅

いわゆる「半角スペース」の幅って font-size の値に対してだいたいどのくらいの割合なの? ってのを調べる必要があったので、よく使う代表的な欧文フォントについてまとめてみた。どうやって調べたかというと、 <p><span>&nbsp;</span></p> こんな感じのマークアップに、 p {   font-family: “Arial”;   font-size: 1000px; } p span {   background-color: red; } というスタイルシートを当てる。ブラウザで表示させてみて、…

この数値文字参照がすごい! 2008 年版

早いもので今年ももうこの季節である。文字実体参照に比べて覚えづらい数値文字参照、その中でも使用頻度の高いものにスポットを当てる「この数値文字参照がすごい!」の 2008 年版をお届けする。 第 1 位: 〜 (&#12316;) 満場一致。文句なしでぶっちぎりの首位に立ったのはご存知「波ダッシュ」。その ややこしい背景 を考えれば HTML での表記は可能な限り避けて他の表現で代替したいところ。たとえば英語圏では「いつからいつまで」「どこからどこまで」の「から」は en ダッシュ (–) を使うことが多いみたい (ソース: Dash – Wikipedia, the free encyclopedi…

ときには真珠のように

「Web デザイナーがあらゆる閲覧環境でのタイポグラフィをコントロールしようなんておこがましいとは思わんかね…」…

Mac 版 Firefox 3 はデフォルトのフォントサイズが 16px に

4月16日に開催されたセミナー、CSS Nite in Ginza, Vol.24 に参加してきた。リリース間近の Firefox 3 の新機能について Mozilla Japan のスタッフが語る、というのがテーマ。僕はといえば、実はアンケート回答者に配られた Firefox ストラップ が目当てだったりもしたわけだけど、ちょっとうれしい話も聞けた—Mac 版 Firefox のデフォルトのフォントサイズがついに 16px になるという! これはおそらく日本語版のみの話だと思うけど、ほぼすべてのモダン・ブラウザがデフォルトのフォントサイズを 16px に標準化しているのに、Mac 版 Firefox だけが 14px …