Changing Default Font Size

By default, Oracle JET includes themes such as Alta that set a default font size on the root (html) element. This font size is optimized for visibility and touchability on mobile devices, but you can customize the size as needed for your application.

Topics

Changing Default Font Size Across the Application

The browser's font size is defined in the Sass $rootFontSize variable and included in the generated CSS html class. You can use Sass to change the variable or override the generated CSS.

To change the browser default font size across your application, do one of the following:

In a custom Sass settings file, modify the Sass $rootFontSize variable, and regenerate the CSS.

For details about customizing Oracle JET themes, see Customizing Themes Using the Tooling.
In your application-specific CSS, override the font-size setting for the html class.
For example, to set the browser's default font size to 12 pixels, add the following to your application-specific CSS:
```
html {
  font-size: 12px;
}
```

Changing Default Font Size Based on Device Type

You can change the default font size based on device type by detecting the device type used to access the browser and then setting the appropriate style on the html element.

To change the browser default font size based the user’s device type:

Use whatever means you like to detect that the browser is running on the specified device.

For example, you may want to change the browser’s default font size on a desktop device. Use your own code or a third party tool to detect the device type.
When your application detects that the user is accessing the browser with the specified device, on the html element in your markup, set style="font-size: xxpx". Substitute the desired pixel size for xx.
For example, to set the font size to 12 pixels when the application detects the specified device, add logic to your application to add the highlighted code to your markup.
```
<html style="font-size: 12px">
   ... contents omitted
</html>
```
Note:
Be sure to perform this step before initializing components since some Oracle JET components measure themselves.