seen from Germany
seen from Bosnia & Herzegovina
seen from China
seen from Australia
seen from Türkiye
seen from China
seen from Germany
seen from United States
seen from Austria
seen from China
seen from United States
seen from Saudi Arabia
seen from Serbia
seen from Italy
seen from United Kingdom
seen from Italy
seen from South Korea
seen from United States
seen from China
seen from United States
line-heightのハーフ・レディング (上下の余白)を打ち消す`calc((1em - 1lh) / 2)`はグローバルスコープのCSS変数で定義しておくと便利です。
コーダーやデザイナーあるあるですが、デザイン通りの余白を作るときに結構手間になるのがここのline-height。 line-heightを指定するとテキストの領域内に余白が作られるため、デザインで例えば余白20pxだったときにline-height:1.5を指定してる状態でmargin-top;20pxを指定すると文字の上の余白は24px位になっていると思う。 これが調整がまぁめんどいめんどい。
これを指定しておくとそういうのを自動的にやってくれるからかなり便利！ rootに入れておくかそれ用のクラス名を追加しておき、使用したいときに指定するのがいいかも。
最近のcssの伸びしろがスゴイ・・・
読みやすい文字と行間の大きさを科学的に検証しました。それをYahoo!ニュースに適用した結果どの様なビジネス貢献が見られたかご紹介します。
yahoo的文字サイズと行間の理想について。 ちゃんとリサーチしてる分他の記事に比べて信憑性のある結果となっていると思う。
つらつらと実験と結果が書かれているが、結果は上記のとおりだ。
17px × 1.6を中心とした周辺の組み合わせが視覚的にバランスが良く、心理的負荷を下げたい場合はそれより文字をやや大きく、もしくは行間をやや広くすると効果的
ということらしい。
自分は今16pxの1.6が一番見やすいと思って使っていたが、これからは17pxの1.6をベースに作って行こうと思った。
今後忘れないようにメモしておく。
Centrar horizontal y verticalmente con line-height
Centrar horizontal y verticalmente con line-height
Os dejamos un ejm de como centrar tanto horizontal como verticalmente utilizando la propiedad line-height con unas pocas líneas de código. El código es el siguiente: <!DOCTYPE html> <html lang="es"> <head> <style> .centrado { line-height: 300px; height: 300px; border: 1pxsolidblue; text-align: center; width: 800px; margin: auto; } .centrado p { line-height: 1.5; display:…
View On WordPress
Have you ever needed to create a type scale following an 8 point baseline grid, or really any grid, and had to spend extra time figuring out what should be the right line-height for every text size in the scale? No worries! The line-height calculates the exact number so it always fits the baseline grid!
The following is a guest post by Jesús Ricarte, a front-end developer and volunteer translator for A List Apart in Spanish. I’m very glad to have him writi...
