About

List items inherit font properties from parent elements by default, which causes inconsistent typography when your ul or ol sits inside containers with different font-family declarations. Failing to explicitly set li font properties leads to rendering discrepancies across browsers. Chrome applies computed inheritance differently than Firefox when nested list depth exceeds 3 levels. This tool generates isolated CSS rules targeting li elements directly. It covers font-family, font-size, font-weight, line-height, letter-spacing, color, and list-style-type in a single declaration block.

The tool assumes standard CSS box model behavior with box-sizing: border-box. Generated code targets li elements without specificity conflicts. For production use, scope the selector to your container class to avoid global overrides. Note: custom fonts require the font file to be loaded before the CSS rule takes effect. The preview uses Google Fonts loaded at runtime.

Formulas

The CSS rule generated follows the shorthand and longhand property pattern for list item typography:

li {
font-family: family, fallback;
font-size: sizepx;
font-weight: weight;
line-height: lh;
letter-spacing: lspx;
color: hex;
list-style-type: marker;
}

Where family is the primary font name, fallback is the generic family (sans-serif, serif, monospace). size is computed in px units. weight is a numeric value from 100 to 900 in increments of 100. lh (line-height) is a unitless ratio relative to font-size. ls is letter-spacing in px. hex is a six-character hexadecimal color value. marker is the CSS list-style-type keyword (disc, circle, square, decimal, lower-alpha, upper-roman, none).

Reference Data

Font Family	Category	Weights Available	Best For	Default Size
Inter	Sans-serif	100-900	UI, dashboards	16px
Roboto	Sans-serif	100-900	Android, Material UI	14px
Open Sans	Sans-serif	300-800	Body text, lists	16px
Lato	Sans-serif	100-900	Corporate, clean	16px
Montserrat	Sans-serif	100-900	Headings, bold lists	14px
Poppins	Sans-serif	100-900	Modern UI	16px
Source Sans 3	Sans-serif	200-900	Documentation	16px
Nunito	Sans-serif	200-900	Friendly UI	16px
Raleway	Sans-serif	100-900	Elegant layouts	14px
Work Sans	Sans-serif	100-900	Readability	16px
Playfair Display	Serif	400-900	Editorial lists	18px
Merriweather	Serif	300-900	Long-form reading	16px
Lora	Serif	400-700	Blog content	16px
PT Serif	Serif	400-700	Print-like documents	16px
Libre Baskerville	Serif	400-700	Classic typography	16px
Roboto Mono	Monospace	100-700	Code lists, technical	14px
Fira Code	Monospace	300-700	Developer docs	14px
JetBrains Mono	Monospace	100-800	IDE-like lists	14px
System UI	System	Varies	Native OS look	16px
Georgia	Serif (Web-safe)	400, 700	Fallback serif	16px

Frequently Asked Questions

CSS font-weight accepts values from 100 to 900. The mapping is: 100 = Thin, 200 = Extra Light, 300 = Light, 400 = Normal/Regular, 500 = Medium, 600 = Semi Bold, 700 = Bold, 800 = Extra Bold, 900 = Black. If a font file doesn't include a requested weight, the browser applies the nearest available weight using the font matching algorithm defined in CSS Fonts Module Level 4.

The generated CSS includes a generic fallback family (sans-serif, serif, or monospace) after the primary font name. If the Google Font CDN is unreachable, the browser renders the list items in the fallback family. For production, consider hosting font files locally with @font-face declarations to eliminate external dependency.

Yes. The list marker (disc, decimal, etc.) is vertically aligned relative to the first line box of the list item. A line-height value below 1.0 can cause the marker to clip or misalign. Values between 1.4 and 1.8 provide optimal readability and consistent marker positioning across browsers.

Prefix the li selector with your container class. For example, change li { ... } to .my-container li { ... }. This increases specificity and restricts the rule to lists inside that container only. The tool's CSS selector field allows you to specify a custom parent selector for this purpose.

Letter-spacing adds horizontal space between each character glyph. On a 10-character word with letter-spacing of 2px, the word becomes approximately 20px wider. This can cause text wrapping changes in fixed-width containers. Test with your longest list item text to verify no unintended line breaks occur.