Viewport Sized Typography | CSS-Tricks


138 bookmarks. First posted by knilob may 2012.


Automatically size your fonts according to how many characters you want on a line.
typography  css 
7 days ago 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 
15 days ago 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 
23 days ago by evilkarlothian
any ideas on support for the vw/vh CSS size units?
from twitter
23 days ago 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 
27 days ago 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 
8 weeks ago by jayfree
Thiiiiiiis is useful
css  programming  web 
11 weeks ago 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
Display font sizes based upon the screen size. Don't get too excited about this, it's only in Chrome, and in beta at that.
css3  typography  responsive  browser  chrome  webdev 
may 2012 by jacklittleton
Viewport sized typography:
from twitter_favs
may 2012 by marks
More CSS Goodness => Viewport Sized Typography | CSS-Tricks
from twitter
may 2012 by graftedin
This is very welcome!
: Viewport sized typography: ”
from twitter
may 2012 by lucasalvini