1
00:00:01,010 --> 00:00:05,190
Empecemos con las fuentes, los tipos de letras, los font.

2
00:00:05,889 --> 00:00:09,529
Entonces vamos a ir viendo una serie de características.

3
00:00:09,529 --> 00:00:16,070
Por ejemplo, el interlineado, cuál es la altura que dejamos entre línea y línea.

4
00:00:16,489 --> 00:00:21,649
Si ponemos 100% es lo mismo que no poner nada, es decir, es así, exactamente así.

5
00:00:22,170 --> 00:00:27,629
Si ponemos 200% estamos dejando una línea entre líneas, ¿de acuerdo?

6
00:00:27,629 --> 00:00:36,030
Con eso podemos ir jugando y utilizar incluso otros valores como 1,5M, lo que impida la información que queremos mostrar.

7
00:00:36,829 --> 00:00:47,270
Cuidado porque los temas de usabilidad pueden verse influenciados si utilizamos como por ejemplo esto, donde casi casi no se va en las líneas, está todo muy apretado.

8
00:00:48,229 --> 00:00:51,729
Una propiedad muy importante en las fuentes quizá lo más es Font.

9
00:00:51,729 --> 00:01:00,070
Font, además, tiene una serie de subpropiedades, que son font-style, font-variant, font-weight, font-family, etcétera, etcétera.

10
00:01:00,189 --> 00:01:10,849
Bueno, en este caso, font, le estamos diciendo que tenga 150% del tipo de letra sans-serif, y esto quedaría así.

11
00:01:11,090 --> 00:01:16,290
Un sans-serif es un tipo genérico. En Windows suele ser arial, como indica ahí.

12
00:01:16,790 --> 00:01:18,650
Y entonces, bueno, pues esto es como quedaría.

13
00:01:18,650 --> 00:01:22,670
podemos poner que la fuente está en negrita

14
00:01:22,670 --> 00:01:25,670
que va a tenerse al 90% de tamaño

15
00:01:25,670 --> 00:01:27,609
de tipo mono space

16
00:01:27,609 --> 00:01:30,090
bien, pues la veríamos de esta manera

17
00:01:30,090 --> 00:01:32,310
de acuerdo, aquí es como la vemos

18
00:01:32,310 --> 00:01:35,769
en tipo mono space es que deja un espacio igual

19
00:01:35,769 --> 00:01:37,530
para cada uno de los caracteres

20
00:01:37,530 --> 00:01:39,510
vemos que la i, que suele estar más pequeña

21
00:01:39,510 --> 00:01:43,090
en otros conjuntos de caracteres

22
00:01:43,090 --> 00:01:45,209
aquí ocupa igual que cualquier otra letra

23
00:01:45,209 --> 00:01:47,010
vemos en el ejemplo de arriba, por ejemplo

24
00:01:47,010 --> 00:01:50,129
Como la I ocupaba muy poco respecto a la O, por ejemplo

25
00:01:50,129 --> 00:01:53,930
Bueno, así podemos indicar muchas características

26
00:01:53,930 --> 00:01:57,409
Muchas características en cualquier texto

27
00:01:57,409 --> 00:02:05,049
E incluso, incluso, indicar cuestiones como el tipo de letra que vamos a ir aplicando

28
00:02:05,049 --> 00:02:07,790
Bueno, ¿qué ocurre aquí?

29
00:02:07,909 --> 00:02:11,409
Que estas propiedades tienen que estar en el orden correcto

30
00:02:11,409 --> 00:02:15,770
Lo cual es bastante difícil, sobre todo al principio, de recordar en qué orden está

31
00:02:15,770 --> 00:02:18,310
con lo cual si al principio no están muy seguros

32
00:02:18,310 --> 00:02:20,090
en qué orden tienen que aparecer las cuestiones

33
00:02:20,090 --> 00:02:22,789
pues no tienen más que ir a las subpropiedades

34
00:02:22,789 --> 00:02:24,090
font-height

35
00:02:24,090 --> 00:02:25,830
lo pongo a bold

36
00:02:25,830 --> 00:02:28,729
font-family lo pongo a sans-serif

37
00:02:28,729 --> 00:02:29,629
etcétera, etcétera

38
00:02:29,629 --> 00:02:31,509
para irlo realizando

39
00:02:31,509 --> 00:02:32,969
bien

40
00:02:32,969 --> 00:02:37,400
¿qué más cuestiones podemos trabajar?

41
00:02:37,620 --> 00:02:41,080
pues otros valores como caption, icon, menu, etcétera

42
00:02:41,080 --> 00:02:42,319
que hacen referencia a los tipos de letra

43
00:02:42,319 --> 00:02:43,439
que utiliza el sistema operativo

44
00:02:43,439 --> 00:02:45,400
para definir esos elementos

45
00:02:45,400 --> 00:02:48,500
entonces bueno, pues aquí tenemos lo que utiliza

46
00:02:48,500 --> 00:02:51,800
en este caso estamos trabajando en Google Chrome

47
00:02:51,800 --> 00:02:54,560
y dentro del sistema operativo Windows

48
00:02:54,560 --> 00:02:57,020
pues entonces tendremos esto que estamos trabajando

49
00:02:57,020 --> 00:03:00,139
un elemento muy importante por supuesto es la familia

50
00:03:00,139 --> 00:03:03,740
en la que estamos trabajando, que carácter estamos trabajando

51
00:03:03,740 --> 00:03:06,020
entonces bueno, pues aquí vemos un Arial

52
00:03:06,020 --> 00:03:08,360
un tipo Segoe UI

53
00:03:08,360 --> 00:03:10,979
un tipo Homer Simpson UI

54
00:03:10,979 --> 00:03:13,039
que aquí realmente estamos viendo que poco hace

55
00:03:13,039 --> 00:03:15,379
un tipo Serif, vulgar y corriente

56
00:03:15,379 --> 00:03:18,379
un Serif

57
00:03:18,379 --> 00:03:20,800
que en Windows suele ser un Times New Roman

58
00:03:20,800 --> 00:03:21,780
aquí está haciéndolo

59
00:03:21,780 --> 00:03:24,360
un Sans Serif que es un Arial

60
00:03:24,360 --> 00:03:26,400
aquí lo vemos, un Monospace

61
00:03:26,400 --> 00:03:28,740
que suele ser Courier New en Windows

62
00:03:28,740 --> 00:03:30,479
etc, etc, etc

63
00:03:30,479 --> 00:03:32,259
un Cursive que es este tipo

64
00:03:32,259 --> 00:03:33,759
un Fantasy que es

65
00:03:33,759 --> 00:03:35,680
esto, ¿vale?

66
00:03:36,039 --> 00:03:38,580
entonces bueno, aquí estamos viendo una serie

67
00:03:38,580 --> 00:03:40,439
de características, si ponemos

68
00:03:40,439 --> 00:03:42,620
varias familias separadas por comas

69
00:03:42,620 --> 00:03:44,280
él intenta

70
00:03:44,280 --> 00:03:45,819
Buscar la primera que haya

71
00:03:45,819 --> 00:03:47,439
Si la encuentra bien y si no

72
00:03:47,439 --> 00:03:49,620
Lo aplica el siguiente

73
00:03:49,620 --> 00:03:50,180
¿De acuerdo?

74
00:03:51,780 --> 00:03:54,020
Esto se ve claramente que son dos caracteres

75
00:03:54,020 --> 00:03:55,500
Dos tipos de letra distintas

76
00:03:55,500 --> 00:03:58,400
Esta primera ha encontrado dentro de Windows

77
00:03:58,400 --> 00:04:00,259
La fuente Constantia

78
00:04:00,259 --> 00:04:01,919
Y entonces lo ha puesto de esta manera

79
00:04:01,919 --> 00:04:03,840
Si no lo hubiera encontrado lo hubiera puesto

80
00:04:03,840 --> 00:04:05,659
Con esta fuente, normal y corriente

81
00:04:05,659 --> 00:04:07,939
¿De acuerdo? Esto es lo que estamos viendo aquí

82
00:04:07,939 --> 00:04:11,400
Bien

83
00:04:11,400 --> 00:04:13,379
De tamaño

84
00:04:13,379 --> 00:04:22,480
El tamaño, pues generalmente lo que estamos a hablar es en porcentaje o en EM, para poder, estas unidades, el tamaño que vamos a trabajar.

85
00:04:22,699 --> 00:04:24,980
Pero aparte hay una serie de valores como absolutos.

86
00:04:25,420 --> 00:04:32,639
Estos valores son, pues desde el muy pequeñito, XXsmall, hasta XXlarge, ¿de acuerdo?

87
00:04:32,920 --> 00:04:36,459
Todos estos tamaños van a definir esas características.

88
00:04:37,240 --> 00:04:41,860
Y esto los elige el propio navegador, con lo cual se pueden poner y dejar que tome su decisión.

89
00:04:41,860 --> 00:04:49,540
Y también hay tamaños relativos, por ejemplo, Larger, que es más grande que el que hay, o Smaller, que es más pequeño que el que hay.

90
00:04:50,540 --> 00:04:55,139
Podemos utilizar cualquiera de las medidas que ya conocemos, o unidades relativas, para todo ello.

91
00:04:55,879 --> 00:05:03,800
Podemos definir el grosor del trazo, el font-weight. Antes hemos visto Bold, que es uno de los que aparece aquí, o valores de todo este tipo.

92
00:05:03,800 --> 00:05:08,100
Aquí nos pone ejemplos, además, en distintos tipos de letras, cómo van apareciendo.

93
00:05:08,100 --> 00:05:11,079
el style, el tipo de letra

94
00:05:11,079 --> 00:05:13,459
que habitualmente son oblicua

95
00:05:13,459 --> 00:05:15,079
entonces se inclina

96
00:05:15,079 --> 00:05:17,319
en itálicas además de inclinarse

97
00:05:17,319 --> 00:05:18,600
algunas letras cambian

98
00:05:18,600 --> 00:05:20,759
vemos aquí que la A en este caso

99
00:05:20,759 --> 00:05:22,959
ha pasado a ser una redondeada

100
00:05:22,959 --> 00:05:24,920
no la A de mecanografía

101
00:05:24,920 --> 00:05:27,660
sabiendo todo esto

102
00:05:27,660 --> 00:05:30,000
pues uno va trabajando

103
00:05:30,000 --> 00:05:33,040
y va diseñando su tipo de letra

104
00:05:33,040 --> 00:05:34,779
su tipo de letra completamente

105
00:05:34,779 --> 00:05:36,540
o diseñando un párrafo

106
00:05:36,540 --> 00:05:38,600
en el formato que cada uno quiera

107
00:05:38,600 --> 00:05:40,019
bueno

108
00:05:40,019 --> 00:05:41,959
tenemos también variantes

109
00:05:41,959 --> 00:05:44,240
entonces una variante es normal

110
00:05:44,240 --> 00:05:46,560
un párrafo normal y este mismo párrafo

111
00:05:46,560 --> 00:05:48,079
diciendo small caps

112
00:05:48,079 --> 00:05:50,319
entonces fíjense que esto cambia

113
00:05:50,319 --> 00:05:52,360
a este formato que hay aquí

114
00:05:52,360 --> 00:05:54,839
hay un montón de características

115
00:05:54,839 --> 00:05:56,980
con las cuales no es cuestión de ir una a una

116
00:05:56,980 --> 00:05:57,560
hay algunas

117
00:05:57,560 --> 00:06:00,379
muy bonitas aparentemente

118
00:06:00,379 --> 00:06:02,199
entonces esta por ejemplo que pone

119
00:06:02,199 --> 00:06:03,180
mi mamá me mima

120
00:06:03,180 --> 00:06:06,060
pues simplemente hemos dicho que haga esto

121
00:06:06,060 --> 00:06:08,019
que busque esto, muy bien

122
00:06:08,019 --> 00:06:09,060
pues él lo intenta buscar

123
00:06:09,060 --> 00:06:11,779
y así vamos

124
00:06:11,779 --> 00:06:14,019
una a una cambiando los distintos

125
00:06:14,019 --> 00:06:15,459
elementos, de acuerdo

126
00:06:15,459 --> 00:06:18,079
hay un montón de yormas, no vamos a ir

127
00:06:18,079 --> 00:06:19,939
a todos, pero lo que si

128
00:06:19,939 --> 00:06:22,180
queremos es saber

129
00:06:22,180 --> 00:06:24,120
que también podemos definir

130
00:06:24,120 --> 00:06:25,959
mediante una regla arroba

131
00:06:25,959 --> 00:06:27,800
una serie de tipos, entonces yo puedo

132
00:06:27,800 --> 00:06:29,240
definir que font family

133
00:06:29,240 --> 00:06:31,779
que esta familia

134
00:06:31,779 --> 00:06:33,480
que se llama encode sans es normal

135
00:06:33,480 --> 00:06:35,939
y que su sede

136
00:06:35,939 --> 00:06:38,199
caracteres, lo podemos encontrar

137
00:06:38,199 --> 00:06:40,339
ahí, en este formato

138
00:06:40,339 --> 00:06:41,980
entonces después lo podemos

139
00:06:41,980 --> 00:06:43,699
decir si está normal, si está

140
00:06:43,699 --> 00:06:45,500
condensada o expandida

141
00:06:45,500 --> 00:06:48,240
y podemos utilizar esto de aquí

142
00:06:48,240 --> 00:06:49,540
bien

143
00:06:49,540 --> 00:06:51,959
¿podemos meter fuentes

144
00:06:51,959 --> 00:06:53,759
que no tengamos? pues sí

145
00:06:53,759 --> 00:06:55,939
podemos meterlas, podemos utilizar

146
00:06:55,939 --> 00:06:57,600
el webopenformat

147
00:06:57,600 --> 00:06:58,560
esto

148
00:06:58,560 --> 00:07:01,939
lo definimos, la fuente que queremos utilizar

149
00:07:01,939 --> 00:07:03,800
y después al párrafo le decimos

150
00:07:03,800 --> 00:07:05,379
cómo se llama esa fuente

151
00:07:05,379 --> 00:07:06,620
y sus características

152
00:07:06,620 --> 00:07:09,620
por ejemplo, esta fuente que nos hemos bajado

153
00:07:09,620 --> 00:07:11,699
de algún sitio, la instalamos

154
00:07:11,699 --> 00:07:13,079
en nuestra web

155
00:07:13,079 --> 00:07:14,980
y entonces nos sirve para poner una

156
00:07:14,980 --> 00:07:17,300
característica de carácter como este

157
00:07:17,300 --> 00:07:20,120
y es más, Google Fonts

158
00:07:20,120 --> 00:07:21,300
permite enlazar

159
00:07:21,300 --> 00:07:23,939
a su propia URL y nos devuelve

160
00:07:23,939 --> 00:07:25,959
un montón de páginas

161
00:07:25,959 --> 00:07:26,879
no voy a contarles

162
00:07:26,879 --> 00:07:29,759
de tipos de letras, no voy a contarles todas las características

163
00:07:29,759 --> 00:07:31,699
aquí si están interesados, pues entran

164
00:07:31,699 --> 00:07:34,040
en Google Fonts y ven como se pueden

165
00:07:34,040 --> 00:07:36,360
o bien enlazar a una de ellas

166
00:07:36,360 --> 00:07:37,500
podemos enlazar

167
00:07:37,500 --> 00:07:40,040
o bien descargársela directamente

168
00:07:40,040 --> 00:07:42,420
y trabajar con esas fuentes

169
00:07:42,420 --> 00:07:44,459
el tema

170
00:07:44,459 --> 00:07:45,360
de las fuentes

171
00:07:45,360 --> 00:07:48,060
es uno de los temas

172
00:07:48,060 --> 00:07:50,139
que han sido más importantes desde que

173
00:07:50,139 --> 00:07:52,199
empezó la imprenta, con lo cual

174
00:07:52,199 --> 00:07:54,160
es un tema muy interesante, que además

175
00:07:54,160 --> 00:07:56,439
está implicado concretamente

176
00:07:56,439 --> 00:07:57,920
todo el tema de protección de datos

177
00:07:57,920 --> 00:07:59,360
y protección de

178
00:07:59,360 --> 00:08:01,939
copyright

179
00:08:01,939 --> 00:08:03,959
de derechos de autor, porque

180
00:08:03,959 --> 00:08:06,319
cada una de las letras que utilizamos pueden tener

181
00:08:06,319 --> 00:08:08,459
esos privilegios