日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。 私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。 『たてよこWebアワード2017』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。 縦
“Our product has traction in Japan! What now?” If you find yourself asking this question, you’re in good company. Japan is an amazing place to have a following, as many startups have discovered. With 115 million internet users and a sophisticated consumer culture, anything is possible here. Twitter, for example, who invested early in Japan-specific research, content, product and marketing, grew fr
Typescale Save CSS Go Pro Login Typescale New Board My Boards Bookmarks Likes Explore Login Go Pro Support Terms Privacy © Typescale Board Settings Responsive Body size Scale Responsive Min-width Body size Scale Body Font Weight Line-height Letter-spacing Color Background Headings Font Weight Line-height Letter-spacing Color
Posted on July 31, 2014. Filed under Tutorials, Typography. Tags: css, em, leading, line-height, measure, measurements, pica, point, relative, responsive, typography, units, webdesign. With the implementation of the em unit in CSS and it’s handy use in responsive webdesign, all of a sudden it got famous outside the typographic realm. 1. The Simple Answer An em is the same size as the font’s point
LetterFx jQuery Plugin A jQuery plugin to apply animated visual effects to text - letters, words & custom patterns. LetterFx works by temporarily injecting markup into the text of an $("element") and sequentially adding & removing transition-based CSS classes. Please use responsibly. demo: 1 2 3 4 5 6 7
Bases are a scale’s root numbers. For example, the size at which your body text typeface looks best. More → Ratios are multiplied by the base to produce a scale of numbers that is proportionally related. If you know what size you want a heading to be, type the target value @ position on the scale like 36@5 More → How do I use this? Use a scale like you would use a ruler. Many people set heading ty
航空機のコックピット内には、緊急時対応マニュアルなど多くの書類が置かれていますが、マニュアルが読みにくく緊急時に対応できない、夜間飛行時に全く読めないなどの事例が1980年代に多数発生しました。そこで、NASAは読みやすい書類を書くために過去の文献などを徹底的に調査して、コックピットやフライトデッキのマニュアルに使用するタイポグラフィのマニュアルを作成。調査書には、読みやすいタイポグラフィを作るためのルールがまとめられており、現在のウェブデザインにも活用できる内容になっています。 (PDFファイル) ON THE TYPOGRAPHY OF FLIGHT DECK DOCUMENTATION - Flight-Deck_Documentation.pdf http://ti.arc.nasa.gov/m/profile/adegani/Flight-Deck_Documentation.p
26 Comments Thanks, really great stuff. Especially “dekar and “Code” are awesome! Greets from Germany These are some really interesting fonts here, It’s usually really hard to find something different on the usual free font sites so its nice to find a nice collection on this post. I will definitely be downloading a few of them for future projects. Especially Dekar and The Lobster Font. There reall
Julian Hansen is a graphic designer Projects Zimmer So you need a typeface? CPH:DOX Iværksætter til jeg dør Christianshavns Lokaludvalg Frankenstein Who? About me Contact Mail: hello [at] julianhansen.com So you need a typeface? So you need a typeface is an alternative way on how to choose fonts (or just be inspired) for a specific project, not just by browsing through the pages of FontBook. The
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Have you seen David Desandro’s site? It’s pretty slick. His footer is especially fun: The technique is clever in it’s simplicity. Let’s take a look. Multiple Text Shadows The major empowering concept here is the CSS3 property text-shadow. Typically it’s like this: .shadow { text-shadow: 2px
こういう質問をいただきました。 「『〜という書体を元にした』や『〜に似た』というフォントを作る場合に、それは著作権の問題等に関係するのでしょうか?」 これも、図を出したほうが分かりやすいので記事として載せます。 まず、「〜に似た」のほうからいきましょう。書体デザインの業界で不思議なのは、文字のデザインをかりにそのまま盗用しても、名前さえ違っていればいちおう法律的には問題ない、ということです。名前は商標登録できるけど、字の形はできないと。(ドイツには書体デザインの登録制度があります) でも、書体の名前だけすげ替えて売るとか配布するというのは、モラル的にどうなのか、という点で騒がれたり、メーカーからクレームが行ったりしますけどね。ライノタイプ社には、そういう盗用デザインの検索専門の担当者がいます。 ちょっと前に騒がれた(というか多くのデザイナーにすっごく嫌われた)Arial (アリアル)は、ラ
See also Webtypography and SXSW lecture by Richard Rutter. Calculator by Geoffrey Grosenbach. In use at PeepCode Screencasts (see also explanation). p.small text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae nulla. Donec elementum sagittis nulla. Nullam eget pede sed metus accumsan faucibus. Sed tincidunt, purus quis auctor vestibulum, quam purus sollicitudin sapien, id ma
What is P+C DTR? PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger. P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS. Sick of using the same three fonts? Tired of editing heading images in PhotoSh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く