Q:

Размер шрифта при масштабировании

Как заставить не вылазить текст за границу при масштабировании окна браузера?
Вот пример кода: Jsfiddle
<div class="container">
    <div class="header__today">
        <div class="current_date">
            <div class="current_date__day">23</div>
        </div>
    </div>
    <div class="header__today">
        <div class="current_date">
            <div class="current_date__day">23</div>
        </div>
    </div>
    <div class="header__today">
        <div class="current_date">
            <div class="current_date__day">23</div>
        </div>
    </div>
    <div class="header__today">
        <div class="current_date">
            <div class="current_date__day">23</div>
        </div>
    </div>   
</div>

.container {
  width: 100%;
  margin: 0 auto;
}
.header__today {
  border-top: 5px solid black;
  float: left;
  width: 25%;
  color: #fefefe;
  box-sizing: border-box;
  background-color: green;
}
.current_date {
    font-size: 150px;
    margin: 43px auto 0 32px;
    &__day {
      line-height: 150px;
      border: 1px solid #fefefe;
    }
}

Нужно сделать так чтобы 23 не вылазило за нарисованную границу либо чтобы 23 раздвигало border. С помощью js эту проблему решил, но хочется более правильного решения без использования js.

A:

Если взять решения на чистом css, то: 
Во-первых
Можно задать размер шрифта относительно размеров области обзора (viewport).
Что-то типа:
.current_date {
    font-size: 10vw; /* подобрать размеры вручную, в зависимости от верстки*/
    /* все остальное */
}

1vw = 1% от ширины области обзора (viewport).
1vh = 1% от высоты области обзора (viewport).
1vmin = меньшее из 1vw, 1vh.
1vmax = большее из 1vw, 1vh.  
Решение конечно не супернадёжное, десяток разных известных ошибок, но очень удобное. 
Во-вторых
Можно использовать media queries и менять размер шрифта самому в тех пороговых значениях где верстка начинает сыпаться, но по мне уж лучше js.

