weixin_39637386
weixin_39637386
2020-12-30 03:29

[.5][startailcoon] Roboto instead of Roboto Condensed in tables?

Roboto Condensed

screen shot 2017-11-03 at 6 37 33 pm

Roboto

screen shot 2017-11-03 at 6 38 54 pm

These attributes will help with legibility as well:

font-family: Roboto; font-style: normal; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;

该提问来源于开源项目:bitshares/bitshares-ui

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

11条回答

  • weixin_39637386 weixin_39637386 3月前

    Let's try to find 1 font for both I think that Roboto will work for everything (not Roboto-Regular). Try with a 400 weight and go a few a point size smaller.

    点赞 评论 复制链接分享
  • weixin_39611031 weixin_39611031 3月前

    Take 3

    This time we use the Robot Light font, which is the only other font I can find on the font specifications.

    bitshares-dashboardfont-take2

    
    Font: Roboto Light
    
    Table Header
    font-weight: bold (instead of 600)
    font-size: 0.8rem (instead of 80%)
    
    Table Body
    font-weight: normal
    font-size: 0.85rem; (instead of 0.9rem)
    

    Take 4

    This is an alternative to Take 3, but with the first column of the tbody in bold. This is because the blue link to the asset can disappear in the blue background.

    bitshares-dashboard_font-take4

    点赞 评论 复制链接分享
  • weixin_39682477 weixin_39682477 3月前

    Let's try to find 1 font for both I think that Roboto will work for everything ...

    The Roboto Light is hard to see against the table background; why not go with Roboto as suggested?

    点赞 评论 复制链接分享
  • weixin_39611031 weixin_39611031 3月前

    There is no "Roboto" font as far as I can tell. https://www.fontsquirrel.com/fonts/roboto

    点赞 评论 复制链接分享
  • weixin_39637386 weixin_39637386 3月前

    I added in RobotoMedium and set most of the site to RobotoRegular which looks pretty good. It's thick enough. It does need some size tweaking in the tables. Maybe you can take a shot a that on branch 693-RobotoMedium. I'm not taking any pay for this issue.

    Agree re: Roboto Regular not Roboto.

    点赞 评论 复制链接分享
  • weixin_39637386 weixin_39637386 3月前

    screen shot 2017-11-07 at 5 14 23 pm

    点赞 评论 复制链接分享
  • weixin_39611031 weixin_39611031 3月前

    Idd, Roboto Regular is the base font as I understood as well. Good to get it all uniformed and in a nice font.

    点赞 评论 复制链接分享
  • weixin_39611031 weixin_39611031 3月前

    Today we use RobotRegular for the header of the table and RobotCondensed for the table body. I suggest we switch these around, example in Take 2 is what I like the most.

    Table Header uses a font-weight: 600 and font-size: 80% Table Body uses a font-weight: normal and font-size: 100%

    Here are a few samples.

    Original Today:

    Using:

    
    Table Header
     RobotoRegular {
      font-family: 'Roboto-Regular', arial, sans-serif;
      font-weight: normal;
      font-style: normal;   
    }
    
    Table Body
     RobotoCondensed {
      font-family: 'RobotoCondensed-Regular', arial, sans-serif;
      font-weight: normal;
      font-style: normal;
    }
    

    bitshares-dashboardfont-current

    Take 1

    Using the same header font, but body uses RobotRegular suggestion by wmbutler

    
    Table Header
     RobotoRegular {
      font-family: 'Roboto-Regular', arial, sans-serif;
      font-weight: normal;
      font-style: normal;   
    }
    
    Table Body
     RobotoRegular_1 {
      font-family: 'Robot-Regular', arial, sans-serif;
      font-weight: 300;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    

    bitshares-dashboard_font-take1

    Take 2

    Using Roboto Consedsed for the table header, and the suggested Robot Regular for the body.

    
    Table Header
     RobotoCondensed {
      font-family: 'RobotoCondensed-Regular', arial, sans-serif;
      font-weight: normal;
      font-style: normal;
    }
    
    Table Body
     RobotoRegular_1 {
      font-family: 'Robot-Regular', arial, sans-serif;
      font-weight: 300;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    

    bitshares-dashboard_font-take2

    点赞 评论 复制链接分享
  • weixin_39637386 weixin_39637386 3月前

    I'm not sold on it. Maybe with a font weight of 400. Maybe post a few samples. My main goal here is to move away from condensed because I think it has its own set of readability problems.

    点赞 评论 复制链接分享
  • weixin_39611031 weixin_39611031 3月前

    Agree, condensed font has its own issues as well and isn't the best choice. Bold or Condensed fonts shouldn't be used unless you're trying to highlight something particular. Normal text, like this, should be using something more of standard.

    I will post a few samples and we can go forward after that.

    点赞 评论 复制链接分享
  • weixin_39611031 weixin_39611031 3月前

    I think the second image is harder to read, but it may just be the screen capture.

    I can claim this task

    点赞 评论 复制链接分享