フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
悶絶。フォントを猫で例えたら・・・ 25選:DDN JAPAN
DDN は 音楽 ・ 映像 に関する デジタル アート を中心に情報ミックスを配信中
Check these 64 Modern Brochure Examples [Brochure Design Inspiration]
Design Your Way is a brand owned by SBC Design Net SRL Str. Caminului 30, Bl D3, Sc A Bucharest, Romania Registration number RO32743054 But you’ll also find us on Blvd. Ion Mihalache 15-17 at Mindspace Victoriei contact@designyourway.net You see brochure design examples everywhere, airports, metro stations, on the street corner or, targeted, in a doctor’s office, a hotel or a restaurant. A lot of
![Check these 64 Modern Brochure Examples [Brochure Design Inspiration]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1fdae69bb366d5b83ace97191015f0068efe9871/height=288;version=1;width=512/https%3A%2F%2Fwww.designyourway.net%2Fblog%2Fwp-content%2Fuploads%2F2011%2F05%2Fdribbble-cocoon01.jpg)
アイコンをフォントで実現すると便利だと分かるサンプル:phpspot開発日誌
Icon Fonts are Awesome アイコンをフォントで実現すると便利だと分かるサンプル フォントで表現することで色の変更やドロップシャドウやサイズ変更はあとから自由にできますね。 画像編集ツールを使う必要もなく、あとから自由にカスタマイズできるというのはWEBデベロッパにとっては嬉しいです。 ドロップシャドウ。 カラー変更、リサイズも自由。 他にも、CSS3を使った回転やアニメーションなど何でもできそうなところです フォントはfont-faceで指定することでどんなフォントでも使えます。サンプルのフォントはこちら 関連エントリ ユニークなフリーフォント１０ WEBページに使えそうなアイコンっぽい図形フォント 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 とりあえず入れておくと使えそうな２０フォント
ベジェ曲線の数と「達筆度」と
neu.Note+ 向けに曲線のスムージングのアルゴリズムを開発中。特に文字の場合、オリジナルの字形を崩さずにどこまで自動できれいなスムージングをかけられるかが勝負になる。 左の図で、一番左のものがオリジナル。iPad上に指で書いたものだが、手書き特有の「よれ」が見れる。それぞれのストロークは３０〜４０個のベジェ曲線から構成されている。 これに開発中のアルゴリズムを適用したものが真ん中のもの。隣接するベジェ曲線を組み合わせることにより、ベジェ曲線の数を減らしたもの。あまり減らしすぎると字形が崩れるので、そのバランスが難しい。結果としては、それぞれのストロークに含まれるベジェ曲線は６〜１３個に減っている。「よれ」がなくなり、かなりきれいになった。 これをさらに手動で最適化したものが一番右のもの。各ストロークに含まれるベジェ曲線は３〜９だ。ここまで来ると、「達筆」と呼べる。 この場合、アプリを
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
チーズの名前か？フォント名か？を当てるゲームサイト「Cheese or Font」: DesignWorks Archive
デザイナーにとって、制作の際に欠かすことのできない"フォント"。よく使用するものの名前は覚えていても、無数に存在するフォントのすべてを暗記しておくことは、困難かもしれません。今回は、そんなフォントについてどれだけ知っているかを試すことができるサイト「Cheese or Font」を紹介したいと思います。 出題される問題に出てくる名前が「フォント名」か「チーズの名称」か？フォントとチーズの知識の腕試しができる、非常にユニークな発想のクイズサイトです。 詳しくは以下 英単語の名前がチーズ名かフォント名か、正解だと思う方をクリックすると、正しければ緑、不正解であれば赤のバーが表示されます。普段からフォント名を意識して覚えていないと、かなり難しいクイズだと思います。それぞれのフォントがどんなものなのか、画像などで確認できるともっとうれしいかも。 問題数も非常に豊富なので、デザインの仕事の息抜きなど
Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと
CBCNET > Dots & Lines > 弓場 太郎 > 5. ヒラギノUDについて聞いてみた@字游工房
2010年は電子書籍元年と言われる中、以前と比べて文字と画面表示の関係について色んな所で議論されるようになった。iPhoneやiPadと次々に新しいデバイスが発売され、画面上で奇麗に表示されるフォントの存在は欠かせない。折りしも、お馴染みのヒラギノにUDフォントシリーズが追加されたのも今年の出来事である。そのヒラギノUDについて今回運良く、大日本スクリーンの三橋洋一氏、字游工房の鳥海修氏、ヨコカクの岡澤慶秀氏、SHOTYPEの岡野邦彦氏に直接お話を聞かせて頂くことが出来た。 どのような経緯でヒラギノUD開発に至ったのですか？ 三橋氏 (以下敬称略): ヒラギノの新書体の企画を練っていた2007年の後半頃、UD (Universal Desgin) を冠した他社のフォントが世の中で徐々に使われ始めていました。でも、そもそも基本書体と呼ばれるカテゴリーの書体は、読みやすいように考えて作られてい
レトロ、ビンテージデザインに使いたいフリーフォント20個まとめ
最近のWebデザインのトレンドのひとつに、歴史を感じるビンテージな雰囲気を表現したものがあります。特にタイポグラフィーをうまく選択、利用することでよりレトロな印象をデザインに加えることができます。 海外デザインブログDesignzzzで、レトロデザインにりようしたいフリーフォントを２０個まとめたエントリー「２０ Eye-Catching Free Retro Style Fonts for Designers」が公開されていたので、今回はご紹介します。 フォントを使って適当な文字を入力するだけでも、印象がガラリと変えることができそうです。 詳細は以下から。 レトロ、ビンテージデザインに利用したいフリーフォントまとめ Velocette クラシックカーのロゴデザインのようなフリーデザインフォント。 ※ 個人利用可能 JF Fair Faces 西部劇などに出てきそうなビンテージテイストあふれ
HTML5動画に字幕が付けられるjQueryプラグイン「Cuepoint.js」:phpspot開発日誌
Cuepoint.js. A plugin for HTML5 video cuepoints and subtitles HTML5動画に字幕が付けられるjQueryプラグイン「Cuepoint.js」 ムービーの上に字幕を簡単なコードで付けることができちゃいます。 JavaScriptの連想配列で次のように定義して初期化するというシンプルな使い方が可能です。これはカンタンですね。 cuepoint.setTime(60); とかでムービーをスキップ出来たりもするみたい。 関連エントリ CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 MooTools用のHTML5動画プレイヤー「Moovie」 スキンが利用可能なHTML5動画プレイヤー実装jQueryプラグイン「FryPlayer」 HTML5な動画プレイヤー色々2011
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
12 Fun CSS Text Shadows You Can Copy and Paste
Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Ultimate Designer Toolkit
『Illustratorの文字スタイル（詳細編）』
前回のつづきです。 ●InDesignの文字スタイルのルール ※話がややこしくなるので、ここでは段落スタイルは無いものとします。 InDesignの文字スタイルは初期設定で「なし」が適用されます。手動で属性変更したものはそれがベース文字となります。 スタイル設定にはかなり多くの属性が設定できますが、設定部分以外の属性（空白部分）は無視され、ベース文字の属性がママイキになります。 これはかなり使い勝手が良く、例えば多種多様なフォントやサイズの文字に対してカラーを設定するような時、カラー設定をしたスタイルを1つ作るだけで済んでしまいます。 また、「基準スタイル」という概念があり、基準のスタイルを元に一部の属性だけを変更したバリエーションの作成も可能です。 図にするとこんな感じでしょうか。 ●Illustratorの文字スタイルのルール ※こちらも話がややこしくなるので、段落スタイルは無いものと
クマでも分かるトレースAAの作り方【アスキーアート作成入門】
趣旨：最低限のAA（アスキーアート）知識と最大限の手順説明でトレースAAの作成法を説明する（ものにしたい予定）。 Last Update:2018/9/24 リンク周りを修正 ∩＿＿＿∩ | ノ ヽ こういう仕組みになっていたクマか──！！ / ● ● | | ( _●_) ミ ∩＿＿＿∩ 彡､ |∪| ､｀＼ | ノ ヽ / ＿＿ ヽノ /´> ) / ● ● | AAって意外と簡単だったクマ──！！ (＿＿＿） / (_／ | ( _●_) ミ | / 彡､ |∪| ､｀＼ | ／＼ ＼ / ＿＿ ヽノ /´> ) | / ) ) (＿＿＿） / (_／ ∪ （ ＼
立体的に造形されたタイポグラフィ Chris LaBrooy「3D Type Collection」: DesignWorks Archive
デザインの現場では、さまざまなデザインソフトを利用し立体的なタイポグラフィを作成していると思いますが、実際にリアルで作り上げるのはとても難しいもの。そんな中今回紹介するのは、現実に立体的なタイポグラフィを完成させた作品「3D Type Collection」です。 イギリス在住のデザイナー・Chris LaBrooy氏によって制作された「3D Type Collection」は、フォントと素材とが見事にマッチした作品集となっています。 詳しくは以下 フォントが建物風に見立てられ、まるでそこに町が存在しているかのような空間が表現されている作品も。通常のタイポグラフィとは全く異なる存在感を感じることができます。それぞれの作品にそれぞれ別の素材を使うことで、フォントのイメージを崩すことのない独特の世界観が生まれていますね。クオリティの高さにも非常に強い感動を覚えます。 今回紹介した作品以外にも作
クールな名刺作成チュートリアル３３:phpspot開発日誌
33 Tutorials to Design Your Own Business Cards | Vandelay Design Blog クールな名刺作成チュートリアル３３ 次のようなクールな名刺を作成するチュートリアルが特集されています。 デザイナーとして活躍されている方は名刺に書いてある肩書きよりも、名刺のデザインでアピールしたほうがよいのかもしれませんね。 あとで見返すこともあったりしますがインパクトのあるものはその時にも注視してしまうものです。 関連エントリ オシャレな名刺を一発作成できる５つの名刺用Photoshopテンプレート プリントして使えるクールな名刺作成Photoshopチュートリアル スーパークールな名刺デザイン３６ 裏表使えるクールな名刺のPhotoshopテンプレート５
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2011年総まとめ：商用利用も無料、英語の高品質なフリーフォント集
Snow Leopardで消えた「滑らかな文字のスタイル」を設定する方法 | ライフハッカー・ジャパン
Create a Steam Powered Typographic Treatment - Part I | Envato Tuts+
