文字関連の記事一覧



20160318-Illustratorの文字組みや詰めをWebで再現する-00


●Webでタイポグラフィはムダ?

はてなブックマークで話題のページでこんな記述がありました。(以下は原文ママ)

文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか?それを実装するエンジニアの工数は効果に見合ったものでしょうか?ユーザーはどんなメリットが得らるのでしょうか?何をもって美しいタイポグラフィとするのでしょうか?

Dear Web designer(Medium)

なるほど。

でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか?


クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、(レイアウトやタイポグラフィ含め)印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…(メイリオフォント)」みたいな世界観の断絶を少しは和らげられるのでは、と思って発言されているのだと思います。

それをメディアが違うから…と頭ごなしにバッサリ切ってしまうのは、少し違うと思うのですよね。(もちろん考えなしに発言する人も多いでしょうが)


当然、コストの問題もあると思いますので、(改行位置はともかく)ユーザーの環境で同じように見えて、工数が少なければ良いのか!(ポジティブ思考)と考えて、Illustratorで制作したタイポグラフィ・文字組みを同じようにWebでも反映したいという要望に敢えてチャレンジしてみました。


記事の続きを読む




株式会社マイナビ発行のムック「+DESIGNING」Volume 40(プラスデザイニング)の献本でいただきましたありがとうございました。

20151006-+DESIGNING-文字と組版、書体とフォント-02

今回の特集は「文字と組版、書体とフォント」です。


特集の項目は次のようになっています。

  • 気づけば変わる ビギナーから抜け出す、文字組み10の心得+α
  • デフォルト設定が起こす、文字組みの諸症状、解決します! Illustrator&InDesign文字組みトラブル10の処方箋
  • 組み始める前に必ず確認! Illustrator・InDesignの設定チェックリスト
  • デザイン&政策担当者必見! フォントメーカーに聞く、フォントの使用許諾一覧
  • ネイティブによる翻訳&チェックが高品質のカギ。多言語組版の現場から
  • 写真のしくみで打ち出す、美しい文字。写真植字の魅力
  • MORISAWA PASSPORTの歩みとこれからを考える
  • まとめてチェック! 新書体&開発中書体


ムックの内容を少し紹介しますね。

記事の続きを読む



Illustratorの線幅ツールを除いて(先に書いておく)。



●新しいGoogleのロゴは線だけで表現ができる…? すごい!

というわけでGIZMODOにこんな記述がありました。

他のユーザーさんの指摘では、新ロゴはフィル(fill、塗り)ではなくストローク(stroke、線)でも作ることができるそうです。これも旧ロゴではありえなかった特徴の1つ。

グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?(ギズモード・ジャパン)

そうなのか?と新しいGoogleのロゴを改めて見てみました。

20150907-Googleの新しいロゴは線だけで表現できない-01

画像出典:Evolving the Google Identity(Google Design)



しかし、どうも線(ストローク)だけでは難しそうに感じました。

上記画像のあるGoogleのページには、こんな説明もあるので、見てみると、確かに線(ストローク)だけでGoogleの新しいロゴは描けそうです。

20150907-Googleの新しいロゴは線だけで表現できない-02

画像出典:Evolving the Google Identity(Google Design)

記事の続きを読む



暑いですね。アイスの美味しい季節になりました。

風呂上がりにロッテのアイスCoolishを飲んでいると、ちょっと幸せな気持ちになります。

そのCoolishですが、パッケージの裏面を見ていたら文字が気になりました…。

裏面はこんな感じ。

20140626-アイスCoolishのパッケージの文字-01


特に変なところはなさそうに見えますが、文字をよく見てみると…。

記事の続きを読む



NHKニュースのページははてなブックマークやTwitterでたまに紹介されるので、見ることが多いですが、今日スマートフォンで見ていたらおもしろい機能が付いていたのに気がついたので紹介します。


機能としては、文字のサイズを変更することで、通常のウェブページのデザインと、スマートフォン用のデザインが変わるレスポンシブwebデザインになっていたということ。文字サイズを変更するだけでデザインが変わるので、PC版とスマートフォン版の切り替えが簡単でナイスだと思います。

もしかしてこれって結構前からあったのかな?


●PCのブラウザーでNHKニュースを開く

まずPCでNHKニュースのページを開くとこんな感じです。

このページにも右上に文字サイズを変更するボタンがありますが、これをクリックしてもニュース本文部分の文字の大きさが変わるだけで、特に大きなデザイン変更はありません。

20140323-NHK-レスポンシブwebデザイン-01

以下全ての画像出典:中国 大気汚染企業に懲罰税導入へ(NHKニュース)



記事の続きを読む



最近はWebばかりやっているのですが、InDesignで作業をしていると「em」が使えなくてかなりイライラする時があります。

インデントで「1文字下げ」を普通に指定したい。
mmなどの指定だと、文字サイズが変更したときに再設定しなくてはならず大変…。
20130304-InDesign-インデントでemが使えない-01





Wordでも文字数でインデント指定できるよねーと思ってスクリーンショット撮ろうと思いましたが、家のPCにはWordはインストールされていませんでした。

意外にも(?)OpenOffice.org Writerは「cm」「mm」などの絶対距離指定で文字数指定は対応していませんでした。(なおワードパッドも文字数指定はできない)


なので一太郎を貼っておきます(苦笑)。画面は一太郎2009 on Windows 8です。
8文字を「8C」(CはCharacterだろう)と指定します。
20130304-InDesign-インデントでemが使えない-02


電子書籍周りで一字下げとか結構出てくると思うのですが、制作者の皆様はどうやっているのでしょうかね…。px固定であとはビュアー側で適当にしてくれるのでしょうかね…。それとも空白スペースか…。(InDesignでの電子書籍の作り方はほとんど知りません)

記事の続きを読む



20121008-田の字の□の大きさ比較-00


あまりにも「本当かよ…」と思ったことが書いてあったので、調べてみました。


調べた内容は「漢字の『田』の字の真ん中にある線は中心ではない」(意訳)ということ。


「田」というこんな単純な文字は「口」のセンターに「+」って書いてあるだけじゃないの?…と思ってIllustratorで調べてみたら本当に違いました(汗)。


Illustratorでこうやって調べた

  1. 「田」の文字をフォントを変えて複数並べます。
  2. 各文字の左上の四角に合わせてピンク色の四角を描きます。
  3. 左上のピンクの四角をコピーして、右上・左下・右下の四角に合わせます。
  4. 隙間が無ければ、同じサイズ。隙間があれば異なるサイズということになります。


記事の続きを読む



以前書いた記事の「Google+にデカ文字(巨大文字)でポストして目立っちゃおう!」を投稿してすぐ補足のコメントを頂いていたのですが、記事に反映しないでもう2週間経ってしまいました…。すみません。

なので別記事で補足を投稿しておきます。


なお、デカ文字はGoogle+であたかも文字を大きくしたように見せかけるHackです(大げさ)。

記事の続きを読む



iPicnic by JD Hancock


なんとなく薄々はそうじゃないのかと思っていたのですが、自分の会社のウェブサイトをiPhoneで見た時に、文字の大きさがおかしくなっていました(汗)。


現象としては、小さなフォントサイズを指定した時に、 iPhoneのSafariで見ると、指定したフォントサイズにならなく、大きく表示されてしまう、というものです。

ウェブで調べ物をしていたら偶然にも解決策を書いてあるページを見つけたのでご紹介します。


※ちょうど同じ問題で悩んでいた方も近くにいらっしゃったので、他にもいるのでは…ということで。
記事の続きを読む



On the Road Manuscript, #1 by Thomas Hawk


全然Internet Explorer 9を使っていないのですが(※1)、色々調べてみるとInternet Explorer 9のテキストレンダリングの改良がおもしろいので紹介。


Internet Explorer 9のテキストはなぜInternet Explorer 8より読みやすくなっているのか、というテーマです。

前回のブログで書いた「IE8とIE9でWebフォントのレンダリングを見比べてみる」 の後半で書いたClearTypeの精度の違いについての補足です。
 
記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索