Easier Font-Size Styling

[Forsaken]

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 ). 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.

Mike is there any possibility of font sizes being changed to the rem unit size (http://snook.ca/archives/html_and_css/font-size-with-rem)? And a way for font sizes to changed easily (either a style property or something for each sized used)?

Currently if you use a webfont that has a smaller x-height you will need to go through and change each and every font (especially at 11px which is the most commonly declared) and changing them all in bulk adds an additional ~430-450 lines of CSS.

What a nice suggestion. I would appreciate if this is suggested as a feature request in a separate thread.

I can't tell how much I wished something like this. We run Urdu forum which is a complex script langues and hugely based of ligatures. A particular style in Urdu typography mainly used in printed material is called Nastaleeq which does not expand horizontally when more characters are added in a single ligature, instead, it expands horizontally and vertically both in a slanted fashion. This nature forces the font designer to leave enough space above and below xhight so that generally used all glyphs fit nicely. This means that a 12px Nastaleeq font will be roughly as small as a 9px serif font. Our community members complained a lot about smaller font size on forum initially and we had to change the font size of every single field to make it look nicer. It was such a painful experience.

Along the same lines, I would appreciate if there is a hierarchy or major category of font-family sets (is there one already that I am not aware of?) so that if we want to style user generate content in one font, menu items in another we don't have to go to every single component on an atomic level. But if we prefer overwriting some specific components, we should be able to do that as well. I am referring to the same approach as it was taken for the colors. There are categories of colors and if those are changes, every component that inherits color property from there gets that change.

 

[John]

*bump

 

[vord]

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.

 

[Forsaken]

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.

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.

http://snook.ca/archives/html_and_css/font-size-with-rem

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.