Viewport Sized Typography | CSS-Tricks


143 bookmarks. First posted by knilob may 2012.


CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping i
css  webdesign  typography 
december 2014 by zxaos
Which is basically what we do anyway, right?

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
css3  css  mobile-development 
december 2014 by hellsten
Automatically size your fonts according to how many characters you want on a line.
typography  css 
december 2014 by dagh
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping in Chrome 20 (canary at the time of this writing). And not behind a flag, it just works. via Pocket
Pocket  code  css  work 
december 2014 by bfulop
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it’s shipping in…
chrome  css  typography  css3  viewport  responsive  webdesign  web  webdev 
november 2014 by evilkarlothian
any ideas on support for the vw/vh CSS size units?
from twitter
november 2014 by peelman
Yes, Chris wrote this in 2012, but I'm just now finding time to play with it. The `vw` and `vh` sizing meaurements in CSS allow elements to size based on viewport dimensions. Played with it a bit and it's really cool in Chrome and Safari. I should probably start testing stuff in Firefox again...
css  webdesign  typography 
november 2014 by ttscoff
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping i
webdesign  typography  css  responsive 
october 2014 by jayfree
Thiiiiiiis is useful
css  programming  web 
september 2014 by mambocab
. should have never mentioned the new viewport-sized units in css - using these for evil pronto
from twitter
july 2014 by tmcw
웹 사이트의 크기에 따라서 폰트의 크기를 조절할 수 있어서 가독성을 최대화 할 수 있다.
dev-web  explicit  css  wordpress  codex  typography  font 
april 2014 by dildwild
I'd missed this before, but if using vw or vh units, then you'll need to trigger a re-paint if the window resizes:
from twitter_favs
november 2013 by jordanmoore
You'll at least want to provide a fallback:

h1 {
font-size: 36px; /* Some tweener fallback that doesn't look awful */
font-size: 5.4vw;
}
Testing for support
chrome  css  css3  typography 
august 2013 by usermac
WooHoo looking forward to using these - RT : have you heard of vh & vw units yet?
from twitter
august 2013 by kaelifa
Using the CSS3 viewport relative sizing units (vw, vh
attributes  elements  forms  html5  input  from instapaper
april 2013 by robbyedwards
Updated Viewport Sized Typography http://t.co/YhpZPv8KJW

Firefox 19+ and Safari 6+ supports now. Chrome/Safari still need repaint triggers.
from instapaper
april 2013 by oli
Updated Viewport Sized Typography

Firefox 19+ and Safari 6+ supports now. Chrome/Safari still need repaint triggers.
from twitter_favs
march 2013 by maccoy
Reminding myself how ace this is; Viewport Sized Typography by
from twitter
february 2013 by jt
Viewport Sized Typography: CSS vw, vh & vmin units for responsive font sizing
from twitter_favs
january 2013 by andydavies
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin.
CSS  web_design 
january 2013 by decembr14
Responsive Typography with CSS3 for sizing things relative to the current viewport size
Webdesign  Typo  Responsive  CSS3 
october 2012 by Moghol
new font size unit based on viewport size
typography  css 
october 2012 by squiddisco
Finally in CSS3: how to specify sizes in terms of viewport size (height & width): use vh and vw as measurement units. Supported in Chrome 19+.

Took them ~15 years (CSS was first released in 1996). Idiots.
height  width  viewport  screen  relative  CSS  layout  design  web  webdesign  responsive  vw  vh 
july 2012 by dandv
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping in Chrome 20 (canary at the time of this…
css  css3  typography  Web  from readability
june 2012 by lukelux
Have you seen this? There's a fix for Chrome 20:
from twitter
may 2012 by riklomas
viewport에 따라 글자 사이즈가 동적으로 변하는게 신기
하지만 브라우저가 지원하지 않으면 무용지물인 기능이긴 한데 브라우저 판올림되면 지원이 쉽게 될듯
css3  typography  chrome 
may 2012 by ncrash
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping in Chrome 20 (canary at the time of this writing). And not behind a flag, it just works. Production usage isn't quite there, but it will be soon enough.
css3  typography  css  webdesign 
may 2012 by dlkinney
Viewport sized typography:
from twitter_favs
may 2012 by marks