[Sass][Design]remを使ったVertical Rhythm
前回、【Sass/SCSS】Modular Scaleを使ったフォントサイズの指定でModular ScaleをSass/SCSSで使う方法について紹介しました。今回はCSS3のremを使ってVertical Rhythmを実現する方法について紹介します。remは対象ブラウザがIE8以上であることが条件になりますが、IE8自体非対象でも良いでしょう。 Example Vertical Rhythmは以外と簡単です。実際にFunctionを作成して実装してみたサンプルがこちら。GRIDLOVERを参考に作成しました。 Function ベースラインを保持ておく変数（$base-line-height: <line-height>;）と行の高さを返すシンプルなfunction（vr([$lines = 1])）を用意します。functionは$base-line-heightと引数の$line
![[Sass][Design]remを使ったVertical Rhythm](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
デザイナーは文字詰めに命をかけよう ～和文と欧文のフォーマットの違いから考える～｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。梅雨入りしたのかしてないのか曖昧な天気が続きますが、体調は崩してませんか？比較的嫌われやすい時期ではありますが、私は雨は好きなほうです。「小夜時雨」「涙雨」「白雨」等、雨を含んだ日本語は美しいですよね。 さて、先週は明朝体とゴシック体について書きましたが、今週は和文書体と欧文書体について書こうと思います。 フォントには日本語の漢字、ひらがな、カタカナで構成された「和文書体」と、アルファベットで構成された「欧文書体」があります。二つの書体は、文字の形状の違いから文字のフォーマットも違います。 それぞれのフォーマットから、文字間隔の詰め方について考えてみましょう。 和文書体のフォーマット 和文書体は【仮想ボディ】という正方形のフォーマット内で文字が収まるようにデザインされています。実際は仮想ボディの枠いっぱいではなく、ひとまわり小さい枠（字面枠）の中に文字が作られます。 仮想ボディ
文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話！ とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状… とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 15
テキストをかっこよく魅せるPhotoshopのチュートリアルの紹介です。 Make yourself an Amazing Typographic Portrait An Interesting Gr
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
無料かつ会員登録不要で自分の手書きフォントが作れるという『fontcapture』を試してみた件 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
タイポグラフィの動画がかっこよすぎて鳥肌たった
Webdesigner Depotでエントリーされたクリエイティブなタイポグラフィ動画が かなりかっこよくて鳥肌立ったのでご紹介したいと思います。 ちょっと重いのでリンク先で見た方が良いかも。。 Stop and Think – Talking Head STOPandTHINK – Talking Head from Jr.canest on Vimeo. D-Tronics from Manny Garza Kinetic Typography – D-Tronics from Manny Garza on Vimeo. Citizen Cope – Let the drummer kick it Video – Citizen Cope Let the drummer kick it ( After Effects Composition ) from Bogdan Macovici
「似た」フォントって | デザインの現場 小林章の「タイプディレクターの眼」
こういう質問をいただきました。 「『〜という書体を元にした』や『〜に似た』というフォントを作る場合に、それは著作権の問題等に関係するのでしょうか？」 これも、図を出したほうが分かりやすいので記事として載せます。 まず、「〜に似た」のほうからいきましょう。書体デザインの業界で不思議なのは、文字のデザインをかりにそのまま盗用しても、名前さえ違っていればいちおう法律的には問題ない、ということです。名前は商標登録できるけど、字の形はできないと。（ドイツには書体デザインの登録制度があります） でも、書体の名前だけすげ替えて売るとか配布するというのは、モラル的にどうなのか、という点で騒がれたり、メーカーからクレームが行ったりしますけどね。ライノタイプ社には、そういう盗用デザインの検索専門の担当者がいます。 ちょっと前に騒がれた（というか多くのデザイナーにすっごく嫌われた）Arial （アリアル）は、ラ
Typetester Compare fonts for the screen
Design Beautiful Typography One of the most popular applications for web designers is now a full-blown typography editor. Typetester classic that is known and loved by all is still online! Test and compare more than 2800 web fonts. The new Typetester is a WYSIWYG web typography editor. Create, export and share unlimited projects.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）