Make Windows code fonts more legible.

Issue #15059 resolved
Jesse Yowell
staff created an issue

Current font is illegible on some Windows machines. Suggest changing this to:

ak-editor-bitbucket .code, code, pre {
font-family: : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 14px;
}

Comments (10)

  1. javl

    I believe I'm having the same problem, so to expand: this is not just a problem on Windows, but also on Linux (and maybe older Macs?). It seems the Bitbucket website is being designed and developed on a retina mac? As the current font is way too thin to be readable on a regular monitor. I'm surprised to find only this single post about this problem. The attached images show what the website looks like on my Linux (Debian Jessie) device, in the latest Firefox and Chrome. Even while writing this my text is littered with holes and missing characters because of this font. I really can't imagine others not having this problem. As it is now, the site is unusable on Firefox and barely usable on Chrome.

    Firefox

    firefox.png

    Chrome

    chrome.png

  2. Alastair Wilkes

    @javl - this particular issue concerns code fonts on Windows. In contrast, your screenshots look like issues with the regular sans-serif font, not the code font, so it's probably a different issue. Regardless, let's take a look!

    I think this is a font-stack (and possibly letter-spacing issue), not a non-retina issue (unless you've confirmed that it works on a retina screen...?)

    Our default font stack for non-code is:

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif
    

    If your system doesn't have any of these fonts, it's possible that your browser is falling back to your system's default sans-serif font, which perhaps isn't playing nice with the letter-spacing: -.005em we also apply.

    To help us troubleshoot the issue, can you try:

    1. open dev tools and temporarily disable letter-spacing: -.005em
    2. temporarily switching your system default sans-serif font

    If either of these resolve the issue, that will inform how we can resolve this. Thanks!

  3. javl

    I thought the problem was with the website as I've never had this problem with other websites (including with the fallback sans-serif) but after taken a closer look, it seems I had an odd / modified version of Fira Sans installed. So yeah, just my stupid fault... Sorry for the noise...

  4. Log in to comment