Minimum System Requirements
PHP Version: 7.1.0
MySQL Version: 5.5.8
MariaDB Version: 5.5.8
Recommended System Requirements
PHP Version: 7.2 or higher
MySQL Version: 8.0 or higher
MariaDB Version: 10.2+
We have made several changes to how Typography or Fonts work within vBulletin to resolve several different issues that continually occur over time. These issues include display issues with scaling, the ability to support relative font sizes, and inheritance of font sizes. In order to resolve these issues, we've added two new style variables, changed the body_font style variable and reconfigured how fonts work in our default styles.
As part of this change, we have converted the CSS in vBulletin to use REM units instead of pixel units. REM stands for Root EM. It is a relative unit of measurement and relies on the end-user's browser to make the final determination of font size. REM is Relative to the size of the root element. The root element in vBulletin is the tag. For backwards compatibility we have set this to a value of 10 pixels (62.5% of a browser's default 16 pixel font) so that it equals 10 pixels in most desktop browsers. This allows us to create different font sizes using modifiers to enlarge or shrink based on this starting point. Within the default vBulletin styles 1 REM equals 10 pixels, so 1.3 REM equals 13 pixels.
Why Use REM?
The primary reason is the ease of use when you don't know what type of device is being used to view vBulletin. The software has to work on everything from 4 inch mobile phones to 27 inch monitors. Someone may even use it on their 60 inch television. In addition to this, each browser and operating system can adjust the font size. Most Web Browsers use a 16 pixel font as their baseline. If we set vBulletin to use 1 REM as its baseline, then it will use the same 16 pixel font. If someone changes their baseline font to 24 pixels, vBulletin will automatically adjust when using REMs. It will not if we use pixels. To accommodate multiple display devices and baseline fonts, REM was the best choice.
How does this affect my current style?
It shouldn't change the values on your current style. However, as is the case with all customizations, we suggest you test the changes before going live.
What if I want to continue using pixels?
You still can. Style Variables still support this unit for fonts.
Style Variable Changes
A new style variable group was created for the base font variables. It is called "Global." You can find this at the top of the Style Variable Editor.
This new style variable allows you to set the base font size for the entire site. When using REM units, all other fonts are relative to this value. The default value of 62.5% sets the root font size to roughly 10 pixels when using the default font size set by your Browser.
global_text_font: This style variable is thenew name for the body_font style variable. All content text inherits from this style variable. The default value for this is 1.3 REM. This restores the 13 pixel font size used previously in our themes.
global_header_font: A new style variable used by headers throughout a vBulletin Site. This will allow you to easily use a different Header font in custom styles. The default size is 1.6 REM. This sets a base size of 16 pixels for headers.