デザイナーに次に知ってほしい文字組み初級 – 503DESIGN
BLOG / 2018.09.18 2014年に「デザイナーにまず知ってほしい文字組み入門」という初心者向けエントリーをあげて以来、早数年が経ちました。 その月日の中で「絶対フォント感」という言葉が流行したり、「フォント」あるいは「文字組み」という単語が（より一層）脚光を浴び、メディアコンテンツとして取り上げられることが多くなったなと感じます。 例えば2017年にはTBSさんの「マツコの知らない世界」でも取り上げられ、マニアには垂涎の的の「フォントかるた」という大人気商品も生まれたりしています。 さらに、文字組みに関する記事も爆発的に増えていると感じますが、手法が先行した記事が多いことに少し私は疑問を持っています。 特に「なぜ文字をツメることが“大”前提」なのでしょうか？ この記事は、上記の“なぜ”の部分を少し意識してもらい、Adobe Illustratorをメインで使用するデザイナーが
三点リーダーの位置をOpenTypeフォントでいい感じにする…… - cockscomblog?
僕は三点リーダー「…」が好きで、ついつい使ってしまいます……。この三点リーダーですが、日本語では（仮想ボディの）中央に並び、欧文ではベースライン上に並べるのが一般的です。一方で昨今のWeb媒体などでは、日本語の文章であっても三点リーダーがベースライン上に並んでいる場合も多くみられます。どちらかといえばベースライン上に並んでいるのに慣れてしまった諸氏も少なくないのではないでしょうか……。 基本的に、コンピュータ上で三点リーダーがどの位置に表示されるかは、フォントによって決まっています。三点リーダーのUnicodeにおける名前は “HORIZONTAL ELLIPSIS” といって、U+2026 のコードポイントに割り当てられています。このコードポイントに対応するグリフがどのようにデザインされているかが問題になります*1。実際に複数のフォントを見比べてみるとわかりますが、“HORIZONTAL
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門Webメディアのリニューアルで使った手法 | THE BAKE MAGAZINE
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法 こんにちは、BAKEのデザイナー井手口です。 前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。 リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の
type.world
Goodbye Type.World I don’t know if anyone saw this coming before me, but I’m shutting down the Type.World Font Installation Technology project. It was a great experience, and I learned a lot about web technology as well as the independent type community and its willingness to collaborate in favour of improving font customers’ user experiences. I hope you all understand that the project can’t be su
Mojik
Mojikという、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリを公開しました。いまのところ、以下のパターンでの「アキ」を調整できます。 連続する約物のアキ 行頭の始め括弧のアキ 欧文間のアキ Mojik.compose()メソッドの引数にCSSセレクターを渡すと、マッチする要素から上記に該当する箇所を検出し、それぞれマークアップが挿入されるので、CSSでアキ量を調整します。以下のページに実際に動いているデモがあるので、ぜひ見てみてください。 Mojikデモ ウェブページの本文やタイトルなどで使われることを想定しているので、HTMLタグがあっても問題なく動作することは必須条件でした。基本的に、まずHTML文字列をテキストとタグに分けて、正規表現でテキストの検索を繰り返す、という方法を採っています。ここらへんはkotarok/jQuery.waokonなど
Type Terms
Welcome to Type Terms! The animated typographic cheat sheet. If you are new to typography or here to refresh your memory, then Type Terms is the perfect tool for you. Click the big blue button below and let's begin. LET'S LEARN TYPE TERMS FACEBOOK TWITTER Embed Type Terms onto your website LEARN TYPOGRAPHIC TERMINOLOGY WITH TYPE TERMS Type Terms is the perfect tool for designers to learn the basic
Typography for User Interfaces | Viljami Salminen
Typography for User InterfacesJun 21st, 2016Back in 2004, when I had just started my career, sIFR was the hottest thing out there. It was developed by Shaun Inman and it embedded custom fonts in a small Flash movie, which could be utilized with a little bit of JavaScript and CSS. At the time, it was basically the only way to use custom fonts in browsers like Firefox or Safari. The fact that this t
約物合字Webフォント「YakuLiga」 – ものかの
先日、このブログで約物Webフォントを使っていることに少しだけ言及しましたが、ここでそのフォントを公開することにしました。 YakuLiga （ヤクリガ） >> YakuLiga_1004.zip (70KB) [2016.5.25] 特定の約物が並ぶと「アキを調整した合字グリフ」を表示します。 字形はすべて私が描き起こしました。ライセンスはとくに設定しません。気軽に自由に利用できます。改変も可能。どんどん改変してください。 ただし、お願いしたい点が２つあります。 ここで公開しているフォントそのものを販売しないでください。改変したものを販売するのは構いません。 改変したフォントには別の違うフォント名を付けてください。 Glyphs v2.3のソースファイルも同梱しています。なるべくv2.3以降をお使いください。 このフォントはGlyphsユーザを増やすための販促フォントでもあり（勝手に無償
ウェブ組版は行間が基準なのではという話 - note
以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。 ＞ remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。 行送り= line-height、行間= line-gapで、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっ
CSS での OpenType 機能の構文
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
jquery.kerning.js
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
CSS SANS
CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン
Typesettings.css | Minimal CSS Framework
Docs Customize Showcase Github Download Basic Usage Include typesettings.css in the HTML file’s <head> section: <head> <link rel="stylesheet" href="[path]/typesettings.css"> </head> 📣: If you are using typesettings.css as is, don’t combine it with other frameworks. Also, basic resets are included, there is no need to use Normalize.css or Sanitize.css. Add data-typesettings attribute to the direct
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントの選び方・使い方
Furi
Aerial Bold Typewriter
TYPEWRITING | Eddie Wen
Registered features, a-e (OpenType 1.9.1) - Typography
約物Webフォント – ものかの
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
