1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Easier Font-Size Styling

Discussion in 'XenForo Suggestions' started by Forsaken, May 24, 2013.

  1. Forsaken

    Forsaken Well-Known Member

    Making this thread at the request of ibnesayeed as he made a good point that about making this a separate suggestion so that it won't get buried in the HYS thread. Original quotes are at the bottom of this post, and a file is attached to show just how many font-size declarations would be needed (with a few add-ons installed).

    Currently changing font-sizes is a minor nightmare when designing or modifying a style for XenForo. This is mostly due to there being 27 different font-sizes used, ~350-400 declarations (442 with a few add-ons installed) with ~165 of those being just declarations for 11px.

    This makes styling exhaustive as many of these declarations have no associated style property and would require adding them manually which is time intensive and adds overhead that isn't necessary. It also makes it a bit more limiting to people who are not designers as they would have to track down each declaration if they wish to make changes to sizes, something that is commonly done especially with sites catering to older crowds or people with seeing disabilities

    ibnesayeed also makes a good argument in regards to script languages such as Urdu that have typography that work differently from latin or cyrillic alphabets which will require extensive changes to the font-sizes that will be illegible at the sizes that are used currently for XenForo.

    As such I'd like to see XenForo move to a new size unit introduced with CSS3 called rem (root em: http://snook.ca/archives/html_and_css/font-size-with-rem, http://viljamis.com/blog/2012/typography/) which is relative to the size specified in the html declaration. In the case of browsers not supporting the rem unit a fallback size can be declared, though all modern browsers currently support it (Including IE9).

    I would also like to see style properties added that would allow for easier editing of font-sizes. Rather than declaring font-sizes a @stylePropert would be used to replace it, or whatever better solution that you come up with (I don't doubt there are better solutions :p). This would let designers and average administrators to modify their fonts much quicker than is currently possible.

    This will also fix the issues with text resizing that some people have had complaints about in the past, as well as allow for implementation of responsive typography which will allow for a better experience over multiple screen sizes and resolutions.

    Attached Files:

    Amin Sabet, ibrian, empire and 19 others like this.
  2. John

    John Well-Known Member

    *bump :)
    Adam Howard likes this.
  3. vord

    vord Member

    A post in support and a bit of extra info:

    I can't believe how difficult it is just to nudge up font size in these days of css.

    It is not even easy to go through the css output, find font sizes, and change them to equivalent em for an additional stylesheet so that the font size can then be changed in the body attribute. There are several font sizes that are declared more than once in the css hierarchy so replacing them all with em makes some fonts end up much smaller than expected.

    Figuring out the hierarchies is a nightmare. It is much quicker to go through style properties and templates and change them one by one if you want font size a bit bigger. This will a day of your time.

    Ideally font sizes would be declared in em in xenforo. This would allow anyone to increase the text size just by putting 110% in the body css.

    This will break the templates if someone specifies 200% in the body css, and while there are ways around this (specifying other dimensions in em) it looks safe to about 150% which should be enough for most.

    In the meantime anyone wanting a quick small increase in font sizes can change the font family in style properties/general/body from "'Trebuchet MS', Helvetica, Arial, sans-serif" to "'Arial, Helvetica, sans-serif" which makes a lot of fonts look slightly bigger.
    Adam Howard likes this.
  4. Forsaken

    Forsaken Well-Known Member

    CSS3 added the rem unit which is an updated implementation of em which is based off the root declaration, rather than the parent declaration. This fixes a compounding issue that was constant with using em.


    I'm going to be making a small add-on to do mass font changes, but I don't intend to support every add-on (only ones I use). Chances are this won't make it because it's an edge case that most people don't get, and there isn't much interest by the developers from what I saw.
    Adam Howard and vord like this.

Share This Page