タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

CSSとフォントに関するnorandoのブックマーク (2)

  • 【CSS】見出しが変に改行しない!スマホのfont-size指定にvminを使ってみよう

    スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか? スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ

    【CSS】見出しが変に改行しない!スマホのfont-size指定にvminを使ってみよう
  • なぜWebブラウザの文字組みは汚いのか?元エディトリアルデザイナーが解決策を提案します! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。入社以前はエディトリアルデザイナー(新聞・雑誌・書籍などの出版物のデザイナー)として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね! 2017年2月27日追記:有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日語組版は約物(記号類)のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半

    なぜWebブラウザの文字組みは汚いのか?元エディトリアルデザイナーが解決策を提案します! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    norando
    norando 2017/02/21
    これだからタイポグラフィの世界には足を踏みだせない
  • 1