[B! font] bamboo_nのブックマーク

誰でも簡単！自作フォント作成の「PaintFont」が、あまりにも手軽だったのでフォントを作ってみました

PaintFont.comというフォント作成サービスを最近知りました。このサービスは、手書きの文字でも、イラストレーターなどで作成した文字でも、無料で手軽にフォントに変換してくれるサービスです。僕も、以前からちょっとフォントの作成に興味があったので、試しに作ってみることにしました。 photo by Connie Ma フォント作成の主な手順 PaintFontでフォントを作成するのに必要な、主な手順は以下の6手順です。必要な文字を追加して選択不要な文字を削除テンプレートをダウンロードテンプレートにフォントとなる文字を書き込む文字を書き込んだテンプレートファイルをアップロードフォーマットを選んでフォントを作成これだけの手順がありますが、半角英数字のみのフォント作成でしたら、30分ほどで作ることができました。 ※今回僕は、マウスで結構適当に文字を書いたので30分で済みましたが、丁寧に作

bamboo_n 2018/10/22

リンク

★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう

今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

bamboo_n 2018/02/25

font
icon

リンク

日本語Webフォントをサブセット化して軽量化する方法

今回は最近のWeb制作業界でよく利用されている日本語Webフォントを実用化する方法について紹介したいと思います。ちなみに私がWebフォントに憧れるようになったのは、佐野章核さんというグラフィックデザイナーが作ったWebサイトを見たことがきっかけでした。この前見た夢 Konel この佐野章核さんはグラフィックデザイナーを名乗っているのにも関わらず、Photoshopやイラレのエフェクトをあまり使わない海外っぽいデザインが印象的です。それでいて、日本語サイトではあまり見ない日本語Webフォントを用いて美しいタイポグラフィーによる先進的なデザインを実現しています。モバイルファーストの時代に突入するにあたり、今後はこのようなサイトが増えていくのではないかな〜という新時代到来を予感させてくれました。 Webフォントを使うメリット、デメリットについて日本語Webフォントが最近流通し始めている

bamboo_n 2017/06/24

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境：ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

bamboo_n 2016/12/02

リンク

プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係 | それからデザインスタッフブログ

こんにちは、Webデザイナーの斧山です！Photoshopで文字組みを行う際には「トラッキング」や「行送り」など様々な設定を行います。しかし、いくらPSD上で完璧に仕上げていても、いざコーディングをするときに正しくCSSが組めていないと、せっかくの“こだわり”が無駄になってしまいます。今回は意外と曖昧になりがちなPhotoshopの文字設定とCSSプロパティの相互関係をまとめてみました。それでは早速いってみましょう！ Photoshop文字設定とCSSプロパティの関係表 Photoshopの文字設定とCSSプロパティの関係をまとめてみました。文字設定 PhotoshopCSS

bamboo_n 2016/11/12

font
CSS

リンク

Font−familyのベストな書き方 2015年版 | それからデザインスタッフブログ

CSSのフォントの種類を指定する際に使用する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントなどの技術の変化などで日々変わっています。今回は最新のトレンドも踏まえた上で基本的なFont−familyの指定方法を再定義してみたいと思います。

bamboo_n 2016/09/29

font

リンク

font-familyで指定できるフォント名一覧

総称ファミリ名分類のフォント名一覧 font-familyプロパティで指定できるフォント名・総称ファミリ名を総称ファミリ名と各OS標準の和文フォントで分類し一覧表にしました。 sans-serif serif monospace fantasy cursive 和文フォント sans-serif abcdefg hijklmn opqrstu vwxyzABCDEFG HIJKLMN OPQRSTU VWXYZ0123456789あかさたなはまやらわアカサタナハマヤラワ零壱弐参肆伍陸漆捌玖拾 UAの初期値

bamboo_n 2016/09/29

font

リンク

デザイナーが持っていたい、すごいフリーフォント素材42個まとめ

デザインをしているときに悩んでしまいがちで、全体のイメージを決める重要な要素のひとつ、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。詳細は以下から。デザイナーが持っていたい、すごいフリーフォント素材まとめあさご本丸ゴシック伝統的な雰囲気でありながらも、クルクルとしたループ状の線が個性的でモダンさを感じるエレガントな書体だそうです。 ※　個人利用可能 Margurite 流れるように美しい筆記体スタイルで、リガチャ合字なども豊富に用意された、プロユースのデザインフォント。 ※　個人利用

bamboo_n 2016/05/10

リンク

デザイナーがチェックしておきたい！プロ仕様の有料フォントの中から実は無料で商用利用できるフォントのまとめ

無料で利用できるので、有料フォントの中からというのはヘンな日本語ですが、多くのプロデザイナーが利用している「FontShop」の有料フォントの中から無料で商用利用できるフォントを紹介します。無料でもラインセンスは有料フォントの通常ライセンスと同じ、5台のPCにインストールでき、Webフォントも無料でダウンロードできます。 Free Fonts -FontShop 無料で商用利用できるフォントダウンロード方法無料で商用利用できるフォント無料でダウンロードできるフォントは各フォントの豊富なスタイルから1ウェイト（多分のみ）です。お試し版だから商用利用はダメというのではなく、有料フォントと同じライセンスで利用できます。詳しくはダウンロードファイルのLicenseをご覧ください。

bamboo_n 2016/04/27

font

リンク

游とMerriweather

少し前にこのサイトのデザインをちょっと変えて、「本文は明朝、ただし見出しや強調などはゴシック」というスタイルにしています。と言っても、本文が明朝で表示されるのは游明朝体かヒラギノ明朝体が使える場合だけで、それ以外の環境ではゴシックになるはずです。欧文書体は和文の従属欧文ではなくMerriweatherです。セリフとサンセリフのファミリーがあることと、エックスハイトが高く和文との相性が良いことから選びました。ウェイトは和文とのバランスから400ではなく300を使っています。MerriweatherはGoogle FontsやTypekit、Font Squirrelなどで入手できます。 CSSの指定としては、まずデフォルトがMerriweather Sansとゴシック体の組み合わせ。そして游明朝体またはヒラギノ明朝体が使えるかどうかをJavaScriptで検出し、もし使えれば本文でMerr

bamboo_n 2016/04/02

リンク

デザイナーが愛用したい、フリーフォント素材45個まとめ 2016年3月度 - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

bamboo_n 2016/03/29

リンク

[CSS]文章の先頭に画像を表示する擬似クラス"before""after"要素の使い方！ - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

bamboo_n 2015/12/03

font

リンク

Download Font | FontYukle

bamboo_n 2015/12/03

font

リンク

フリーフォントをwebフォントとしてサイトで使用してみる | スターフィールド株式会社

webフォントを使用するケースが増えております。 webフォントを使用する場合、google フォントを使うか、 webフォントを提供しているサービスを利用するかですが、サービスを利用するとお値段がかかってしまいます。そしてもうひとつ、自分でフォントファイルをUPして使用する方法があるかと思います。ただ、普通のフォントファイルだと、容量が重くサイトの表示スピードに影響がでてしまうこともあると思います。そこで、商用利用可能なフリーフォント(Webフォントとして利用可能なフォント)を、必要な文字だけを抜粋して、woffというフォントファイルに変換し、サイトで使用する方法をご説明します。流れとしては以下になります。フリーフォントを用意するフリーフォントをサブセットフォントメーカーで必要な文字だけ抜粋する 2で作成されたフォントファイルをwoffに変換する cssで指定し、フォントを

bamboo_n 2015/12/03

リンク

もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -

Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。つまり、“メイリオ”は読み込まれず、“Meiryo”と

bamboo_n 2015/11/16

リンク

【便利】車メーカーや車に使われるフォント一覧

車のメーカーロゴや車のエンブレムに使われるフォントの一覧を作ってみました。海外のサイトを参考にしているため、間違っているものや微妙に違うものも多々あるかも知れません…。ヒントとしてお使いください！アルファロメオのフォント Alfa Owner Script BMWのフォント BMW Helvetica BMW Type シボレーのフォント MicrogrammaDBolExt Neuropol Medium Venus Rising Boombox Bank Gothic Medium BT Corvette ダッジのフォント Dodger フェラーリのフォント Ferro Rosso フォードのフォント Supreme Battlestar ホンダのフォント NewWGL4Font ジャガーのフォント Jaguar JC ランボルギーニのフォント La Macchina マセラティ

bamboo_n 2015/08/19

font
車

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

bamboo_n 2015/07/30

リンク

デザインの幅が広がる！ストックしたおきたい新作フリーフォントのまとめ

最近リリースされた商用利用も無料なフォントを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 ※1番目、メールで問い合わせ中です。 Jekyll and Hyde (DLできない時はUISpace）個人・商用利用、無料（商用可か作者に確認中）。ジキルとハイド、サンセリフとセリフのコンビネーションが映えるフォント。