Member Avatar for gubbasrikanth

Hi,

Generally we use font size in pixels @ CSS file like

font-size: 12px;

, but i have seen in some of css file font-size using "slash" like

font-size: 17px/12px

Which one correct, can you explain me

  • 3 Contributors
  • 2 Replies
  • 98 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: the slash belongs to the CSS font shorthand, not to the font-size property. ’s font-size: 17px/12px is not valid syntax and will be ignored by browsers (this matches what saw in IE). The slash is parsed only inside a full font declaration where a font-family follows; otherwise use separate font-size and line-height properties. See the formal shorthand rules on MDN for details: font (shorthand).

A few practical points that add to what suggested about relative units:

  • Prefer a scalable base (percent or rem) for the page root, then size text with rem or ems so users can resize easily.
  • Use a unitless line-height (for example 1.5) rather than a length. A unitless value multiplies the current font size and preserves consistent spacing for descendants.
  • Be careful with the font shorthand: it resets multiple font-related properties if you omit them. If you only want size and leading, setting font-size and line-height separately is safer.

Example pattern to adopt (modern, accessible):

html { font-size: 100%; }   /* browser default; user-resizable */
body { font-size: 1rem; line-height: 1.5; font-family: system-ui, sans-serif; }
h1   { font-size: clamp(1.5rem, 3vw, 2.25rem); }

Test in real browsers and with text zoom at 200% (WCAG requirement). If using font shorthand, remember the slash only works as part of that shorthand and that older browsers may behave inconsistently with badly formed declarations. For authoritative usage notes see MDN’s line-height doc as well: line-height.

Recommended Answers

All 2 Replies

Member Avatar for scrappedcola

I found the explanation for the 17px/12px in this forum .According to that forum it's supposed to be font-size/line-height, but the example i saw was

font: 1.2em/1.4 "Futura Book", Helvetica, Arial, sans-serif;

Personally I've not seen either before, though I have only been doing Web Dev for about 2 years now. I also tried the second in IE and it doesn't recognize it as valid.

Member Avatar for almostbob

pixels for font sizes ?? welcome to the 80s
each generation of monitor, pixels get smaller,
17inch monitors were 800 600px, 17inch monitors are 1900 1420
12px fonts are 3x smaller, approaching too small to be readable.
W3C reccommendations are, and have been for years, ems % for layout, px for images/animations/video.
scalar dimensions auto-adjust to ;;

  • screen resolution
  • user preference
  • disability
  • window size
  • device ability

and are generally considered a good idea

element { font: 1.2em/1.4em sans-serif; }

is acceptible shorthand for font-size: line-height: font-family:, understood by Opera9+ firefox2+ ie8+
does not work if required dimensions are omitted
font size / line-height is unpredictable if the line-height is less than the font-size, quirks modes are all crazy

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.