オリジナルフォントを使ったデザイン - クックパッド開発者ブログ
こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか？ ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特
CSSのフォント指定見直した
CSSのfont-family、人によって書き方違うからなかなか参考にしづらい。この前読んだ記事が素晴らしく、これパクっとけば2014年は乗りきれるなと思ったのでご紹介します CSSでのフォント指定について考える（2014年） - DTP Transit コードfont-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; これ。以下解説。 欧文書体を先に書く基本的なことだけど、欧文書体を先に書くと、アルファベットや数字は欧文書体になり、欧文書体が持っていない漢字/カタカナ/ひらがなは和文書体で表示できる。なのでまず欧文書体を先に書く。参考リンクはVerdanaを指定して
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
brew install ricty
そのままやってみたのですが、できませんでした… どうすればいいのでしょうか^^; $ brew install https://raw.github.com/sanemat/homebrew-font/master/ricty.rb ######################################################################## 100.0% ==> Downloading https://github.com/yascentur/Ricty/archive/3.2.1.tar.gz Already downloaded: /Library/Caches/Homebrew/ricty-3.2.1.tar.gz ==> Downloading http://levien.com/type/myfonts/Inconsolata.otf Alre
プログラムに最適なフォント『Ricty』を超簡単にインストール[Mac限定]
プログラムを読みやすいことで有名なフォント『Ricty』をHomebrewで簡単にインストールするための手順です。Homebrewでのインストールは一瞬ですので、もしまだ使ったことがなければぜひトライしてみてください。 🗻 RictyのサンプルRictyってどんなの？ ということでこんなのです↓ 文字と文字の横のスペースが大きいので読みやすいです。 🗽 インストール手順コンソールに次のコマンドを入力。(ここは定期的に変化するようなので実際の画面を優先してください) brew tap sanemat/font brew install Caskroom/cask/xquartz brew install ricty # (ゴニョゴニョ) cp -f /usr/local/Cellar/ricty/3.2.2/share/fonts/Ricty*.ttf ~/Library/Fonts/
![プログラムに最適なフォント『Ricty』を超簡単にインストール[Mac限定]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2ea7e72d0d7f3ba6c237909f321e67ffbdaa24e/height=288;version=1;width=512/https%3A%2F%2Fmorizyun.github.io%2Fimg%2Fog_image.png)
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント
Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
劇的にフォントが綺麗になる「gdipp」を入れてみた
2011年08月26日 劇的にフォントが綺麗になる「gdipp」を入れてみた 普段私はそんなにフリーソフトを入れる方ではないのですが、 先日RSSを見ていると、ふと気になったツールがありました。 それが、このフォントを美しくする『gdipp』です。 今回は、そんな久しぶりに「いいかも！」と思ったツールを 紹介します。 しばらく思い出語りが続きますので、すぐにツールの詳細が知りたい方は こちらまで。 フォントの大切さ 私がOSを入れ替えた時、一番最初にすることはフォントの変更でした。 フォントって、常に目に入る物ですからね。 やっぱり、自分にとって見やすいフォントを選択したいところです。 作業効率も全然違いますから。 思い返せば、Windowsのフォントは代々、ほんと酷いものでした。 私は、Windows3.1から使い始め、95、98SE、Me、XPとバージョンを 変えてきたのですが、ずっと
gdi++ Heliumの設定 - itouhiroはてなブログ
以前の記事: [フォント] gdi++の設定 http://d.hatena.ne.jp/itouhiro/20100613 Windows環境でフォントをキレイに表示する gdi++（ジーディーアイ・プラスプラス）だけど、別のを使うことにしたんだ。 なぜ変更したの？ 変更した理由 これまで使っていた gdi++ FreeType（フリータイプ）版 (gdi0787) は、Google Chromeで効かないという問題があった。 そこで、gdi++ Helium（ヘリウム）版に替えてみた。Google Chromeもこれで効くようになった。 使用方法がこれまでと変わってしまったので、以下にメモするよ。 ダウンロード http://free.flop.jp/gdi++/ にある gdi0930.zip をダウンロードして展開（解凍）する。 このzipファイルに含まれるバージョンは gdi++
gdi++でWindowsでもフォントをきれいに - ただいま村
ちょっと思い立って、Windows Vistaマシンにgdi++を入れてみた。フォントレンダリングの方式を変えて、文字をなるべくきれいに表示しますというプログラム。 gdi++.dll @ wiki - トップページ（http://www18.atwiki.jp/gdiplus2/pages/1.html） 「初心者用スターターパック」（これはありがたい）をダウンロードしてHelium版を使い、ブラウザとエディタをきれいな表示にしてみたらおお、いい感じ。 左がWindowsデフォルトのClearType、右がgdi++。以下同。本文の「自転車」の「自」の字を見ると、ClearTypeは横線を1ピクセルの太さで表現しようとして、横線どうしの間隔が不揃いになっている。gdi++は横線どうしの間隔が揃う代わりに、太さが1ピクセルではなくなっている。gdi++の表示のほうが好みだ。 ITmedia
Webデザインにアクセント！記号やイラストなどのフォントまとめ
記号やイラストなどを収録しているフォントをお探しの方用のエントリ。 自力で無料のものを探すのは難しいという方は参考にどうぞ。 Kaomoji Holiday illust Garabata - dingbats The Scrappin Cop SocialIcons font by ptocheia - FontSpace Irresistible Free Dingbat Fonts | Part II - StarSunflower Studio このページにはかなりの量がまとまっています。キャプチャーは全て、このページのリンクへつながっています。 Was Woodcuts Griffin Bats Zooland My 70's Ding Squares Font Medieval Dingbats Kaloscai Flowers Jade Dingbats Font 001 M
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
プログラミングやコンソールアプリケーションに最適なフォント「Ricty」＃LOVEFONT | Sinack
今回、WEBCRE8の@glatyouさんが先日＃LOVEFONTという みんなで自分の好きなフォントについて語ろう！な感じの企画記事を書かれていて 恐れ多くも、しんさんもよかったらどうですか？とお声をかけていただいたので せっかくなので書いてみたいと思います。 「Ricty」ってどんなフォントなのか プログラミング用フォントとして作られている「Ricty」は 全角の日本語部分にはゴシックフォントの「Migu 1M」 ラテン文字にはサンセリフの欧文フォント「Inconsolata」 が使われた、合成フォントです。 もちろんただくっつけたというわけではなく、 半角文字と全角文字の横幅の比が 1:2 に調整されていたりといった プログラミングに適したチューニングがされています。 気に入っている点 何と言っても、ソースが読みやすい・書きやすいのこれに尽きます。 理由として、全角のスペースがフォン
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FONTFREE
Type Project | タイププロジェクト
インストールするだけであらゆるソフトのテキストを美しく滑らかに描画「gdipp」NOT SUPPORTED