フォント関連の記事一覧



20170628-JUMP_PAINTのフォント一覧-00

ジャンプ公式の漫画制作アプリ「ジャンプPAINT」(JUMP PAINT)が無料で使えると聞いて、インストールを早速してみました。

なんかスゴイアプリが出てきたな!

漫画を描くためのチュートリアルもおもしろそうですね!

20170628-JUMP_PAINTのフォント一覧-54

画像出典:ジャンプPAINT by MediBang(メディバンペイント)



と、思ってジャンプPAINTのページを見ていたらこんな記述が…!

マンガ用フォントが50種類以上使える!!

週刊少年ジャンプで実際に使われているフォント(フォントワークス社提供の有料フォント)の一部が使える!!

ジャンプPAINT by MediBang(メディバンペイント)

なんだってー!

フォントワークスのフォントが無料で使えるとか、すごくないですか。


さらに商用利用もOK!

※個人使用目的に限らず、商用利用も可能です。報告の必要もありません。

フォント(メディバンペイント)


ということで、勢いで使用できる日本語フォントの見本一覧を作ってみました。(フォントワークスのフォントだけ)

ジャンプPAINTのページにもフォントの一覧はあるのですが、見た時に「あれ?これウエイト違いのものはないのか?」と思って「太字」も試してみたら、太字があるフォントと無いフォントがあったので、分かるようにどちらも作成してみました。



記事の続きを読む




20161022-Google-Fontsでフォントが見つからなかったときの顔文字-00



●Google Fontsのページがリニューアル

Google Fontsのページがリニューアルされ、モダンな感じのサイトに変わりました。

Google Fontsのサービスは、ウェブページで使えるフォントを提供しているページで、指定の通りにHTMLやCSSを角だけで、様々なフォントが使用できるサービスです。


日本語のWebフォントも試験的に何種類か追加され、9種類から選べることが話題になっていますね。

閲覧者のPCにフォントがインストールされていなくても指定したフォントを表示できるウェブフォントは、閲覧者の使用環境にウェブサイトのデザインが左右されないため非常に便利なのですが、アルファベットとは違い文字の種類が多いため日本語に対応したウェブフォントが少ないのも事実。そんな中、Googleが日本語フォント9種類をウェブフォントとして試験的に無料公開しています。

(略)

ウェブフォントとして利用できるようになったのは以下の9種類。もともとGoogleは独自開発したフォント「Noto Sans Japanese」を日本語フォントとして公開していましたが、今回はそれに加えて、「M+ FONTS」や「はんなり明朝」といった日本語フォントがウェブフォント化されています。

無料で使える日本語ウェブフォント9種類をGoogleが公開中(GIGAZINE)
記事の続きを読む



20160321-Creative-Cloud-Typekitの日本語フォント-00

Adobe Creative Cloudの契約をすると、印刷やWebで使用できるフォントが選べる「Typekit」というサービスも使えるようになります。

Typekitって、欧文フォントは充実しているけど、和文フォントはほとんど無いよね?という印象がありました。

しかし、そんな時代は終わりました。

いつの間にやら、日本語書体がかなり増えていました!


実際の所、2015年10月から使えるようになっていたわけだけど、Typekitって最近まであまり関心がなかったもので(汗)

今日の基調講演の中で、日本視点からの注目ポイントとしては、Creative Cloudのフォントライブラリサービス「Adobe Typekit」へのモリサワ書体とグループ会社タイプバンク書体の追加が挙げられるでしょう。

日本時間の2015年10月6日から、Creative Cloud のサブスクリプションユーザは、追加費用なしでリュウミン、太ミンなど計20書体の一部ウエイトが使用可能となります。

Adobe MAX 2015基調講演レポート:さらに進化するWeb制作環境 すべてがつながるCreativeSync、レスポンシブデザイン対応のMuse、TypeKitのモリサワフォントサポートなど(Adobe Creative Station)


Webフォントを使い始めて、Typekitに関心が出てきたので、覚え書き的に現時点でAdobe Creative Cloudユーザーが使える日本語フォントを紹介します。


記事の続きを読む



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


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

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

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

Dear Web designer(Medium)

なるほど。

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


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

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


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


記事の続きを読む



20160217-日本語WebフォントをCSSでfont-family指定-00

割と間違っている人は多いのかも?


モリサワのWebフォントサービス「TypeSquare」を最近ようやく使い始めて、これは便利だと思い始めている今日この頃、みなさんいかがお過ごしでしょうか。



●目次



●ダメなCSSの書き方

さて、既にタイトル落ちしている気もしますが、TypeSquareでは、

font-family: "リュウミン R-KL","Ryumin Regular KL";
font-family: "A1明朝","A1 Mincho";
font-family: "中ゴシックBBB","Gothic Medium BBB";

と、font-familyに同じフォントの「日本語のフォント名」と「英字のフォント名」を並べて書いてはいけません。

記事の続きを読む



20160214-ネットの反応-Webフォントを滑らかにするCSS-01

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)」は想像以上に反応があってビックリしました。


20160214-ネットの反応-Webフォントを滑らかにするCSS-02

はてなブックマークでも200ブックマーク超えってことで、こういうハックっぽいのは関心があるのだなと改めて感じました。


せっかく色々な意見を頂き、知らないこともあったので、自分が後で見返せるようにまとめておきます。(書ける時に随時更新)


記事の続きを読む



20160212-Webフォントを滑らかにするCSS-00

目次



●ブラウザーによってWebフォントの見え方が違う

今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォント - Wikipedia(Webフォント - Wikipedia)


意外と導入は簡単で、そんなに読み込みが重く(遅く)感じることは少ない気がします。

ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


Windowsのブラウザーでは、ざっくり言うと、

  • Internet Explorer 11:キレイ
  • Edge 13:そんなにキレイではない
  • Chrome 48:そんなにキレイではない
  • Firefox 44:そんなにキレイではない

と、こんな感じです。

※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


意外にもInternet Explorer 11はそのままでOKです(笑)。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

記事の続きを読む



株式会社マイナビ発行のムック「+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)

記事の続きを読む



20150507-Evernote-ClearlyでNoto-Sans-Japaneseを設定する方法-03

先日「Webを読みやすくするEvernote Clearlyの表示フォントを游ゴシック体・游明朝体にする設定」というエントリーで游ゴシック体・游明朝体を指定する設定を書きましたが、Windows 8.1では游ゴシック体・游明朝体がインストールされていますが、Windows 7では游ゴシック体・游明朝体がインストールされていないので、設定しても意味がありませんでした。

しかし、Clearlyの表示フォントがCSSで指定できるということは、Webフォントを指定することも可能です。

Webフォントなら、サーバーに日本語Webフォントを用意しておけば、どの環境でも同じフォントで表示できます。


というわけで、今回は、Clearlyの表示フォントを日本語Webフォント「Noto Sans Japanese」(別名:源ノ角ゴシック※)にする方法を紹介します。

※正しくは源ノ角ゴシックではありませんが、そっちの方が分かりやすい人もいるのであえてそう書きます。


「Noto Sans Japanese」は、AdobeとGoogleが共同開発しているWebフォントです。

「Noto Sans Japanese」はGoogleのWebフォントのサービスに登録されているので、すぐに使うことができます(参考:日本語ウェブフォント「Noto Sans Japanese」の指定方法(なぜか日本語に適用されない方向け)

記事の続きを読む



ブログ著者

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

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

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

ブログ著者について

サイト内検索