Font scaling based on width of container

Question

I\'m having a hard time getting my head around font scaling.

I currently have a website with a body font-size of 100%. 100% of what though? This seems t

Answer 1

There is a way to do this without JavaScript!

You can use an inline SVG image. You can use CSS on an SVG if it is inline. You have to remember that using this method means your SVG image will respond to its container size.

Try using the following solution...

HTML

CSS

div {
  width: 50%; /* Set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;
}

Example: https://jsfiddle.net/k8L4xLLa/32/

Want something more flashy?

SVG images also allow you to do cool stuff with shapes and junk. Check out this great use case for scalable text...

https://jsfiddle.net/k8L4xLLa/14/