フォント・文字関連の記事一覧



20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-00

画像出典:Evernote Clearly(Evernote)


みなさん、EvernoteのClearlyを使っていますか?

このClearlyはFirefox・Chromeで使用できるアドオン・機能拡張で、Webの文章を読みやすくするためのアドオン・機能拡張です。


このClearlyを使うと、本文にフォーカスした表示のされ方に切り替わって、文章がとても読みやすくなります。



●ClearlyでWebの文章がこんなに読みやすくなる

例を見てみましょう。

千葉県房総半島のいすみ市から大多喜町を走る路線のいすみ鉄道の社長さんのブログです。

元のブログの体裁はこんな感じ(今はスタイルが変わりました)。

左側にサイドバーがあって、ショップを見るボタンやカレンダーや最近のエントリーなどがあります。

本文は右側に掲載されていますが、CSSでフォントがMSゴシックになっていて、行間は140%なので、ちょっと読みづらいです。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-04

画像出典:さようならトワイライト(いすみ鉄道 社長ブログ)(Internet Archiveのデータから)



このWebページをClearlyを使って表示すると以下の様になります。

本文だけが表示されるシンプルなスタイルに変更され、余計なものが目に入らなくなり、かなり読みやすくなりました。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-07


Clearlyは標準の設定でもWebの文章は読みやすくなりますが、今回は表示に使うフォントに「游ゴシック体」や「游明朝体」を設定して、さらに読みやすくする設定を紹介します。

記事の続きを読む




20150306-FontawesomeのMaxCDNからのロード速度-03

画像出典:Font Awesome, the iconic font and CSS toolkit


皆さん、Webフォントの「Font Awesome」使っていますか?

様々なアイコンが入っていて便利ですね。

Bootstrap標準のWebフォントは使用していますが、Font Awesomeも最近よく使用しています。


Font Awesomeの便利なところは、CDNが用意されていて(MaxCDN)、1行を<head>タグ内に追加すればすぐに使えるところ。

以下の1行だけ追加するだけです。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

簡単!

これだけで519のアイコン(2015年3月6日現在)が使用できます。

MaxCDNさん、ありがとう!



●何か引っかかりを感じる…ので計測してみた

こんなに簡単に使えてウェブ制作では大変便利で感謝しまくりですが、使い始めると何か表示に引っかかりを感じるようになりました。

同じようなサイトを作っていても、手抜きをしたサイトと、きちんと作ったサイトでは引っかかり具合が違うなと感じたのです。


手抜きをしたサイトは先程のMaxCDNの1行を書いただけというもので、きちんと作ったサイトは、Font Awesomeのファイルをダウンロードして、使っているサーバーにCSSやフォントファイルをアップロードして、使っているサーバーから読み出すように作ったものです。


MaxCDNは世界中で使用されているCDNなので十分に早いのでしょうけれども、念のため速度を調べてみることにしました。

記事の続きを読む



●Noto Sans Japaneseの指定方法はDTP Transitを

新潟グラム × DTP Boosterの懇親会の時に、スピーカーの鷹野さんに「Noto Sansってウェブフォントの指定の仕方が分からないんですよ〜」と質問したら「あ、それならDTP Transitのサイトソースを見てみて」と言われました。って、今さらって感じですが、その内容について書きかけだったので、書き終えて年末を終わろうかと。


実際、DTP Transitのサイトソースを見たら指定の方法は分かりました。

  • DTP Transit

  • でも、この指定の方法って正式なモノなのか?って思ってしまいました。

    (見たい人は http://www.dtp-transit.jp/css/styles.css の中で「Noto」を検索してね)

    念のため正式な指定の方法をGoogle Fontsのページで確認しておくことは制作者として正しいことかなと。



    ●正式ドキュメントを探してみる

    なぜかって?

    「Noto Sans」で検索して、検索結果で出てきた最初のページを見てみます。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-01

    画像出典:google font noto sans(Google 検索)



    以下のページが出てきます。

    なんかごちゃごちゃ書いてありますけど、右上に「Open Noto Sans in Google Fonts」って書いてあるのでクリック!

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-02

    画像出典:Noto Sans(Google Fonts)



    するとGoogle FontsのNoto Sansのページが出てきます。「勝ったッ! 第3部完!」って思うじゃないですか。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-05

    画像出典:Google Fonts


    記事の続きを読む



    CSSをいじっていたら、フォント表示を改善できて、キレイな表示になったので報告しておきます。

    なお、かなり無理矢理ですので、場面に応じてお使い下さい。

    対応ブラウザーはInternet Explorer・Firefoxです。(Internet Explorerは9以降かな?)


    ざっくり行きたいなら、以下の様に書きます。

    body { transform:scaleX(0.9999); }


    Yahoo!のトップページのニュースの見出し部分で検証してみます。

    ブラウザー内蔵の開発者ツールを使用してCSSを適用して、スクリーンショットを撮り、2倍に拡大して掲載しています。

    ●Internet Explorer 11

    適用前

    20141205-ウェブでのフォント表示をキレイに-IE-03


    適用後

    20141205-ウェブでのフォント表示をキレイに-IE-04


    ※IE9だと「-ms-transform:scaleX(0.9999);」

    記事の続きを読む



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

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

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

    裏面はこんな感じ。

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


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

    記事の続きを読む



    TwitterのDiscovery(見つける)機能で見かけたツイート。

    広島の平和記念公園の案内板らしいのですが、フォントの選択が間違いすぎている気がします…。どうしてこうなった。

    20140524-広島平和記念公園の案内板フォント-01


    ずいぶんおどおどろしい感じになっていますね…。

    ただ、これは古い印(ハンコ)のフォントか何かだと思うので少し調べてみました。

    記事の続きを読む



    20130423-ビブロスフォントからOTFへ変換スクリプト-00

    みなさん、ビブロスフォント(Biblos Font)使っていますか?

    って使っている人はもはや古いQuarkXPressユーザーだけか…。
    私も以前はお世話になりました。


    ビブロスフォントですが、,澆燭い粉歐字が100まで使えて当時は「すげー」と思いました。
    そのビブロスフォントを使ったデータを今度InDesignで組み直すときに、ビブロスフォントの丸数字をそのまま使うわけにはいかないので、Open Type Font(OTF:オープンタイプフォント)に置き換えようと思いました。

    こんなの「検索と置換」で何とかなるかと思いましたが、なかなかうまくいかないのでInDesignのスクリプト(ExtendScript・JavaScript)を書くことにしました。

    記事の続きを読む



    最近は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. 隙間が無ければ、同じサイズ。隙間があれば異なるサイズということになります。


    記事の続きを読む



    20120829-Firefox-フォントレンダリング-00

    皆さん、Firefox使っていますか?

    私はまだFirebugのお世話になりっぱなしなので、メインブラウザーとして愛用しています。
    さて、WindowsでFirefoxを使っている方でフォントのキレイさに悩んだことはありませんか?

    • 「Safariに比べるとフォントの表示がなぁ…」
    • 「Macと文字のキレイさが違う」

    今回はそんなFirefoxのフォント表示を劇的に改善する設定を紹介します。
    設定は最小で1ヶ所設定するだけという簡単設定です。ぜひ試してみて下さい。


    なお、このネタはあたりの記事を書いているときに書こうと思って忘れていたネタです…(汗)


    設定は以下の通りです。
    記事の続きを読む



    ブログ著者

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

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

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

    ブログ著者について

    サイト内検索