Escriptura i tipografia
Índex
- Objectius
- 1.Història gràfica de la tipografia
- 1.1.La prehistòria de la tipografia
- 1.1.1.L'origen múltiple de l'escriptura
- 1.1.2.Els sistemes d'escriptura
- 1.1.3.L'escriptura cuneïforme mesopotàmica
- 1.1.4.Les formes d'escriptura egípcies
- 1.1.5.L'alfabet protosinaític
- 1.1.6.L'alfabet consonàntic fenici: l'avantpassat, el transmissor
- 1.1.7.L'alfabet grec: l'adaptació
- 1.1.8.L'alfabet romà
- 1.1.9.La reforma carolíngia sobre l'alfabet romà
- 1.1.10.L'alfabet llatí modern
- 1.2.Inicis de la tipografia
- 1.3.Les avantguardes
- 1.3.1.El trencament
- 1.3.2.Futurisme i dadaisme
- 1.3.3.De Stijl, la Bauhaus i el constructivisme
- 1.3.4.Període d'entreguerres
- 1.4.La nova tipografia
- 1.4.1.L'època de postguerra
- 1.4.2.L'Escola Suïssa
- 1.5.Tipografia actual
- 1.1.La prehistòria de la tipografia
- 2.Geometria i creació de tipus
- 3.Composició tipogràfica
- 3.1.Composició tipogràfica editorial
- 3.1.1.Tractament del text
- 3.1.2.Jerarquia del text
- 3.1.3.La combinació tipogràfica
- 3.1.4.La pàgina impresa: mides i proporcions
- 3.1.5.Lectura i composició de pàgina
- 3.1.6.Maquetació: retícules i columnes
- 3.1.7.Text i imatge
- 3.2.Composició tipogràfica per pantalla
- 3.1.Composició tipogràfica editorial
- Bibliografia
Objectius
-
Conèixer els orígens de l'escriptura, la gènesi de l'alfabet i l'evolució de les formes d'escriptura i cal·ligrafia llatines previs a la tipografia.
-
Conèixer l'evolució de la tipografia des del seu naixement al segle XV, les innovacions més significatives i els tipògrafs més rellevants.
-
Saber reconèixer els aspectes formals, geomètrics i proporcionals dels caràcters tipogràfics; els sistemes de mesura, la mètrica horitzontal i vertical.
-
Saber utilitzar els atributs tipogràfics del paràgraf en funció de la llegibilitat i dels efectes visuals de la composició gràfica; saber ajustar paràmetres com l'interlletratge, el cran, l'interlineat, les sagnies, les tabulacions o l'alineació.
1.Història gràfica de la tipografia
1.1.La prehistòria de la tipografia
1.1.1.L'origen múltiple de l'escriptura
-
Cuneïforme mesopotàmica: una de les més antigues, sorgida cap al 3500 aC a Sumer i que perduraria durant uns quatre mil anys amb interaccions amb altres sistemes d'escriptura de l'Àsia occidental i la Mediterrània.
-
Egípcia: també una de les més antigues, sorgida cap al 3500 aC a Egipte amb dos sistemes d'escriptura paral·lels (jeroglífic i hieràtic) que evolucionarien cap a diferents sistemes d'escriptura, molts d'ells encara vigents, com els alfabets grec, llatí i ciríl·lic o els abjads àrab i hebreu.
-
Índia: l'escriptura Bahmi, sorgida cap al 500 aC a l'actual Índia, és l'origen de la branca evolutiva que donarà lloc a diferents sistemes estesos per la conca de l'Indo, l'Himàlaia i part del Sud-est asiàtic.
-
Xinesa: sorgida cap al 2200 aC a la Xina ha donat lloc a sistemes d'escriptura encara vigents, sobretot en l'àmbit asiàtic.
-
Mesoamericana: sorgida en la cultura zapoteca cap al 500 aC evolucionarà o influirà en el naixement d'altres sistemes, com l'escriptura maia, en l'àrea del que avui és Mèxic.
1.1.2.Els sistemes d'escriptura
-
Logogràfica: cada grafema representa una paraula o morfema. Representen la llengua tal com es pensa.
-
Fonogràfica: els grafemes representen sons; fonemes o conjunts de fonemes. Representen la llengua tal com es diu.
-
Pictograma: és una representació figurativa o que guarda semblança amb allò que representa.
-
Ideograma: és un signe abstracte que es relaciona convencionalment amb allò que representa.
-
Un sil·labari: en què cada grafema representa una síl·laba o un conjunt de sons. El japonès fa servir dos tipus de sil·labaris, hiragana i katakana. L'escriptura grega de l'època micènica també utilitzava un sil·labari.
-
Un abjad o alfabet consonàntic: en què cada grafema representa un so consonant. Els lectors dedueixen els sons vocàlics pel seu coneixement de la llengua. Són abjads els conjunts de signes utilitzats en l'àrab o l'hebreu.
-
Un abugida, alfabet sil·làbic o alfasil·labari: en què cada grafema representa un so consonant unit a un so vocàlic. Normalment hi ha un so vocàlic bàsic i mitjançant modificacions del signe s'indica si la vocal és una altra. Molt sovint els abugides han derivat d'un sistema abjad originari. Són abugides l'escriptura brahmi índia, l'escriptura tibetana o l'etíop.
-
Un alfabet o alfabet complet: en què idealment cada fonema té un grafema que el representa. El grec, el llatí i el ciríl·lic són exemples típics d'alfabets. Tot i que no en totes les llengües es dóna l'equivalència entre un fonema i un signe gràfic. Només en llengües que han adoptat l'alfabet en èpoques recents, com el turc amb l'alfabet llatí, hi ha aquesta equivalència estricta.
-
Escriptura cuneïforme: amb els grafemes compostos per marques en forma de tascó.
-
Escriptura lineal: amb grafemes formats per línies.
1.1.3.L'escriptura cuneïforme mesopotàmica
1.1.4.Les formes d'escriptura egípcies
-
Jeroglífic: és una escriptura pictogràfica en què els grafemes representen éssers, objectes i processos de la realitat directament o a partir de la metàfora i la metonímia. S'utilitzava principalment gravada en pedra o pintada als murs de les tombes.
-
Hieràtic: és una escriptura en què els grafemes són formes esquemàtiques corresponents als pictogrames de l'escriptura jeroglífica. S'escrivia amb tinta negra i vermella amb un càlam de canya sobre papir.
1.1.5.L'alfabet protosinaític
1.1.6.L'alfabet consonàntic fenici: l'avantpassat, el transmissor
1.1.7.L'alfabet grec: l'adaptació
Lletra
|
Nom
|
Alfabet llatí
|
HTML
|
---|---|---|---|
A α |
Alfa |
A |
α |
Β β |
Beta |
B |
β |
Γ γ |
Gamma |
C, G |
γ |
Δ δ |
Delta |
D |
δ |
Ε ε |
Èpsilon |
E |
ε |
Ζ ζ |
Zeta |
Z |
ζ |
Η η |
Eta |
H |
η |
Θ θ |
Theta |
- |
θ |
Ι ι |
Iota |
I, J |
ι |
Κ κ |
Kappa |
K |
κ |
Λ λ |
Lambda |
L |
λ |
Μ μ |
Mi |
M |
μ |
Ν ν |
Ni |
N |
ν |
Ξ ξ |
Ksii |
- |
ξ |
Ο ο |
Òmicron |
O |
ο |
Π π |
Pi |
P |
π |
Ρ ρ |
Rho |
R |
ρ |
Σ σ, ς |
Sigma |
S |
σ |
Τ τ |
Tau |
T |
τ |
Υ υ |
Ípsilon |
V, Y, U, W |
υ |
Φ φ |
Fi |
- |
φ |
Χ χ |
Khi |
X |
χ |
Ψ ψ |
Psi |
- |
ψ |
Ω ω |
Omega |
- |
ω |
1.1.8.L'alfabet romà
-
Quadrata: lletres capitals de forma "quadrada" que es tallaven sobre pedra. Amb una estructura fortament geomètrica basada en el quadrat i el cercle que respon a la voluntat de monumentalitat que requeria el seu ús als edificis d'obra religiosa o civil. El cisellat de les línies sobre la pedra donava lloc als acabats terminals que avui coneixem com a serifs.
-
Rústica: que fa servir una forma més simple i informal de dibuixar les lletres amb ploma o pinzell. Es desenvolupa a partir del s. I dC responent a la necessitat d'expansió de l'escriptura sobre nous suports. Per influència de l'eina els traços verticals són més prims que els horitzontals.
-
Uncial o cursiva: antecedent de les minúscules; responent a la necessitat de l'escriptura ràpida amb ploma els traços s'arrodoneixen, la pràctica cal·ligràfica lliga els grafemes entre ells i algunes lletres –com la b, la d i la p– mostren traços ascendents i descendents.
1.1.9.La reforma carolíngia sobre l'alfabet romà
1.1.10.L'alfabet llatí modern
1.2.Inicis de la tipografia
1.2.1.Introducció històrica
1.2.2.El Renaixement: la impremta, una nova era comença
1.2.3.Els primers tipògrafs
1.2.4.Tipògrafs del nord d'Europa
1.2.5.El refinament tipogràfic
1.2.6.La Revolució Industrial
1.2.7.Canvi de segle: nova mentalitat
1.2.8.El modernisme: inicis de l'art comercial
1.3.Les avantguardes
1.3.1.El trencament
1.3.2.Futurisme i dadaisme
1.3.3.De Stijl, la Bauhaus i el constructivisme
1.3.4.Període d'entreguerres
1.4.La nova tipografia
1.4.1.L'època de postguerra
1.4.2.L'Escola Suïssa
-
Utilització d'una quadrícula (reixeta) base que dotava el disseny d'una coherència i estructura interna.
-
L'ús de tipografies sense terminals, combinades asimètricament amb la resta d'elements de la composició.
-
Utilització de la fotografia en blanc i negre en detriment d'emprar il·lustracions o dibuixos.
1.5.Tipografia actual
1.5.1.Les dècades de 1960 i 1970, precursores de la revolta
1.5.2.Postmodernisme, desconstructivisme i tecnologia
1.5.3.Cap a on va la tipografia?
A causa de la gran quantitat de fonts tipogràfiques i estils que hi ha avui en dia podem trobar diferents llibres publicats amb referències extenses sobre fonts, com, per exemple, el complet Fontbook, també conegut com el llibre groc (per les seves cridaneres cobertes de groc canari) que des del 1991 ens dóna informació de moltes tipografies existents al mercat. Però no caldria comprar un llibre: també podem cercar a Internet moltes referències tipogràfiques, des de les mateixes pàgines web de les empreses creadores i comercialitzadores de tipus (Lynotype, Monotype, Adobe, entre d'altres), com altres pàgines web sobre tipografia. Cal destacar, en especial, la web d'Identifont, el directori independent de tipografia en línia més extens. En recomanem molt la utilització tant per a conèixer, com per a buscar i trobar tot tipus de fonts. També són útils Dafont.com i MyFonts.com.
2.Geometria i creació de tipus
2.1.Geometria i atributs dels tipus
-
Crear les formes dels grafemes o caràcters (lletres, nombres, signes diacrítics i de puntuació i altres).
-
Organitzar aquests caràcters en paraules, frases, paràgrafs, textos que hauran de complir una funció concreta.
-
Combinar els textos amb altres suports (imatges, animacions, pel·lícules, productes).
"Hay letras líricas y otras pesadas como elefantes; tipografías femeninas y tipografías masculinas; caracteres que emprenden el vuelo con facilidad y dilatan la fantasía y escrituras que nos pegan a la dura piel de los negocios!"
J. Martínez-Val (2002). Tipografía práctica (pàg. 53). Madrid: Ediciones del Laberinto.
2.1.1.Les tres formes elementals
2.1.2.Mesures i atributs del tipus
Sistema duodecimal establert per Fournier el 1737 |
1 cícero = 12 punts |
Sistema Didot, Europa continental |
1 peu francès = 30 cm = 798 punts = 66,5 cíceros 1 punt = 0,376 mm = 0,0148 polzades 1 cícero = 12 punts = 4,512 mm = 0,1776 polzades |
Sistema anglosaxó |
1 polzada = 2,54 cm = 72 punts = 6 piques 1 punt = 0,353 mm = 0,0138 polzades 1 pica = 12 punts = 4,233 mm = 0,1656 polzades |
2.1.3.La mètrica vertical del tipus
Ascendent minúscules (Ascender) |
La línia horitzontal (imaginària) que defineix la posició més alta a la qual poden arribar dels traços ascendents dels caràcters en minúscula; normalment, es pren com a referència la lletra b. |
Alçària de capitals (Capital Heigh) |
L'alçària de la lletra capital (majúscules) defineix la posició més alta a la qual poden arribar les lletres majúscules; normalment, es pren com a referència l'alçària de la H. |
Alçària de "x" (x-height) |
Alçària de la "x" minúscula, com la x o la v. |
Línia de base (Baseline) |
La línia horitzontal (imaginària) en què descansen les lletres. Línia que els serveix de base. |
Descendent minúscules (Descender) |
Línia horitzontal (imaginària) que defineix la posició més baixa dels traços descendents dels caràcters en minúscules; normalment, es pren com a referència la p. |
-
Quan ens trobem amb una corba a la part de la base aquesta s'ha de fer passar una mica per sota de la línia base.
-
Si la línia corba és a la part superior, aquesta es fa passar una mica per sobre de l'alçària "x" o de l'alçària de la majúscula segons sigui la lletra de caixa baixa o alta.
-
Les formes circulars i triangulars excedeixen l'alçària física de la resta.
-
Els traços horitzontals –com la línia mitjana d'una H majúscula– es col·locaran una mica per sobre de la meitat del tipus.
-
El gruix dels traços varia segons sigui la seva direcció: els verticals que són el suport (com columnes que aguanten el tipus) són més gruixuts que els horitzontals; els horitzontals intermedis són més fins que els horitzontals dels extrems (capdamunt o base).
-
Els traços verticals i diagonals s'afinen en les convergències per a evitar taques negres.
-
Els traços curvilinis varien constantment de gruix per tal de donar una impressió més fluida i no tan mecànica.
2.1.4.La mètrica horitzontal del tipus
-
Amb caixa baixa per al cos de text és preferible no espaiar massa els caràcters, ja que en dificulta la llegibilitat.
-
Les formes de les minúscules s'alternen entre elles, forma-contraforma (producte dels seus orígens cal·ligràfics).
-
Les lletres de caixa alta tenen més autonomia formal (orígens epigràfics).
-
Podem forçar més l'espaiat entre lletres, però arriba un moment que tenim el risc de perdre el conjunt i passaríem a veure elements tipogràfics individuals.
2.1.5.Atributs de paràgraf
2.2.Tipografia digital i creació de tipus
2.2.1.Tipografia digital: contorns i mapes de bits
-
la generació dels arxius que guarden els contorns geomètrics de les lletres,
-
la creació posterior d'arxius de mapa de bits (retícula de píxels) d'aquest contorns.
-
Windows 95 i 98: sistema estàndard que inclou suavització i hinting. Predomina la claredat en la visualització del text per pantalla malgrat que variarà força del text imprès, ja que en tenir la tecnologia hinting aplicada obliga els píxels a ubicar-se en posicions integrals dins la graella de píxels establerta.
-
Windows XP: sistema amb suavització i hinting + tecnologia de tramatge subpíxel s'anomena cleartype system; aquest dóna una millor definició del text per pantalla però en imprimir-lo pot patir variacions.
-
Mac OX: implanta un sistema molt acurat anomenat floating-pixel (píxel flotant), una combinació entre la suavització i la tecnologia subpíxel; no s'aplica el forçat del píxel del hinting. Dóna com a resultat una visualització òptima per pantalla (malgrat que en cossos molt petits es pot perdre llegibilitat per pantalla), però resulta més fiable per a imprimir, ja que el text no varia.
2.2.2.Gestors fonts tipogràfiques
-
Suportar diversos tipus de font.
-
Instal·lació temporal de les fonts i opció d'esborrar arxius.
-
Visualització ordenada i lògica de les tipografies amb diverses opcions de visualització possibles, atenent a les seves futures aplicacions.
-
Tenir diverses opcions possibles per a organitzar i administrar les fonts en diferents categories.
-
Permetre imprimir llistes de tots els tipus o una part d'elles per a tenir un exemple imprès de cada font.
Aplicació lliure. Visualitza i compara fonts amb diferents mides i paràmetres CSS aplicats. Molt útil per a disseny web. |
|
Aplicació en línia per a comparar les fonts i com funcionen per pantalla (Javascript necessari). |
|
El més complet directori de fonts d'Internet lliure de consulta, amb unes 500 publicacions i 140 punts de venda possibles. 100% recomanable posar-lo a favorits! |
|
Reconeixement de fonts de marques corporatives, publicacions, campanyes publicitàries. Escanejant l'arxiu ens cerca les aproximacions tipogràfiques en la seva base de dades. |
|
Aplicació en flash de consulta ràpida per a previsualitzar les fonts actives instal·lades al nostre sistema operatiu. |
|
Un curiós i novedós sistema "visual" interactiu de cercar la tipografia que tenim en la nostra ment. |
|
Una guia per a conèixer les fonts més comunes instal·lades a les plataformes Windows, Mac i Linux. |
|
http://www.stretchedout.com/products/fontmatch/fontmatch.php |
Identificador de fonts que compara la font que cerquem sols amb les fonts instal·lades al nostre ordinador. |
2.2.3.Com crear un tipus?
-
que la font sigui amb serif o sense,
-
que tingui un caràcter manuscrit o d'impremta,
-
que sigui ampla o estreta,
-
que sigui gruixuda o fina.
-
farem un 4 tancat o mig obert?
-
tres línies o dues en la Y?
-
descendent o línia base en la J?
-
de dos nivells o un a la a i la g?
-
amb una W creuada, ajuntada o arrodonida?
-
Caixa: caixa alta i caixa baixa. Les lletres de caixa alta són fermes i grans, tenen un caire més seriós i formal que les de caixa baixa.
-
Estil: cada font té una textura visual única; n'hi ha de molts tipus i estils diferents. Quan s'ha de triar una font, hem d'intentar descobrir la relació entre les seves formes, continguts i missatge que comunica. No és el mateix emprar una font amb serifs, que una de pal sec o una monotipus respecte a una de fantasia.
-
Cos: les relacions d'escala influeixen molt en la manera com es percep un tipus. Els més grans s'avancen, els més petits s'allunyen del lector.
-
Inclinació: la inclinació del tipus hi dóna més força i energia, com si avancés en l'espai. Tradicionalment és d'entre 13 i 16 graus. Actualment, però, amb l'ordinador es poden crear tot tipus de graus d'inclinació. Cal tenir present que molta inclinació dificulta la lectura.
-
Gruix: aquesta propietat és determinada per l'amplària de les astes. Unes astes fines donen una aparença de tipografia fina i delicada, amb ulls amples i espais blancs generosos. Al contrari, amb les astes gruixudes tenim una aparença robusta i forta, pesant, es crea una taca negra.
-
Amplària: actualment amb els programes informàtics podem escalar tant la vertical com l'horitzontal, però s'ha d'anar en compte de no perdre llegibilitat i les proporcions en les formes dissenyades pels tipògrafs. En escalat vertical les astes horitzontals es veuran més gruixudes; en un escalat horitzontal les astes verticals es veuran més fines. Malgrat tot, dependrà de cada cas i es pot experimentar amb les amplàries per a aconseguir efectes visualment més expressius.
-
Tonalitat i color: podem tenir tipus tramats, degradats i amb color plans. No confondre amb el terme color tipogràfic, és a dir, els nivells de clar i fosc de la font que són determinats sobretot pel gruix de les astes de les lletres.
-
Simetria i asimetria: l'organització simètrica dels elements que configuren una tipografia ens dóna estabilitat, formalitat. Si l'organització és asimètrica crea tensió visual; és més interessant, hi ha una interacció d'espais positius i negatius més dinàmica. L'harmonia en una tipografia la defineix la relació entre els elements tipogràfics i l'espai que els envolta.
-
Direcció: segons siguin les formes tipogràfiques aquestes determinen direccionalitats diverses. Normalment, el tipus es veu horitzontalment reposant sobre una línia base imaginària però el dissenyador pot canviar aquesta direcció.
-
Fons/figura: entre fons i tipografia s'estableix una relació d'apropament i allunyament; un contrast baix entre fons i tipus fa avançar el fons, un contrast alt el fa retrocedir. S'ha de cuidar molt el contrast fons/tipografia per a una llegibilitat òptima.
-
Ritme: la tipografia és anàloga a la música: els principis de repetició i ritme també s'apliquen. Per a aconseguir ritme tipogràfic hi ha d'haver contrast entre les seves formes.
3.Composició tipogràfica
3.1.Composició tipogràfica editorial
3.1.1.Tractament del text
Projecte editorial
|
Característiques
|
---|---|
Llibre infantil |
Funcionalitat didàctica, el lector és un espectador, la imatge és la protagonista, la il·lustració ocupa tota la pàgina, el color és viu, aporta atracció i fascinació. La doble pàgina és tractada com una unitat didàctica. Tècnicament són pàgines gruixudes, plastificades, no tòxiques, amb poques pàgines... |
Llibre tècnic |
Presenta una composició típica bimedia: correspondència d'imatges icòniques amb text. El llibre de divulgació és de caire més comercial, l'embalatge gràfic és més atractiu (normalment són temes més planers). Hi ha una prioritat didàctica, claredat del text i contingut informatiu en les imatges i il·lustracions. El llibre tècnic professional: els usuaris el necessiten, són de formació especialitzada. Hi ha una sobrietat en el tractament dels mitjans. |
Llibre universitari |
Generalment és un llibre de tipus apunts, purament textuals, amb presència de quadres estadístics i gràfics d'informació, molt sintetitzats. Molt poca intervenció de grafisme, molta informació indexada, referenciada, bibliografies, etc. |
Publicacions d'art |
Trobem en aquest apartat diversos productes editorials com el llibre de luxe amb un tractament exquisit de gran format amb moltes il·lustracions, amb paper cuixé, d'alta qualitat, que normalment tracta d'un tema monogràfic. La revista d'art, ja més funcional i variada en temàtiques. És una publicació marcadament més visual; la seva presentació normalment és exuberant, amb un tractament d'imatges i tipografia molt cuidats, són referents en disseny gràfic contemporani. |
Revista d'actualitat |
Ideologies i màrqueting són els fonaments d'una revista d'actualitat, des de revistes amb temàtiques polítiques, musicals, sensacionalistes, d'informació general, etc. cadascuna s'adequarà al màxim al seu públic objectiu, i intentarà motivar la compra de la revista. Compositivament tenen un muntatge molt àgil, la majoria de les revistes esdevenen collages! La rapidesa amb què es componen aquestes revistes requereix un alt grau de creativitat i capacitat de reacció per a adequar-se als mitjans. |
Revistes científiques |
El color, la il·lustració, la fotografia i els esquemes es fan amb molta cura i sobrietat. Són revistes que han de transmetre seguretat i alhora ser comprensibles i arribar al lector, donant la informació de manera útil i fidel. Normalment inclouen una bona secció de referències i bibliografia específica dels temes tractats. |
Catàlegs de venda per correu |
Publicitat i persuasió entren en joc. Hi ha un estudi molt precís del seu públic objectiu, ja que hi ha d'haver un element que en motivi la lectura. S'ha de ser breu i saber condensar bé la informació. Formats diferents, amb color i formes estridents, desplegables, imatges establertes de manera continuada, sense aturar-se, volen produir eufòria i fascinació pel consumisme. El catàleg de moda seria una aplicació similar, amb una línia agressiva i informal. La moda és sinònim de joventut i alegria de viure el moment present. Es fomenta per sobre de tot la independència i la llibertat; aquests conceptes es plasmen sobretot mitjançant la imatge fotogràfica de models que reflecteixen aquestes actituds despreocupades i transgressores. |
El llibre rar i excepcional |
La majoria són iniciatives privades, llibres concebuts amb uns principis ni comercials, ni docents, ni divulgatius ni tècnics. Són projectes personals, d'alt component sensible. No és un llibre de luxe, però se'l podria equiparar en la mesura de tenir un format molt cuidat, d'exclusivitat. Un veritable regal per a la vista i els sentits. |
3.1.2.Jerarquia del text
Ortotipografia"Es pot definir ortotipografia com el protocol i els bons costums de la lletra impresa. Un seguit de paràmetres establerts en la redacció i edició de textos.
Estudi de la gramàtica de la puntuació (les comes i els punts, els dos punts, el punt i coma, els parèntesis, els guions, els signes d'interrogació i els d'exclamació...) d'un text que deriven de les normes de sintaxi, entonació i gust personal en la redacció; com tractar les citacions; l'ús de majúscules i minúscules, la cursiva, les cometes, les versaletes i la negreta; els nombres i números (xifres romanes o aràbigues); com fer les abreviatures (sigles, acrònims, contraccions); les bibliografies (descripcions i referències bibliogràfiques); i també conèixer els elements tipogràfics que prenen part en la composició del text (mides, fonts, estils, particularitats dels símbols i caràcters específics, etc.).
El primer tractat data del 1608 i el va escriure Hieronymus Hornschuch, portava per títol: Ortotipografia, manual per als que han de corregir impresos, i consells útils i necessaris per als he han de publicar els seus propis escrits. Tradicionalment s'han ocupat de la tasca de la correcta redacció i revisió dels textos els anomenats correctors (persones amb formació lingüística en filologia), però des de l'entrada en escena de l'autoedició s'estan perdent aquests especialistes intermediaris en detriment d'una òptima redacció del text.
Hi ha dues tradicions tipogràfiques: l'anglosaxona i la continental europea (o també anomenada francesa), ambdues són de fet molt diferents, però ambdues segueixen un "codi tipogràfic" propi, amb unes convencions editorials establertes segons segles d'experiència. No són normes ni lleis estanques, són obertes i flexibles, però aquest pluralisme no significa manca de sentit i claredat en l'edició de textos.
S'ha d'intentar saber mesurar cada pas, consensuar cada decisió presa. No hi ha un sistema únic, però sí hi ha un ordre establert, una lògica, una coherència interna que no impossibilita la llibertat creativa, sempre que es faci amb responsabilitat i sent respectuosos amb la tradició; creant textos i composicions que siguin estètiques i alhora funcionals, sobretot quan es treballa dins del món del llibre i la seva edició."
Josep Pujol i Joan Solà (1995). Ortotipografia. Manual de l'autor, l'autoeditor i el dissenyador gràfic. Barcelona: Columna Editorial.
3.1.3.La combinació tipogràfica
3.1.4.La pàgina impresa: mides i proporcions
-
El sistema tradicional. En els inicis de la impremta, la mida del full de paper estàndard era de 406 × 508 mm i de 482 × 609 mm. Les mides de pàgina eren el foli (mitja pàgina), el quart (un quart de pàgina) i un octau (una octava part del full). Les mides variaven segons quina era la mida de la pàgina. El foli i l'octau eren les que més s'aproximaven a la secció àuria.
-
El sistema americà. El principal desavantatge del sistema americà respecte del sistema ISO/DIN és que en passar d'una mida a una altra no es mantenen les proporcions, i el fet que cada país ha anat evolucionant les seves pròpies mesures. Actualment, hi ha la tendència generalitzada d'adaptar-se al sistema més popular i flexible d'ISO malgrat es troba amb el problema del cost que requereix canviar tota la maquinària del sector de producció i manipulació del paper.
3.1.5.Lectura i composició de pàgina
2) la zona de guaret forta (ubicada a la franja superior dreta),
3) la zona de guaret dèbil (ubicada a la franja inferior esquerra) i
4) la zona terminal (inferior dreta).
-
el llom i el marge superior són una novena part de la pàgina;
-
el marge interior és la meitat del marge exterior;
-
l'alçària del bloc de text ha de ser equivalent a l'amplària de la pàgina.
3.1.6.Maquetació: retícules i columnes
-
Full gran, mida llençol (broadsheet, 600 mm × 380 mm), normalment de caire més intel·lectual.
-
Tabloides: la meitat dels broadsheets (380 mm × 300 mm) considerats de caire més sensacionalista.
-
Berliner o midi (470 mm × 315 mm): l'estil Europeu, El País en seria un exemple.
-
De revista: format similar a les revistes, com el cas de l'ABC.
3.1.7.Text i imatge
3.2.Composició tipogràfica per pantalla
3.2.1.Llegir per pantalla
-
Redactar el text d'una manera concisa i directa.
-
Estructurar els continguts en grups lògics d'informació, categories i subcategories; millor diferenciar cada part en pàgines diferents. Aquestes han d'estar ben connectades; un sistema de navegació adequat és essencial. Aquesta partició s'ha de basar en els continguts, no en la forma. Cadascun ha de tenir sentit propi i independent, malgrat pugui estar relacionat amb la resta.
-
Utilitzar sistemes modulars per a presentar la informació, consistents i ben especificats. Facilitar la lectura "d'escaneig" que fa el lector per pantalla.
-
Anar al gra: evitar benvingudes i presentacions innecessàries.
-
Escriure mitjançant la construcció d'oracions simples, no emprar massa subordinades ni la veu passiva. Localitzar el subjecte de manera clara.
-
Emprar veu activa millor que la passiva. Mantenir-se en un mateix estil en tota la redacció. Si s'usa en primera persona, o en tercera del singular, o en plural, ser coherent.
-
Pensar globalment, estem dissenyant per al Web. Evitar convencions massa locals en les dates, metàfores concretes, dites populars, etc.
-
Emprar nombres en comptes d'escriure la xifra complet. Dir 1985 en comptes de mil nou-cents vuitanta-cinc, però no emprar nombres en estimacions genèriques; millor dir cent mil espectadors que 100.000 espectadors.
-
Evitar massa vincles, ja que ens trenca la continuïtat en la lectura. Millor considerar incorporar al final del text una llista dels vincles referenciats en un article: estan igualment accessibles i no despisten el lector, no el perdrem des d'un inici.
-
Evitar massa nivells tipogràfics, sobretot en l'emfasitzat. És molt important marcar una jerarquia visual de la informació amb el mínim d'elements possibles, emprant fulls d'estil CSS per a ser consistents i alhora crear un disseny adaptat i fàcil de modificar.
-
Sembla una cosa òbvia, però és important repassar el text a fons, passant-hi el corrector. Un text amb faltes i mal escrit es tradueix en una desconfiança del lector.
-
Vigilar la conversió que pateix el text quan passa d 'un editor de textos a format web. Hi ha caràcters, com nombres, signes específics..., que es poden perdre o que poden variar. Sempre s'ha de repassar.
-
Títol de la pàgina <title>. Els títols en web són molt importants: és la primera porció d'informació que veiem. Intentar que en la descripció del títol d'una pàgina web s'utilitzin paraules clau dels temes que contenen, de manera clara i concisa.
-
Titulars principals <h1> <h2>
-
Les primeres línies dels paràgrafs dels blocs de text. Per això és important fer servir la metodologia de piràmide invertida en la redacció dels continguts.
-
L'etiqueta <alt> per a definir els continguts de les imatges i altres elements invisibles per als cercadors.
-
Les etiquetes <meta>, que es col·loquen a l'encapçalament de cada pàgina (<head>) per a donar informació sobre els continguts de la pàgina. Dins aquesta etiqueta es poden posar continguts per als robots de cerca etiquetats amb un nom com a keywords, author, description.
-
El nom d'arxiu que es dóna a la pàgina web també compta!
3.2.2.Estructura i disseny de pàgina web
-
Manual d'identitat global de l'empresa o institució que es representa.
-
Sistemes de navegació i arquitectura adaptats a l'empresa o institució.
-
Disseny amb fulls d'estil en cascada (cascading style sheets, CSS) i codi xhtml, adaptabilitat i flexibilitat.
-
Emprar una semàntica coherent en els continguts.
-
Programa definit sobre l'ús de la tipografia.
-
Compliment dels estàndards en accessibilitat.
-
Compatibilitat amb la majoria dels sistemes operatius i navegadors.
3.2.3.Adaptabilitat i fulls d'estil en cascada
<link rel="stylesheet" type="text/css" href="pantalla.css" media="pantalla"/><link rel="stylesheet" type="text/css" href="imprimir.css" media="imprimir"/><link rel="stylesheet" type="text/css" href="mobil.css" media="mobil"/>
-
Separació del contingut i el disseny.
-
Control eficaç sobre gran quantitat de documents.
-
Control tipogràfic amb menys codi.
-
Més opcions en la formatació.
-
Adaptabilitat, usabilitat universal, es pot adaptar a molts sistemes. A més, cada usuari pot establir quin full d'estil li és més òptim per a la seva visualització.
-
Dóna coherència al disseny global del lloc web.
3.2.4.Especificacions de la tipografia per pantalla
body { font: 1em/1.3em Georgia, "Times New Roman", serif; }
Per a sangria emprar la propietat de text-indent al paràgraf <p style="text-indent: 2em">Loren ipsum...</p> Per a separar espais, aplicar la propietat de margin al paràgraf <p style="margin-bottom: 1.2em">loren ipsum...</p>
Exemple.html ... dins de body <div id="capa1"> Posar els continguts: imatges, text, animacions, etc.<br/> </div> Estil_Exemple.css #capa1 { /*aquí definim les propietats de la capa*/ background-color: #fff; margin: auto; color: #000; }
-
extern (fulls CSS enllaçats),
-
intern (full d'estil incrustat dins de la pàgina html),
-
dins del codi (estil definit dins de les mateixes etiquetes HTML fent servir l'atribut style).
Famílies tipogràfiques
|
Tipografies
|
---|---|
Serif-web safe fonts |
Bookman Old Style Garamond Georgia Palatino Linotyoe Book antiqua Times New Roman |
Sans-serif web safe fonts |
Arial, Arial Black Helvetica Gadget Impact Charcoal Geneva New York Trebuchet Verdana Lucida sans unicode Tahoma ... |
Monospace web safe fonts |
Courier Courier New Lucida console |
Fonts instal·lades per defecte en Windows, Mac OS i Linux |
Serif |
Georgia Times New Roman |
Sans-serif |
Arial Arial Black Impact Trebuchet MS Verdana |
|
Cursiva |
Comic Sans MS |
|
Monospace |
Andale Mono Courier New |
|
Fonts instal·lades per defecte en Windows i Mac OS, però no en Linux |
Sans-serif |
Arial Narrow Tahoma |
Fonts instal·lades per defecte en Mac OS i Linux, però no en Windows |
Serif |
Times |
Sans-serif |
Helvetica |
|
Monospace |
Courier |
p { font-family: "Times New Roman", Georgia, serif }
p { font-size: 1em; text-indent: 2em; }
-
Els lectors prefereixen llegir el text amb mides grans, més del que voldrien els dissenyadors. Val a dir que aquests normalment es decanten per mides petites per a poder encabir més continguts en un espai ja de per si força limitat.
-
L'interlineat ha de ser prou generós per a llegir còmodament. L'important és trobar l'equilibri entre estètica i llegibilitat. Si l'usuari no pot llegir còmodament, per molt ben feta que estigui la pàgina, no serà funcional.
Recomanació
|
Exemple
|
---|---|
Nivells iguals de brillantor en pantalla produeixen la dificultat, fins i tot desaparició del text. |
Text groc sobre fons blanc, ambdós colors són massa brillants. |
Emprar una brillantor de nivell intermedi permetrà al dissenyador treballar amb colors de text més clars i més foscos alhora. |
Emprar un color terciari com a fons, poc saturat, i veure com funciona amb text de color similar però més fosc o més clar. |
Un nivell reduït de brillantor en el color del tipus pot resultar poc pràctica sobre fons foscos. |
Text blau marí sobre gris |
Emprar un text acromàtic (gris) sobre un fons cromàtic en pot reduir la llegibilitat. |
Text gris sobre fons groc |
Combinar colors complementaris provoca un difuminat lleuger en els marges dels contorns dels caràcters; si la brillantor és molt alta pot provocar un efecte de parpelleig molt molest. |
Text verd sobre fons vermell |
Creada per Das Plankton, Contrast-A (http://contrast-a.dasplankton.com/) és una petita aplicació lliure en format web molt pràctica per a estudiar diferents opcions possibles abans de decidir-se per una combinació cromàtica o una altra. Permet als usuaris interactuar i experimentar amb diferents combinacions cromàtiques, verificar el tipus de contrast d'acord amb els estàndards WCAG 2.0 i 1.0 i veure'n els resultats, igualment en diferents afectacions de percepció del color. Permet crear paletes de color específiques.