[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)
San Franciscoと日本語フォント
CSSでSan Franciscoフォントを指定しようとすると、特定の状況で日本語フォントがHiragino Kaku Gothic Interfaceというフォントに固定され、日本語フォントが指定できなくなる、という問題があります。たとえば以下のようなCSSの場合、日本語がヒラギノ角ゴではなくHiragino Kaku Gothic Interfaceになります。 body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif; } このHiragino Kaku Gothic Interface（正式名称不明）は、おそらくヒラギノ角ゴをSan Franciscoに調和するよう調整したものと思われます。一見ヒラギノ角ゴと見分けがつかないのですが、文字サイズがひとま
Better Web Type — A Free Web Typography Course
Design & Code Better Web Typography A free web typography course for designers and web developers by Matej Latin.
Implementing baseline rhythm in CSS
Achieve clean and consistent work without the need for designer input in the process.In this article, I’ll help you lay the foundation for the proper implementation of a vertical rhythm in CSS. Let’s start by clarifying what we won’t be working on.This concept has been present on the web for years. It introduces a common line height value (or its multiple) that’s used for all elements, including t
The Typekit Blog | Flexible typography with CSS locks
In canal and river navigation, a lock is a device used for raising and lowering vessels between stretches of water that are at different levels. That’s exactly what our formula accomplishes. Our formula is a CSS calc “lock”. Take molten leading as an example. The gates are our paragraph’s minimum and maximum widths, and the water level is our line-height. Below the bottom gate, our line-height is
Responsive And Fluid Typography With vh And vw Units — Smashing Magazine
Fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which you have a practically infinite number of screen sizes to support. Yet, for some reason, it is still used far less than responsive techniques In this article, Michael Riethmuller will teach you how to apply the techniques you know in a slightly different way. Careful attention to detail will e
More Meaningful Typography
This and other meaningful ratios rooted in geometry, music, nature, and history can be expressed as modular scales and put to work on the web. A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using the golden ratio, for example, we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arr
Sassline v2.0
Originally published May 25, 2014 I thought it was about time to get stuck back into developing Sassline, so over the last couple of weeks I’ve been spending my evenings playing with Sass 3.3 and seeing what it can do. Sass maps are certainly my favourite addition and turned out to be really useful for some things I planned to do. I didn’t know the best way to approach using them, as I obviously h
Aligning type to baseline the right way using SASS
Typography is an important part of web design nowadays and free services like Google Web Fonts or Adobe’s Typekit make custom fonts on the web a commodity. Let’s take it slow and start with a core principle of typography, vertical rhythm. Vertical rhythm is about spacing body text or, more generally, vertical stacked elements, in a consistent manner to give structure and hierarchy to your content.
Sassline
Baseline first. Set text on the web to a baseline grid with Sass & rems A starting point Sassline aims to spread better typography across the web. It can be used for prototyping, blogs or full website builds. It has recommended base typography styles and Sass mixins to work proportionally from the baseline grid using rems. Meticulous vertical rhythm Due to the way CSS handles text setting a baseli
The typographic scale
The typographic scale is the bedrock of modern typography, used for centuries to choose harmonious font sizes. But there are flaws in those historical values. This is the classic typographic scale, as recorded by Mr. Bringhurst in The Elements of Typographic Style: The classic typographic scale is a collection of font sizes that are in visual harmony. A typographer chooses sizes from a typographic
Seven rules for perfect Japanese typography - AQ - Digital product design studio in Tokyo and Paris
“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
Mojik
Mojikは、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリです。現在のところ、以下のパターンでの「アキ」の調整ができます。 連続する約物のアキ 行頭の始め括弧のアキ 和欧間のアキ デモ 「行頭の開き括弧や、『（連続した）括弧』」「句読点」、｛中点・［コロンなど：（約物のアキをコントロール。）；］，｝！ 【こんなふうに】？ 「行頭の開き括弧や、『（連続した）括弧』」「句読点」、｛中点・［コロンなど：（約物のアキをコントロール。）；］，｝！ 【こんなふうに】？ Windows 10（ウィンドウズ テン）は、マイクロソフトが開発およびリリースしている、Windowsシリーズに属するパーソナルコンピュータおよび8インチ以上のタブレット用のオペレーティングシステム（OS）である。コードネームは「Threshold（スレッショルド）」（ビルド10586まで）および
ローカルのフォント
少し前にこのウェブサイトがNeue HelveticaまたはCalibriになるように変更した。ウェブ・フォントを普通に使う機会が増えたその反動で、自分のウェブサイトは使いたくなくなる、といったところであまり深い理由は無い。ローカルのフォントだと表示の速さが3倍回しくらいに感じる。初期ページ表示までに特に引っかかりがないようなウェブページだと、コンマ1秒もないウェイトですら影響は大きい。 ウェブ・フォントの表示における技術的な問題は、解決することは難しいことがわかってきた。仕様が不十分なこともあるが、実装が依存している技術に左右され、そこはどうにもしようがなさそうな領域だからだ。HTTPS + HTTP/2でかなり改善する可能性はあるが、ウェブ・フォント用の専用ストレージがブラウザーに実装されない限りは完全には解決できないはずだ。 一方ローカルのフォントにも解決できない問題は多い。そのひと
コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA
コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。 ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc
CJK Type Blog | CJK Fonts, Character Sets & Encodings.
What in the world could オントロ (ontoro) and グスーム (gusūmu) possibly mean? (If you wait a few seconds, a hint will flash in the animated GIF above.) Continue reading… The UTC #160 meeting took place last week at Microsoft’s HQ in Redmond, Washington. For CJK enthusiasts, the big news is that the UTC accepted CJK Unified ideographs Extension G (aka IRG Working Set 2015), which includes 4,939 characters
How to Tune Typography Based on Characters Per Line
Published: January 3, 2012 Updated: October 13, 2019 In my research into Golden Ratio Typography, I focused primarily on the core geometric properties of text—font size, line height, and line width. But there’s another facet of text that nearly all of the existing research on typography deals with: It’s called characters per line (CPL). If you’ve ever read a study on typography, you’ve no doubt en
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Keeping RWD Simple & Sassy • James Steinbach
Using Musical Scales to Build Harmonious Typography