i have h1 want fit entire width of viewport consists of 13 characters in monospaced font. after reading css-tricks article on viewport sized typography seems logically if want achieve have set h1's styles to:
h1 { font-size: 13vw; font-family: monospace; } this rendering bit of space left on (highlight text see white space):
(there image here don't have enough rep click here jsfiddle)
i have tried other sizes, font-size: 14vw; big, font-size: 13.99vw; seems right, strangely font-size: 13.999vw; still big?
can explain going on here? why each character of 13 character length string in monospaced font require more than (100/13)% of viewport width fit entire viewport width?
before begin i'm going i'm not going give workaround due issues i've raised in comments on stoyan dekov's answer. instead i'm going answer question of can explain going on here?
font-size != width
the problem here you're assuming font-size same thing width. isn't. css fonts module defines font-size as:
...the desired height of glyphs font.
this means font-size more comparable height width.
this isn't specific vw unit, either. if specify font-size in pixels you'll notice computed width not match font-size.
but depends on font-family you're using anyway, same paragraph continues say:
for scalable fonts, font-size scale factor applied em unit of font. (note glyphs may bleed outside em box.) non-scalable fonts, font-size converted absolute units , matched against declared font-size of font, using same absolute coordinate space both of matched values.
the key words here being scalable , non-scalable.
even if non-scalable font being used though, 13vw not reflect each character's width. never work vw, may work vh if aspect ratio of each individual character matched screen's aspect ratio.
Comments
Post a Comment