Establecer el peso de la fuente frente a la familia de fuentes en negrita en CSS, ¿cuál es más correcto?

Digamos que hemos cargado una variante de fuente en negrita así:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

Yo argumentaría a favor de usar ambos font-familyy font-weighten su especificación de estilo. Por ejemplo:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

Ambos básicamente hacen lo mismo: decirle a su encabezado1 que esté en negrita. Esto no duplicará la negrita ni nada, solo repite que debe estar en negrita.

La razón de esto es bastante simple: si su archivo de fuente no está cargado (sobrecarga del servidor, restricciones del cliente, vudú), su visitante aún verá una fuente en negrita (en este caso, una Helvética en negrita falsa) y podrá distinguir entre un título y el cuerpo del texto, que no sería el caso si solo hubieras especificado el font-family.

Vea en esta imagen que el conjunto superior es Raleway y Raleway Italic pero tiene el Raleway Italic apropiado cargado con:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

La parte inferior solo está cargando Raleway. Como resultado, el conjunto inferior tiene cursiva Raleway y FAUX Raleway. Tenga en cuenta las diferencias en minúsculas "a" y "k", por ejemplo, entre la cursiva real y la cursiva falsa. Una fuente bien diseñada tendrá diferencias entre regulares, negritas y cursivas que no obtendrá si no las carga.

Si bien ambas formas le darán el resultado correcto, la forma más correcta sería usar una sola familia de fuentes para agrupar todas las diferentes variantes de pesos y estilos. Es la misma forma en que usa las fuentes del sistema (desde 'Arial' hasta 'sans-serif') y, de hecho, si usa las fuentes de Google para cargar Raleway, estaría usando la ruta de una sola familia de fuentes.

Describamos varias razones por las que este es el método correcto.

Reduce la complejidad de CSS y, en última instancia, el tamaño del archivo.

Tener una sola familia de fuentes significa que puede definir un elemento contenedor completo con la familia de fuentes, y solo ciertos elementos con diferentes pesos/estilos. Tome lo siguiente, por ejemplo:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

Fíjate en lo agradable y conciso que es este CSS. No necesitábamos especificar "RalewayBold" como familia de fuentes para .bold, ni "RalewayItalic" para nuestro .italic. De hecho, ni siquiera necesitamos especificar una variante en negrita y cursiva, ya que nuestras clases simplemente funcionarán. Además, si .bold está dentro de nuestro .footer, será negrita Arial y no Raleway, porque simplemente hereda Arial del contenedor de pie de página.

Es la forma en que lo hace el navegador.

Lo anterior es esencialmente cómo la hoja de estilo interna del navegador define las fuentes mediante el uso de estilos mínimos y la naturaleza en cascada inherente de CSS.

Es la forma en que la industria lo hace y lo ha hecho.

Las principales propiedades web, aplicaciones y editores lo hacen de esta manera. Google, Facebook, NYT, ESPN, etc. definen y usan fuentes de esta manera.

No solo eso, sino que las interfaces de usuario anteriores al CSS o incluso a Internet especifican familias de fuentes únicas y eligen variantes basadas en diferentes especificaciones de peso y estilo. Cargue Microsoft Word, KeyNote, Google Docs, incluso un antiguo WordPerfect de finales de la década de 1990 y abra el menú desplegable de fuentes; Verá el nombre de la familia de fuentes "Arial" en la lista; no "Arial" seguido de "Arial Bold" seguido de "Arial Italic", etc.

Simplemente cargue desde Google Fonts.

Si carga Raleway desde el repositorio webfonts gratuito en Google Fonts, verá que Raleway se define con un solo nombre de familia:

https://fonts.googleapis.com/css?family=Raleway:400,400cursiva,500,500cursiva,700,700cursiva

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}

Esta es la cuestión: si hace la pregunta sobre Raleway, una fuente web programada para css, ambas formas funcionan igual de bien. En este caso, use font-weight porque es el curso de acción "correcto" que será más fácil de cambiar y controlar sin cambios importantes en el código.

Ahora comienza a tener problemas una vez que incrusta una fuente usted mismo, una fuente que no está necesariamente planificada para css y los pesos pueden no coincidir con los números.

Debido a esto, un error muy común en las fuentes incrustadas, extremadamente común en las fuentes que no están en inglés, es que css "en negrita" o "aclara" la fuente automáticamente y el resultado es muy malo.

Por lo tanto, le recomiendo que si usa una fuente web como las fuentes en Google Fonts, siga adelante y use los números en font-weight, pero cuando incruste una fuente usted mismo, manténgase seguro y use font-family para cada peso individual por separado. .