無償の Web フォントを使って Hello World を少しだけおしゃれにする

#Adobe

トラン

2016.10.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、ももんが大好きの小山です。みなさんいかがお過ごしでしょうか?

きょうは、Adobe Systems が無償で提供、配信する Web フォントコレクションのAdobe Edge Web Fontsを使って、これまで味気なかったブラウザ上の Hello World を (ちょっとだけ) おしゃれにする方法についてご紹介します。

これまで

今までブラウザに Hello World を出力したい場合、以下のような HTML を配信するようにアプリケーションを設定するケースが多かったかと思います。

<!doctype html>
<html>
    <head><meta charset="UTF-8"></head>
    <body>
        <h1>Hello World</h1>
        <p>Welcome to shohta.classmethod.info</p>
    </body>
</html>

これを Windows 上で表示した場合の見え方が以下ですが、なんと申しますか... 垢抜けませんね。

OS X では少しましに見えますが、どうもピンときません。苦心して設定したアプリケーションの Hello World がこれでは、意欲も削がれるというものです。

そこで今回、表示に用いる書体を変えたらいいのではないかという仮説が生まれました。人間の目にとって美しい書体がどんな意味をもつのかという点について関心をお持ちの方は、以下のページを開いてみてください。

多摩美術大学グラフィックデザイン科 | Userʼs Voice | フォント製品 | 製品／ソリューション | 株式会社モリサワ

モリサワの Web サイトはおそろしく美しいだけでなく目に優しく、一部のスマートフォンなどで見受けられるひどい書体との落差はどこから生まれるのかという気持ちになります?

やってみる

今回は Hello World を表示するクライアントの OS (利用可能なフォント) に依存することなく一律でおしゃれな Hello World を実現するため、冒頭の Web フォントライブラリを使用することにしました。ここからAdobe Edge Web Fontsを開いて、Get startedを選択しましょう。

次のページでは、セリフの有無を始めとしたスタイル、用途 (見出し/本文)、ウエイトなどの属性を選択して、お好みのフォントを見つることができます。プレビューする文字列を変更するには、サンプル部分 (AaBbCcなどと書かれたスペース) をクリックしましょう。

既定のウエイトより太いバリエーションや細いバリエーションをプレビューしたい場合、そのフォントにカーソルを合わせて任意のウエイトを選択します。これだというフォントが見つかったら、同じようにカーソルを合わせて+Select this fontを選択しましょう。

+Select this font でフォントを選択すると、画面の下に必要なタグが表示されます。これを控えておきましょう。

控えておいたタグをもとに、アプリケーションで出力する Hello World を記述します。300や200のような数字とウエイトの対照や、高度な例について詳しくはヘルプをご覧ください。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="//use.edgefonts.net/source-serif-pro;source-sans-pro.js"></script>
        <style>
            h1 {
                font-family: source-serif-pro, sans-serif;
                font-weight: 300;
                font-style: normal;
            }
            p {
                font-family: source-sans-pro, sans-serif;
                font-weight: 200;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>Welcome to shohta.classmethod.info</p>
    </body>
</html>

さっそくブラウザから新しい Hello World を開いてみます。やった! きちんとedgefonts.netから配信されたフォントを使って表示することができました。

あれ...?! 同じものを Windows で開いたのに、見た目が変わっていません。2016年の瀬も押し詰まったというのに、Internet Explorer は CSS による外部フォントライブラリの呼び出しに対応していないのでしょうか。

そんなはずないでしょう。恐るおそるctrl + F5を押すと、きちんと表示されました。ちょっと Hello World と Welcome to... が離れすぎていますね...

Bildschirmfoto 2016-10-11 um 18.10.39

煮詰まったときの常套手段ということで、線を入れてみます。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="//use.edgefonts.net/source-serif-pro;source-sans-pro.js"></script>
        <style>
            h1 {
                font-family: source-serif-pro, sans-serif;
                font-weight: 300;
                font-style: normal;
                border-bottom: thin solid #dcdcdc;
            }
            p {
                font-family: source-sans-pro, sans-serif;
                font-weight: 200;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>Welcome to shohta.classmethod.info</p>
    </body>
</html>

少しよくなった気もしますが、全然よくなっていない気もします。