なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半

[norando]

これだからタイポグラフィの世界には足を踏みだせない

[masakazu1998]

“これは比較的新しいプロパティのため、現時点でもまだ最新版のChrome/Firefox/Safariが一部の機能をサポートしているのみです。また、すべてのOpenTypeフォントが対応しているわけではない点にも注意が必要です。 Mac/Windows両

[tsug]

"本文の標準的な組み方はベタ組み" "約物とは記号類のことです"

[matometarukun]

やくもの

[Chachapo]

面白かった

[kei-cgod]

へえー

[dikn]

"うまく動作すると1文字づつspan要素が生成され" ヒュエッ……

[isshyman]

約物を解決

[jislotz]

あと数年したらブラウザに人工知能が搭載されて勝手にいい感じにやってくれるようになんないかな。

[marmot1123]

確かにそうなんだけど、表示速度を考えるとテキストコンテンツもjQueryで綺麗だけど遅くなるのとトレードオフだよなあ。

[asakura-t]

段落頭の開き括弧の前は二分アキが欲しいな／電子書籍ビュワーは各社ちゃんとやってるはずだから（だよね？　やってない？）、Webブラウザもちゃんとしろとは思う。

[mr_mayama]

難しくないアキ量設定の話。エディトリアルデザイナーこそWebに携わってほしい。

[yasu-log]

【B!】なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | それいけ！フロントエンド

[azusanakao081]

等幅が好きなんですが

[thleap]

約物制御の話。CSSだけではまだむずかしい

[comogawa]

素晴らしい記事

[haiji505]

エディトリアルデザイナーからフロントエンドエンジニア。強い。

[misaquo]

念願の行末均等揃えがどれぐらい実現できるか、試してみようかな。

[pnk2]

、

[h-tanaka-esterno]

これからWebデザインに取り組もうというエディトリアルデザイナー、必見。