Viquiprojecte:Tipografia/Pautes per mostres tipogràfiques

De Viquipèdia
Salta a la navegació Salta a la cerca
Alturax cos-blanc.png Viquiprojecte: Tipografia
Alturax cos-blanc.png
Viquiprojecte
Wikidiagnostic.svg
Què fer
Wikisaurus.svg
Bibliografia i fonts
Logo Wikipedia en el aula.png
Viquiprojectes docents
Lucidam.svg
Gràfics
Question mark.svg
Terminologia

Aquests pàgina té el propòsit de recollir les propostes i la discussió sobre els gràfics de mostra que s'utilitzen per il·lustrar els articles dedicats a lletres tipogràfiques. L'objectiu en crear-la era arribar a un consens sobre unes pautes i criteris per fer aquests gràfics que es situen dins la plantilla que encapçala aquestes pàgines.

Contingut

Introducció[modifica]

La plantilla {{Infotaula lletra tipogràfica}} posa un requadre al lateral superior-dret de la pàgina amb la informació esquematitzada sobre la lletra.

Aquesta infotaula preveu mostrar o enllaçar 3 imatges que caldria crear en format SVG:

  • Una mostra representativa de la lletra (atribut imatge)
    • Imatge de la lletra mostrant el seu aspecte
  • Una exemple d'aplicació de la lletra fent servir una frase de tipus pangram, que conté totes les lletres (atribut exemple)
    • Un exemple de la font, mostrant un sol caràcter en gran ("g"), un pangram o frase que contingui totes les lletres de l'alfabet i la col·lecció de caràcters principals (A–Z, a–z, 0-9, signes bàsics de puntuació)
  • Un exemple que mostra la col·lecció completa de caràcters d'una família corresponent a aquesta lletra (atribut exemple_imatgecompleta )
    • Una imatge d'exemple de gran format on es mostri la col·lecció completa de caràcters (generalment, els 256 glifs estàndards d'una font TrueType)

Solució acordada[modifica]

Després d'un procés de propostes, discussió i votació; la solució acordada és la que es presenta a continuació.

Mides[modifica]

  • En la infotaula les imatges es mostren amb una amplada de 220 píxels
  • Però l'usuari les ha de poder ampliar, per això seran preferiblement gràfics vectorials en SVG
  • Per donar coherència a les aportacions fixem a continuació unes mides estables per a aquests gràfics que alhora fixen unes proporcions

Imatge Mostra[modifica]

  • 500 píxels d'ample
  • Alçada variable segons el nombre de fonts o estils a representar (60 píxels addicionals per estil addicional).
    • 560 píxels si té 4 estils (p.e: rodona, negreta, cursiva i Versaleta)
    • 500 píxels si té 3 estils (p.e: rodona, negreta i cursiva)
    • 440 píxels si té 2 estils (p.e: rodona, negreta)
    • 380 píxels si té 1 sol estil (p.e: rodona)

Imatge d'Exemple[modifica]

  • 700 píxels d'ample
  • 500 píxels d'alt

Exemple Imatge completa[modifica]

Mides orientatives ja que podria variar segons els caràcters de la font o el nombre de fonts de la família.

  • 600 píxels d'ample
  • 600 píxels d'alt
  • En cas que es mostrin els caràcters de diversos estils es podria duplicar aquest bloc de 600x600 repetint-lo en alçada. Però no en amplada.
  • No és problema tenir una imatge massa gran sobre la que calgui fer scroll vertical perquè a la infotaula apareix com un enllaç que el lector ha de seguir

Colors[modifica]

El color de les imatges de mostra i exemple serà diferent en funció de la categoria a la que pertanyi el disseny tipogràfic segons la classificació Vox-ATypI. La taula següent indica el color a fer servir. Hi ha un color més saturat i un més apagat per les diferents parts de les mostres. El color més apagat correspon al mateix to del saturat però amb un 10% de saturació i un 90% de lluminositat.

S'han pres, en part, alguns colors utilitzats en la Wikipedia anglesa; però buscant sentit de classificació que en aquella no tenen.

Grup Color Codi color (base) Codi color (fons)
CLÀSSIQUES (marrons)
Humanístiques Marró-grogós #D6B471 #E6DECF
Garaldes Marró-Castany #B8704D #E6D6CF
Reals Marró-vermellós #B8534D #E6D0CF
MODERNES (blavosos i vermell)
Didones Blau #819BB5 #CFDAE6
Mecàniques Blau-lilós #9E81B5 #DBCFE6
Lineals Vermell #FF5F56 #E6D0CF
INSPIRACIÓ MANUSCRITA (verds)
Incises Verd-blavós #76A28B #CFE6DA
D'escriptura Verd-militar #78AE84 #CFE6D4
Manuals Verd-poma~ #83BA69 #D6E6CF
Fractures Verd-oliva #9EBA69 #DEE6CF
NO LLATINES (groc) groc #E9D920 #E6E4CF

Contingut i caràcters[modifica]

Els tres tipus d'imatges tenen continguts diferents segons la funció que acompleixen

Imatge Mostra[modifica]

  • El nom de la família tipogràfica aplicat en rodona
  • Un caràcter destacat a una mida més gran, en estil rodona i en blanc. Hi ha dues propostes:
    • Que sigui una a
    • Excepcionalment, en fonts on sigui més significativa, pot ser una e
  • Una mostra d'algunes lletres representatives amb els estils que tingui la família tipogràfica (o els més significatius):
    • Hb Mp Sx
    • En famílies on hi hagi algun caràcter molt significatiu que no estigui en aquesta mostra es pot fer algun canvi de caràcters si està prou justificat. Però mantenint també 3 grups de dos caràcters en caixa alta i baixa.
  • Mostra de vocals accentuades, nombres i altres signes. Posar interlletrat de manera que els caràcters no es quedin massa enganxats.
    • àíü1234567890@?!(){},.;:-'“”

Imatge d'Exemple[modifica]

  • El nom de la família tipogràfica aplicat en rodona
  • Un caràcter, de la lletra g, destacat a una mida més gran, en estil rodona i en blanc.
  • Un pangram en rodona. Interlletrat i interliniat suficient perquè no s'enganxin els caràcters i es reconeguin bé.
  • Col·lecció de tots els caràcters alfabètics en caixa alta i baixa, amb 'ç' i excloent 'ñ'.
    ABCÇDEFGHIJKLMNOPQRSTUVWXYZ
    abcçdefghijklmnopqrstuvwxyz
  • Col·lecció de nombres i mostra d'alguns signes.
    0123456789@?!()[]{},.;:-'“”

Exemple Imatge completa[modifica]

  • El nom de la família tipogràfica aplicat en rodona
  • Tots els caràcters de la família que s'utilitza per mostrar el disseny tipogràfic (inclou totes les fonts de la família o, com a mínim, les més significatives)
    ABCÇDEFGHIJKLMNOPQRSTUVWXYZ
    abcçdefghijklmnopqrstuvwxyz

Pangrama[modifica]

El pangrama és per al gràfic d'exemple, NO per la mostra que es posa en el camp imatge de la infotaula.

Es pot escollir entre un dels dos pangrames següents (només un per gràfic):

  • Jove xef, porti whisky amb quinze glaçons d'hidrogen, coi!
  • Jove ximpanzé que fa whisky il·legal d'arç i tabac

Altres aspectes gràfics i compositius[modifica]

A continuació es mostren uns models de maquetació i organització dels continguts anteriors. Aquests exemples poden no tenir encara les mides acordades i es posen només com a model de l'aspecte gràfic i de maquetació.

Imatge Mostra[modifica]

2 blocs de color: un superior menys saturat amb el nom, les mostres d'estils amb pocs caràcters i un caràcter gran de mostra; un bloc inferior de color saturat amb la resta de caràcters de mostra

Exemple de variacions amb només un o dos estils:

Mostra representativa de la lletra tipogràfica Tahoma amb un estil
Mostra representativa de la lletra tipogràfica Tahoma amb dos estils



Imatge d'Exemple[modifica]

En coherència amb la proposta equivalent per la Imatge de mostra... dos blocs de color: un superior amb el nom, un caràcter gran d'exemple, diferent a la Imatge de mostra, i un pangram; un d'inferior amb els caràcters de caixa alta, baixa, nombres i altres signes


Exemple Imatge completa[modifica]

2 blocs de color: superior, més petit, només amb el nom sobre fons saturat; inferior amb fons menys saturat, graella formada per línies blanques fines, caràcters en negre a cada casella


Categories[modifica]

Possibles categories on afegir aquests gràfics al pujar-los a Commons (argumentacions en les propostes i votacions, més avall en aquesta pàgina)

Imatge Mostra[modifica]

Imatge d'Exemple[modifica]

Exemple Imatge completa[modifica]

Propostes i procés de votació[modifica]

Si teniu interès en conèixer com ha anat el procés per arribar a aquest acord i voleu conèixer les propostes que s'han fet desplegueu els continguts següents.