Acro-ULPGC font

Acro-ULPGC (tipografía)

Actualizado el 14/03/2024

La fuente tipográfica «Acro-ULPGC» se ha creado para implementar las submarcas de las escuelas y facultades de la ULPGC. Ofrece un subconjunto del abecedario.

Algunas de las letras tienen unas cuantas variantes tipográficas, que se visualizan de forma automática mediante ligaduras predefinidas. Por ejemplo, el texto «eii» muestra un glifo diferente para la «i» central y para la «i» final.

Image
Muestra de acrónimos de centros con Acro-ULPGC

Gracias a Acro-ULPGC, dentro del documento HTML se puede representar un acrónimo oficial con el aspecto visual estándar, sin necesidad de generar una imagen para ello. Además, como el acrónimo se representa mediante texto (ej. «eiic»), no hace falta proporcionar ayudas alternativas para accesibilidad.

Juego de caracteres

La tipografía solo implementa glifos para los caracteres ACDEFGHIJLMNOPRSTUV.

No existen glifos para estos caracteres: BKPQWXYZ, ni para signos de puntuación, ni ningún otro.

Usos admitidos de Acro-ULPGC

¡Importante!
Esta tipografía está concebida únicamente para representar los acrónimos de escuelas y facultades. No debe utilizarse para reproducir textos arbitrarios.

Esta tipografía solamente debe utilizarse para resolver las submarcas de acuerdo con los manuales de identidad gráfica de la ULPGC. Específicamente, se usará para representar los acrónimos de las escuelas y facultades.

Excepcionalmente, puede emplearse para crear algún recurso estilístico dentro de la página, relacionado con el acrónimo de un centro (por ejemplo, una marca de agua).

Recursos

Se ofrecen dos archivos en el CDN:

Configuración en la página web

Si se quiere usar directamente la fuente en una página web, basta con declararla con una directiva @font-face en el CSS:

<style type="text/css">
    @font-face {
      font-family: "Acro-ULPGC";
      src: format("woff") url("https://cdn.ulpgc.es/otros-recursos/acro-ulpgc/Acro-ULPGC-variable.woff");
      font-weight: normal;
      font-style: normal;

      /* Importante activar las ligaduras */
      font-variant-ligatures: normal;
    }
</style>

Con esta declaración, se puede utilizar Acro-ULPGC en cualquier punto del documento HTML, como una fuente tipográfica más. Por ejemplo, aquí se define un estilo CSS:

.acronimo-centro {
    font-family: Acro-ULPGC, monospace;
    font-size: 2rem;
    font-style: normal;
}

El estilo CSS se puede usar en cualquier otro punto:

<i class="acronimo-centro">eii</i>

Uso avanzado de las variantes

Si se quiere un control más fino sobre las variantes tipográficas, se puede usar el atributo CSS font-feature-settings. Acro-ULPGC contiene exactamente cuatro variantes, aunque estas no se definen para todos los caracteres. En el código de ejemplo se definen cuatro clases CSS para esas variantes.

.s1 { font-feature-settings: "ss01"; }
.s2 { font-feature-settings: "ss02"; }
.s3 { font-feature-settings: "ss03"; }
.s4 { font-feature-settings: "ss04"; }

Muestra de uso

Image
muestra gráfica de la tipografía Acro-ULPGC
<> Código
× Ocultar Código
  • HTML
  • JS
<!DOCTYPE html>
<
html>
<
head>
    <
meta charset="utf-8">
    <
meta name="viewport" content="width=device-width, initial-scale=1">
    <
title>Prueba de la fuente ULPGC de acrónimos (Acro-ULPGC)</title>
    <
style type="text/css">
        @
font-face {
          
font-family"Acro-ULPGC";
          
srcurl("https://cdn.ulpgc.es/otros-recursos/acro-ulpgc/Acro-ULPGC-variable.woff"format("woff");
          
font-weightnormal;
          
font-stylenormal;
          
font-variant-ligaturesnormal;
        }

        
{
            
font-familyAcro-ULPGCmonospace;
            
font-size2rem;
            
font-stylenormal;
        }
        .
s1 font-feature-settings"ss01"; }
        .
s2 font-feature-settings"ss02"; }
        .
s3 font-feature-settings"ss03"; }
        .
s4 font-feature-settings"ss04"; }

    </
style>
</
head>
<
body>

<
h2>Test del juego estándar</h2>
<
p>
    
Caracteres en uso: <b>ACDHIJLMNOQRSTUV</b><br>
    
todos los acrónimos en uso:<BR>
    <
i>FCS ARQ AFD EII EIIC EIIC2 EITE EDUC</i><br>
    <
i>MAR VET JUR FFI FGH FEET TEL FTI</i><br>
</
p>

<
h2>Todas las variantes</h2>
<
p>
 
set1: <class="s1">ACDHIJLMNOQRSTUV</i><br>
 
set2: <class="s2">ACDHIJLMNOQRSTUV</i><br>
 
set3: <class="s3">ACDHIJLMNOQRSTUV</i><br>
 
set4: <class="s4">ACDHIJLMNOQRSTUV</i><br>
</
p>

</
body>
</
html>