[css-d] Understanding How Relative Font-Size Resize Units in Responsive Design
Hello CSS Discuss, I'm trying to understand how relative font sizes resize in the browser because they don't seem to resize proportionately to their containing element the way a responsive background image would. The background image logo on this page: http://www.e7flux.com/e7flux2014/.html resizes up or down according to the browser window where as the fonts only resize according to the percentages set in the media queries depending on breakpoint even though they are contained in elements with percentage base widths. Is there anyway to get font sizing to resize proportionately based on containing element width? Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding How Relative Font-Size Resize Units in Responsive Design
Fonts are relative to the root element, and can be effected by font sizes applied to parent elements (compounding). Ems and percentage sizes will compound. Rem units will not. Font won't scale like images. There are a few script solutions but I dislike them. On Sunday, August 24, 2014, Elli Vizcaino e7f...@gmail.com wrote: Hello CSS Discuss, I'm trying to understand how relative font sizes resize in the browser because they don't seem to resize proportionately to their containing element the way a responsive background image would. The background image logo on this page: http://www.e7flux.com/e7flux2014/.html resizes up or down according to the browser window where as the fonts only resize according to the percentages set in the media queries depending on breakpoint even though they are contained in elements with percentage base widths. Is there anyway to get font sizing to resize proportionately based on containing element width? Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org javascript:;] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding How Relative Font-Size Resize Units in Responsive Design
Le 25 août 2014 à 09:51, Elli Vizcaino e7f...@gmail.com a écrit : Is there anyway to get font sizing to resize proportionately based on containing element width? You can eventually use vw, vmin units to specify the font-size. That is based on the viewport width/height. I assume that your containing element will resize based on the viewport size. There are a few demos out there, use your favourite search engine. http://dev.w3.org/csswg/css-values/#viewport-relative-lengths Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding How Relative Font-Size Resize Units in Responsive Design
On 8/24/14, 18:27, Philippe Wittenbergh wrote: Le 25 août 2014 à 09:51, Elli Vizcaino e7f...@gmail.com a écrit : Is there anyway to get font sizing to resize proportionately based on containing element width? You can eventually use vw, vmin units to specify the font-size. That is based on the viewport width/height. I assume that your containing element will resize based on the viewport size. There are a few demos out there, use your favourite search engine. http://dev.w3.org/csswg/css-values/#viewport-relative-lengths Philippe In the meantime, I have used a series of media queries to solve this very problem. Assuming you are using ems, rems, or percent font-size throughout, this works out quite well, if a bit messy. Like Philippe’s suggestion though, this only works for viewport widths. Only JavaScript will solve it for adjusting to a container element’s width AFAIK. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding How Relative Font-Size Resize Units in Responsive Design
On Aug 24, 2014, at 7:51 PM, Elli Vizcaino e7f...@gmail.com wrote: Hello CSS Discuss, I'm trying to understand how relative font sizes resize in the browser because they don't seem to resize proportionately to their containing element the way a responsive background image would. The background image logo on this page: http://www.e7flux.com/e7flux2014/.html resizes up or down according to the browser window where as the fonts only resize according to the percentages set in the media queries depending on breakpoint even though they are contained in elements with percentage base widths. Is there anyway to get font sizing to resize proportionately based on containing element width? Elli Vizcaino http://www.e7flux.com Hi Elli, The way I do it is set up your css with pixels first so everything is in it's place visually. Then you go and set your body font-size to 1em; (I used to set it to 16px - don't do that!) then go and set everywhere else to percentages or ems. This can be tricky, but with elements (not fonts) the percentage sizing is based on the parent, or more accurately, it's based on the parent up the chain of the dom tree until you get to the body based on the child and parent positioning, padding, margin, display, etc. So for example, if a parent is absolutely positioned, I believe the child div width and height will be based on the next relative parent or the body (this part I am not positive on). Now when you set your font-size in ems or percentages remember this. The body is the main element that percentages or ems are based on, however, if I have a div in the body and I set its font-size to 80% and I have a span inside that div that has a font-size that is 150%, then the sizes would be like so. Fonts: body- 1em (lets say the users browser default is 16px) div - 80% 0r 0.8em — of 1em = 12.8px [16x0.8=12.8 or 16x80/100 = 12.8]) span - 150% or 1.5em — 150% of 80% of 1em = 19.2px [12.8x1.5=19.2 or 12.8x150/100=19.2]) Elements: body - w:100% h:100% (lets say users screen is 800x600) div - w:80% h:80% — 80% of the body width [ 800x80/100=640px ] — 80% of the body height [600x80/100=480px] — Final tally: 640x480 span - w:150% h: 50% — 150% of div width [640*150/100=960 — 50% of div height 480/2 = 240px] — Final tally: 960x240 Then all you should have to do is set a body font-size to what ever em or percentage works for that @media size. Now, I don't know if this is a text book answer per se, but it's what I have come across in my studies. :) HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding How Relative Font-Size Resize Units in Responsive Design
Am I wrong about sizing? I thought the base element for font-sizing was the HTML element, not the body element...? Susan Davis On 8/24/2014 8:35 PM, Karl DeSaulniers wrote: Now when you set your font-size in ems or percentages remember this. The body is the main element that percentages or ems are based on HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding How Relative Font-Size Resize Units in Responsive Design
On Aug 24, 2014, at 10:45 PM, Susan Davis newslett...@endless-solutions.com wrote: Am I wrong about sizing? I thought the base element for font-sizing was the HTML element, not the body element...? Susan Davis On 8/24/2014 8:35 PM, Karl DeSaulniers wrote: Now when you set your font-size in ems or percentages remember this. The body is the main element that percentages or ems are based on HTH, No you are correct. I keep doing that. Sorry I meant the root element. My apology. Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
