Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS Fuentes - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 29 de diciembre de 2020 por Amadeo M.

107 visualizaciones

Más información Transcripción

Descargar la transcripción

Empecemos con las fuentes, los tipos de letras, los font. 00:00:01
Entonces vamos a ir viendo una serie de características. 00:00:05
Por ejemplo, el interlineado, cuál es la altura que dejamos entre línea y línea. 00:00:09
Si ponemos 100% es lo mismo que no poner nada, es decir, es así, exactamente así. 00:00:16
Si ponemos 200% estamos dejando una línea entre líneas, ¿de acuerdo? 00:00:22
Con eso podemos ir jugando y utilizar incluso otros valores como 1,5M, lo que impida la información que queremos mostrar. 00:00:27
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. 00:00:36
Una propiedad muy importante en las fuentes quizá lo más es Font. 00:00:48
Font, además, tiene una serie de subpropiedades, que son font-style, font-variant, font-weight, font-family, etcétera, etcétera. 00:00:51
Bueno, en este caso, font, le estamos diciendo que tenga 150% del tipo de letra sans-serif, y esto quedaría así. 00:01:00
Un sans-serif es un tipo genérico. En Windows suele ser arial, como indica ahí. 00:01:11
Y entonces, bueno, pues esto es como quedaría. 00:01:16
podemos poner que la fuente está en negrita 00:01:18
que va a tenerse al 90% de tamaño 00:01:22
de tipo mono space 00:01:25
bien, pues la veríamos de esta manera 00:01:27
de acuerdo, aquí es como la vemos 00:01:30
en tipo mono space es que deja un espacio igual 00:01:32
para cada uno de los caracteres 00:01:35
vemos que la i, que suele estar más pequeña 00:01:37
en otros conjuntos de caracteres 00:01:39
aquí ocupa igual que cualquier otra letra 00:01:43
vemos en el ejemplo de arriba, por ejemplo 00:01:45
Como la I ocupaba muy poco respecto a la O, por ejemplo 00:01:47
Bueno, así podemos indicar muchas características 00:01:50
Muchas características en cualquier texto 00:01:53
E incluso, incluso, indicar cuestiones como el tipo de letra que vamos a ir aplicando 00:01:57
Bueno, ¿qué ocurre aquí? 00:02:05
Que estas propiedades tienen que estar en el orden correcto 00:02:07
Lo cual es bastante difícil, sobre todo al principio, de recordar en qué orden está 00:02:11
con lo cual si al principio no están muy seguros 00:02:15
en qué orden tienen que aparecer las cuestiones 00:02:18
pues no tienen más que ir a las subpropiedades 00:02:20
font-height 00:02:22
lo pongo a bold 00:02:24
font-family lo pongo a sans-serif 00:02:25
etcétera, etcétera 00:02:28
para irlo realizando 00:02:29
bien 00:02:31
¿qué más cuestiones podemos trabajar? 00:02:32
pues otros valores como caption, icon, menu, etcétera 00:02:37
que hacen referencia a los tipos de letra 00:02:41
que utiliza el sistema operativo 00:02:42
para definir esos elementos 00:02:43
entonces bueno, pues aquí tenemos lo que utiliza 00:02:45
en este caso estamos trabajando en Google Chrome 00:02:48
y dentro del sistema operativo Windows 00:02:51
pues entonces tendremos esto que estamos trabajando 00:02:54
un elemento muy importante por supuesto es la familia 00:02:57
en la que estamos trabajando, que carácter estamos trabajando 00:03:00
entonces bueno, pues aquí vemos un Arial 00:03:03
un tipo Segoe UI 00:03:06
un tipo Homer Simpson UI 00:03:08
que aquí realmente estamos viendo que poco hace 00:03:10
un tipo Serif, vulgar y corriente 00:03:13
un Serif 00:03:15
que en Windows suele ser un Times New Roman 00:03:18
aquí está haciéndolo 00:03:20
un Sans Serif que es un Arial 00:03:21
aquí lo vemos, un Monospace 00:03:24
que suele ser Courier New en Windows 00:03:26
etc, etc, etc 00:03:28
un Cursive que es este tipo 00:03:30
un Fantasy que es 00:03:32
esto, ¿vale? 00:03:33
entonces bueno, aquí estamos viendo una serie 00:03:36
de características, si ponemos 00:03:38
varias familias separadas por comas 00:03:40
él intenta 00:03:42
Buscar la primera que haya 00:03:44
Si la encuentra bien y si no 00:03:45
Lo aplica el siguiente 00:03:47
¿De acuerdo? 00:03:49
Esto se ve claramente que son dos caracteres 00:03:51
Dos tipos de letra distintas 00:03:54
Esta primera ha encontrado dentro de Windows 00:03:55
La fuente Constantia 00:03:58
Y entonces lo ha puesto de esta manera 00:04:00
Si no lo hubiera encontrado lo hubiera puesto 00:04:01
Con esta fuente, normal y corriente 00:04:03
¿De acuerdo? Esto es lo que estamos viendo aquí 00:04:05
Bien 00:04:07
De tamaño 00:04:11
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. 00:04:13
Pero aparte hay una serie de valores como absolutos. 00:04:22
Estos valores son, pues desde el muy pequeñito, XXsmall, hasta XXlarge, ¿de acuerdo? 00:04:25
Todos estos tamaños van a definir esas características. 00:04:32
Y esto los elige el propio navegador, con lo cual se pueden poner y dejar que tome su decisión. 00:04:37
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. 00:04:41
Podemos utilizar cualquiera de las medidas que ya conocemos, o unidades relativas, para todo ello. 00:04:50
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. 00:04:55
Aquí nos pone ejemplos, además, en distintos tipos de letras, cómo van apareciendo. 00:05:03
el style, el tipo de letra 00:05:08
que habitualmente son oblicua 00:05:11
entonces se inclina 00:05:13
en itálicas además de inclinarse 00:05:15
algunas letras cambian 00:05:17
vemos aquí que la A en este caso 00:05:18
ha pasado a ser una redondeada 00:05:20
no la A de mecanografía 00:05:22
sabiendo todo esto 00:05:24
pues uno va trabajando 00:05:27
y va diseñando su tipo de letra 00:05:30
su tipo de letra completamente 00:05:33
o diseñando un párrafo 00:05:34
en el formato que cada uno quiera 00:05:36
bueno 00:05:38
tenemos también variantes 00:05:40
entonces una variante es normal 00:05:41
un párrafo normal y este mismo párrafo 00:05:44
diciendo small caps 00:05:46
entonces fíjense que esto cambia 00:05:48
a este formato que hay aquí 00:05:50
hay un montón de características 00:05:52
con las cuales no es cuestión de ir una a una 00:05:54
hay algunas 00:05:56
muy bonitas aparentemente 00:05:57
entonces esta por ejemplo que pone 00:06:00
mi mamá me mima 00:06:02
pues simplemente hemos dicho que haga esto 00:06:03
que busque esto, muy bien 00:06:06
pues él lo intenta buscar 00:06:08
y así vamos 00:06:09
una a una cambiando los distintos 00:06:11
elementos, de acuerdo 00:06:14
hay un montón de yormas, no vamos a ir 00:06:15
a todos, pero lo que si 00:06:18
queremos es saber 00:06:19
que también podemos definir 00:06:22
mediante una regla arroba 00:06:24
una serie de tipos, entonces yo puedo 00:06:25
definir que font family 00:06:27
que esta familia 00:06:29
que se llama encode sans es normal 00:06:31
y que su sede 00:06:33
caracteres, lo podemos encontrar 00:06:35
ahí, en este formato 00:06:38
entonces después lo podemos 00:06:40
decir si está normal, si está 00:06:41
condensada o expandida 00:06:43
y podemos utilizar esto de aquí 00:06:45
bien 00:06:48
¿podemos meter fuentes 00:06:49
que no tengamos? pues sí 00:06:51
podemos meterlas, podemos utilizar 00:06:53
el webopenformat 00:06:55
esto 00:06:57
lo definimos, la fuente que queremos utilizar 00:06:58
y después al párrafo le decimos 00:07:01
cómo se llama esa fuente 00:07:03
y sus características 00:07:05
por ejemplo, esta fuente que nos hemos bajado 00:07:06
de algún sitio, la instalamos 00:07:09
en nuestra web 00:07:11
y entonces nos sirve para poner una 00:07:13
característica de carácter como este 00:07:14
y es más, Google Fonts 00:07:17
permite enlazar 00:07:20
a su propia URL y nos devuelve 00:07:21
un montón de páginas 00:07:23
no voy a contarles 00:07:25
de tipos de letras, no voy a contarles todas las características 00:07:26
aquí si están interesados, pues entran 00:07:29
en Google Fonts y ven como se pueden 00:07:31
o bien enlazar a una de ellas 00:07:34
podemos enlazar 00:07:36
o bien descargársela directamente 00:07:37
y trabajar con esas fuentes 00:07:40
el tema 00:07:42
de las fuentes 00:07:44
es uno de los temas 00:07:45
que han sido más importantes desde que 00:07:48
empezó la imprenta, con lo cual 00:07:50
es un tema muy interesante, que además 00:07:52
está implicado concretamente 00:07:54
todo el tema de protección de datos 00:07:56
y protección de 00:07:57
copyright 00:07:59
de derechos de autor, porque 00:08:01
cada una de las letras que utilizamos pueden tener 00:08:03
esos privilegios 00:08:06
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
107
Fecha:
29 de diciembre de 2020 - 9:56
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
08′ 10″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
62.76 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid