Cómo configurar min-font-size en CSS

En CSS3 hay un truco simple pero brillante para eso:

font-size:calc(12px + 1.5vw);

Esto se debe a que la parte estática de calc() define el mínimo. A pesar de que la parte dinámica podría reducirse a algo cerca de 0.

Esto probablemente no es exactamente lo que quieres, pero en CSS 3, puedes usar la función max.

Ejemplo:

blockquote {
    font-size: max(1em, 12px);
}

De esta manera el tamaño de la fuente será 1em (si 1em > 12px), pero al menos 12px.

Desafortunadamente, esta increíble función de CSS3 aún no es compatible con ningún navegador, ¡pero espero que esto cambie pronto!

Parece que llego un poco tarde, pero para otros con este problema intente este código

p { font-size: 3vmax; }

Use la etiqueta que prefiera y el tamaño que prefiera (reemplace el 3)

p { font-size: 3vmin; }

Se utiliza para un tamaño máximo.

Utilice una consulta de medios. Ejemplo: Esto es algo im usando el tamaño original es 1.0 vw, pero cuando llega a 1000 la carta se vuelve demasiado pequeña, así que escalarlo

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

Este sitio en el que estoy trabajando no responde a >500px, pero es posible que necesite más. El pro, beneficio de esta solución es mantener el tamaño de la fuente escalando sin tener letras super mini y puede mantenerlo js gratis.

Solución CSS:

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

AFAIK no es posible con CSS simple,
pero puedes hacer una operación bastante cara de jQuery como:

Demostración de JsBin

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

_{En lugar de usar el Selector global * Te sugiero (si es posible) que seas más específico con tus selectores.}

A juzgar por su comentario anterior, está bien hacer esto con jQuery - aquí va:

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

Una forma más limpia de hacer esto podría ser tener una clase "min-font" en su CSS que establezca font-size: 12px, y simplemente agregue la clase en su lugar:

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});