↵

Ask DN: How are you avoiding the flickering effect on web fonts?

over 6 years ago from Askar Hussain, Chief Everything Officer - ARSHTec

  • Matthew O'ConnorMatthew O'Connor, over 6 years ago

    100% this.

    My go to for body copy is now: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

    It is the most gracious way of falling back to cover most system fonts.

    3 points
    • Diego LafuenteDiego Lafuente, over 6 years ago

      I am doing a project using this, he, he. I love it. Everything loads son fast.

      0 points
    • Askar HussainAskar Hussain, over 6 years ago

      That's a lot of variations in terms of font varieties. I'm sure Segoe UI and Roboto vary a lot in terms of their widths and spacing and designing for both would be a challenge, and that's the reason I went with one web font (actually 2, one for titles and one for the content) for all the platforms.

      0 points
      • Matthew O'ConnorMatthew O'Connor, over 6 years ago

        So generally if I want to brand a simple page I would use one @fontface for titles and then use this fontstack for body. With the web being responsive it is hard to design so specifically with type (as you get outliers and other annoyances as you scale the page), so I just try to get it looking the best I can possibly on the system I'm on and then see if the design looks look acceptable on other systems as well (generally they do).

        0 points
    • Matthew Tso, over 6 years ago

      I was overjoyed when I found that github was using this strategy.

      0 points