Uso de medidas relativas para accesibilidad en texto web

Me quede así cuando al fin supe por que rem en lugar de píxeles （゜ー゜）

Leonardo Castro Tobar

TEXTOS
Se recomienda fuertemente usar medidas relativas como rem, para poder incrementar el tamaño del texto para personas con visibilidad disminuida. Las opciones de navegador que cambian el tamaño de las fuentes no funcionan cuando las fuentes de html en el texto están en pixeles (px).

Joel Dominguez Merino

No me cargaba la clase, pero una chica comento que cambiáramos a el Server A y si funciona.
Todos los créditos para ella.
Solo lo comparto por si alguien también tiene el mismo problema 😃

Luis Palomo

Muy buenos datos!!!

62.5% = 10px (en base al navegador)
1rem = 10px
1.6rem = 16px
etc.

RetaxMaster

Realmente considero que ya no hay necesidad de usar “px” (o al menos usarlo en casos extremadamente específicos) con este “hack” de los rem que aprendimos prácticamente que ya no es necesario, creo que este es uno de los temas que más me encanta jaja, ya quiero llegar al curso de accesibilidad!

Giselle Desiree Boyer Jimenez

Con esta clase entendí mejor la utilidad de rem y me parece genial!

Giselly Romero Nuñez

Un punto importante de Accesibilidad no solo hay que pensar en nosotros, hay que pensar en los demás usuarios que podrían incluso tener una capacidad diferente.
En este curso me lleve mucho aprendizaje, pero esta lección es la mas importante.
Y desde ahora daré lo mejor de mi para ofrecer servicios al alcance de todos.

jonathan Ferreira hernandez

La vuelta es nunca trabajar TEXTO con px, siempre rem

Natalia Molina

Texto

Siempre debemos usar medidas relativas al momento de darle un tamaño a nuestros textos. Esto permitirá a los usuarios incrementar el tamaño de la fuente de ser necesario, lo cual no sucede si usamos medidas absolutas.

Eddy Eder Sucapuca Cruz

ahora si por fin siento que el rem es util

Bryan Bell

Muy bueno. El curso me sirvió mucho para repasar conceptos que ya conocía, pero jamás había escuchado el tema de la accesibilidad, ahora incluso conozco su importancia y bueno, a seguir repasando jeje.

Carlos Ramos

Clase 52 - Textos

¿El manejo del texto es importante en la accesibilidad de un producto/proyecto web?

Sí.

¿Qué aspecto debemos manejar en los textos para que nuestro producto/ proyecto web sea accesible a los demás?

Las medias que usamos para definir el tamaño de estos textos.

¿Qué medida debemos de usar para que los textos de nuestro producto/proyecto web sea accesible?

Rem.

¿Por qué debemos de usar la media rem para que los textos de nuestros productos/proyectos web sean accesibles?

Porque los textos también crecerán si el usuario aumenta el tamaño del texto por medio de una configuración desde el navegador, cosa que no podemos hacer con medidas absolutas como los px.

Mercy María Ix Ballote

no puedo ver este video 😦 se queda cargando

Anfernee Valera

De verdad que después de escuchar el podcast de platzi donde entrevistan a diego, empecé a admirar más su trabajo. Se los recomiendo a todos.

Omar Dario Melendrez

Sinceramente me encanta cuando en clases como esta, le encuentro el sentido a utilizar una herramienta digamos y cual es el beneficio que aporta 😄 me encantó el curso.

Aldo Miguel Ortiz Parodi

44. Mis apuntes sobre: “Textos”

Siempre se deben usar medidas relativas en el texto (em / rem) en vez de px, que es una medida absoluta.

Les comparto el código de la clase:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio, molestiae earum obcaecati voluptatem dolore aperiam, voluptatibus itaque sunt illo in neque hic amet fuga minima, rem voluptate nobis quasi.</p>
</body>
</html>

CSS:

/*RESET*/
html {
    font-size: 62.5%;
}
h1 {
    font-size: 3rem;
}
p {
    font-size: 1.8rem;
}

Jhean Pacheco

Uff, no sabía el poder de las medidas relativas.

Manuel David Perez Higuera

Ahora **REM **si hace sentido

Javi Johan Rodríguez Giraldo

Es bueno darse cuenta de que como desarrollador debes pensar en la accesibilidad. Las herramientas que creamos son para la gente y eso incluye a todos.

Mario Alvarez

Un tema que tambien debemos tener en cuenta es la accesibilidad para las personas que padece de daltonismo
aqui unos tips para mejorar las pagians en estos aspectos:

Esteban Casallas

Woo no conocía ese detalle al manejar medidas absolutas en el texto, este es un curso muy completo !

Anderson Josué Oroya Silva

Que importante es todo esto la verdad. Programar una página web es más que solo escribir código.

Jhorman Patiño García

Principales errores que se comenten en Accesibilidad

Imágenes: El atributo ALT no proporcionar una descripción adecuada.
Colores: No usar el contraste adecuado entre colores.

Gutierrez Diego

Otro truco que desconocía, tomando nota y aprendiendo. Me ha encantado este curso. 🤪👍🏻👨🏻‍💻✅📈🚀🔥🙆🏻‍♂️✌

John Alassio

Me ancanto la clase anterior porque encontre a un nuevo amigo!
EL WIDTH: 100% !!!
jajaja

Brian Hawkins

Cuando lo explicaste en clases pasadas no noté la importancia que podría tener ese pequeño cambio. Excelente!

Fausto Emilio Salgado Morales

En esta parte, el profe Diego se refiere a implementar medidas relativas como rem :)

Reinaldo Mendoza

No había pensado en esa posibilidad de ayudar a las personas con dificultades en accesibilidad, usaba las medidas relativas pero no me imaginaba que podían ser tan útiles.

Omar Betanzos

Les recomiendo el Curso de Accesibilidad web es algo que no hay que dejar para el final del proyecto y puede distinguirnos de forma importante de otros desarrolladores.

SebasPosada

Gracias Diego por enseñarnos buenas prácticas con las que podamos llevar la información y/o el producto a más personas entendiendo sus dificultades.

Iván Arcos

Antes de esta clase, no había reparado en este tema de los textos y la ayuda visual que representa para muchas personas, ¡gracias, Diego por esta clase!

Gabriela Mabel Mignone

Este tema es muy importante.

Yair Lira

Incluso la fuente es esencial.
En el curso de Introducción al diseño se recomiendan las Sans-Serif para digital y Serif para impresiones

user_deleted_1572741

✨ Utilizar en textos medidas relativas y no absolutas.

Edinson Parra Bahos

hace 3 meses

maravilloso que el profesor Granda nos muestra el argumento poderoso de porqué debemos utilizar REM en el tamaño de las fuentes. Con esta práctiva somos mas inclusivos en nuestros proyectos

Charles Duck Castillo Rosas

hace 2 meses

resumen hipermegacorto: no uses pixeles para el tamaño de tus textos porque cuando personas con problemas visuales necesiten aumentar el tamaño no podrán hacerlo, usa rem es mas eficiente y mas cómodo para las personas

José R. Lemus

INSERTE GIFT

Esta clase me voló la mente… LITERAL.

He estado haciendo las cosas mal en accesibilidad de textos, me costó entender el REM al principio y ahora sé porque es SERIAMENTE IMPORTANTE. Me he sentido ignroante por todo estos años… comenzaré a aplicarlo a partir de ahora.

JoaoGarduno

La importancia de las medidas Relativas son:

Las medidas relativas permiten tener efecto en configuraciones del dispositivo o navegado web
Con las medidas relativas podemos proporcionar o habilitar esta opción para todo tipo de usuario persona.

Israel Lopez Lujan

Para hacer uso de textos en nuestros proyectos, se aconseja manejarlos con medidas relativas.

Andrés Castellanos

El uso de rem permite que el navegador manipule el tamaño del texto, lo que es conveninete para la accesibilidad. Por lo tanto, es buena práctica siempre usar rem como unidad de medida para los téxtos.

Jose Barboza

se ve que es necesario cambiar de px a medidas relativas como rem

Cristian Vargas

Lo curioso es que la home de Platzi esta construida con px :c

Juan Pablo Jimenez

52.-Textos

Aquí nos referimos a la medida de los textos. Todos los developers están acostumbrados a usar pixeles para sus fuentes lo que genera un problema de accesibilidad, porque si queremos aumentar el texto de un proyecto esto no va a poder pasar (porque es absoluta).

Es importante que usemos medidas relativas como rem. De esta manera les damos a las personas con alguna discapacidad un oportunidad de visualizar de mejor manera nuestro producto.

Pablo Aquino

Respecto a los textos en mejor usar medidas relativas, como rem, en lugar de medidas absolutas. Esto mejora la accesibilidad visual.

Jovan Fernández

En este link hablan de los parámetros de accesibilidad
https://www.w3.org/TR/WCAG20/

Sebastian Cifuentes

Esto me aclara que la mejor práctica para manejar los tamaños de las fuentes es con la medida rem.

Irving Juárez

También pueden modificar el tamaño de la letra en html a 6.25%, así un rem valdrá 1, en vez de 10.

Samuel Miranda Martínez

Salí triste de esta clase, tanto desarrollos que hice con fuentes en pixeles 😔

Daniel David Mármol Rivero

Si quedaban dudas en utilizar o no pixeles luego de la clase de REM, en esta es evidente el uso que debemos hacer de las medidas relativas.

IndhiraTejada

Exacto, mientras más claro y preciso, es mejor para el usuario.

Josué David Coreas Paiz

En temas de accesibilidad podemos ver como rem nos ayuda mucho.

Andrés David Loaiza Zamudio

Muy genial este conocimiento ⚡

Fabian Andres

Ya estoy very perdido, el instructor dice que px es una medida absoluta, pero dice que no usemos Px. Pero en el minuto 5:20 dice que implementemos medidas absolutas. Jajajaja, que procede ahí?

Ciro Alejandro Sira Mogollon

mi miopía y astigmatismo te lo agradece

Juan Felipe Angarita Lopez

Cuando trabajas con textos en CSS, hay varias propiedades que puedes utilizar para controlar su apariencia y diseño. Aquí hay algunas propiedades comunes de CSS que se utilizan para estilizar textos:

Color del Texto:

La propiedad color establece el color del texto.
css
Copy code
p {
color: #333; /* Color del texto en hexadecimal */
}
Tamaño del Texto:

La propiedad font-size define el tamaño del texto.
css
Copy code
h1 {
font-size: 24px; /* Tamaño del texto en píxeles */
}
Tipo de Fuente:

La propiedad font-family especifica la fuente utilizada para el texto.
css
Copy code
body {
font-family: ‘Arial’, sans-serif; /* Fuente principal y fuentes de respaldo */
}
Estilo del Texto:

La propiedad font-style define el estilo del texto (normal, cursiva, oblicua).
css
Copy code
em {
font-style: italic; /* Texto en cursiva */
}
Peso de la Fuente (Negrita):

La propiedad font-weight establece el grosor del texto (normal, negrita, números entre 100 y 900).
css
Copy code
strong {
font-weight: bold; /* Texto en negrita */
}
Espaciado entre Líneas:

La propiedad line-height controla el espacio entre líneas.
css
Copy code
p {
line-height: 1.5; /* Espaciado entre líneas como un múltiplo del tamaño de fuente */
}
Espaciado entre Letras:

La propiedad letter-spacing ajusta el espacio entre letras.
css
Copy code
h2 {
letter-spacing: 2px; /* Espaciado entre letras en píxeles */
}
Transformaciones de Texto:

La propiedad text-transform modifica el capitalizado del texto (mayúsculas, minúsculas, capitalizado).
css
Copy code
.uppercase {
text-transform: uppercase; /* Texto en mayúsculas */
}
Decoración del Texto:

La propiedad text-decoration controla la decoración del texto (subrayado, tachado, ninguno).
css
Copy code
a {
text-decoration: underline; /* Subrayado para enlaces */
}
Alineación del Texto:

La propiedad text-align define la alineación del texto (izquierda, derecha, centrado, justificado).
css
Copy code
p {
text-align: justify; /* Texto justificado */
}
Estas son solo algunas de las propiedades de CSS que puedes utilizar para estilizar textos. Puedes combinar y ajustar estas propiedades según tus necesidades para lograr el diseño de texto deseado en tu página web.

Patricia Mago

Texto = Medidas Relativas = REM 💚

SsimorPro

Resumen SM 🚀

No usar medidas absolutas para el texto (o sea pixeles) sino que es mejor usar medidas relativas (Preferiblemente REM), ya que permite que el dispositivo de las personas que necesiten ver mas grande los textos los puedan configurar sin necesidad de que la persona siempre tenga que hacer zoom.

👍💪👍

Pedro Isaac Aguilar

Si gestionamos los textos en píxeles en nuestros documentos CSS, la gente que tenga problemas de la vista y quiera agrandar los textos haciendo uso de la herramienta Opciones que da el navegador, no podrá hacerlo, porque los valores en píxeles permanecen fijos, ya que son valores absolutos. Por eso, la solución es siempre manejar los textos en REM, que es un valor relativo. Fijando previamente el selector de HTML a 62.5%, (donde 1 rem = 10 px) al inicio de nuestro documento style.css.

Mónica Evelyn Quevedo Devia

Excelente clase porque se piensa en la generación de contenidos inlcuyente, para todos

Luis Carlos Zapata García

Todos los desarrolladores estan acostumbrados a usar pixeles en sus fuentes.Esto nos genera un problema de accesibilidad,le estamos quitando oportunidades a personas de baja vision que quieran consumir nuestro contenido.

RobertCharca

Tienes mucha razón. El contraste de los colores debe ser el correcto para evitar la difcultad al leer.

José Mauricio Conto Albán

Minuto 5: Medidas relativas como REM (corrección)

Daniel Said Rodríguez Ortiz

Yo creo que el px es mejor para condiciones, y para el tamaño de las palabras y demas es mejor utilizar medidas relativas como rem

Raul Armas

¡Al fin entendí el por qué del rem! :3

Yeferson Lasso España

gracias por la aclaración!

Juan Diego Loaiza Martinez

Super este tema de accesibilidad.

jorge llanque

Una vez más debo cambiar mis px por rem

Jeyson David Vargas Crespo

Excelente clase…

RENE GUIO

Definitivamente un tema muy importante.

Arthur_Mazius

hay un error en el servidor c no me carga el vídeo espero lo arreglen plis no puedo ver la clase!!!

Pablo Alejandro Figueroa

Captura de pantalla 2024-03-24 172845.png

Andrés Soret Chacin

Importancia de Utilizar Medidas Relativas en el Tamaño de Texto

La accesibilidad es un aspecto fundamental en el diseño web, y la elección de las unidades de medida para el tamaño de texto juega un papel crucial en la experiencia del usuario.

Problema de las Medidas Absolutas en el Tamaño de Texto

Tradicionalmente, los desarrolladores han utilizado unidades de medida absolutas, como píxeles (px), para establecer el tamaño de fuente en sus proyectos.
Sin embargo, el uso de medidas absolutas presenta limitaciones en términos de accesibilidad, ya que impide que los usuarios aumenten el tamaño del texto según sus necesidades visuales.

Ventajas de Utilizar Medidas Relativas, como REM

Las medidas relativas, como REM (root em), permiten establecer el tamaño de fuente en relación con el tamaño del elemento raíz (generalmente el tamaño de fuente predeterminado del navegador).
Utilizar REM en lugar de píxeles proporciona flexibilidad y escalabilidad, ya que el tamaño del texto se ajusta automáticamente según las preferencias del usuario y el dispositivo utilizado.

Implementación de Medidas Relativas en el Tamaño de Texto

Al diseñar un proyecto web, es recomendable utilizar REM para definir el tamaño de fuente de manera consistente en todo el sitio.
Configurar el tamaño de fuente del elemento raíz (html) en un porcentaje (por ejemplo, 62.5%) facilita el cálculo de valores REM equivalentes a píxeles.
Es posible especificar el tamaño de fuente de elementos individuales, como encabezados (h1, h2, etc.) y párrafos, utilizando valores REM en lugar de píxeles.

Beneficios de Utilizar REM para la Accesibilidad

Al emplear medidas relativas en el tamaño de texto, se mejora la accesibilidad del sitio al permitir que los usuarios ajusten el texto según sus necesidades visuales.
La implementación de REM garantiza una experiencia de usuario consistente y adaptable en una variedad de dispositivos y entornos de visualización.

Próximos Pasos

Integrar medidas relativas, como REM, en el diseño y desarrollo de proyectos web para mejorar la accesibilidad y la experiencia del usuario.
Explorar otras prácticas recomendadas en la maquetación HTML y CSS para optimizar la usabilidad y la accesibilidad del sitio.
Continuar aprendiendo sobre técnicas de diseño web inclusivas y centradas en el usuario para crear productos digitales accesibles para todos los usuarios.

Gabriel Ariza

Realmente me encanta esta idea de usar rem en lugar de usar px, funciona muy bien para ajustar los textos

Brajan Velasquez Sarmiento

buen aporte, en lo poco que le logrado captar en el curso, lo del rem ya lo practico

Eric López

Gracias profe…

Manuel Agustín Barrera

Este es un gran aporte, definitivamente quisiera tomar el curso de accesibilidad

David Limon

rem siempre lo veia como una medida mas, pero despues de esta clase, me volo la cabeza, simplemente fascinante…

JHON EMILIO SANCHEZ SANCHEZ

La primera vez que alguien me explica porque usar los REM antes que los PX, supremamente claro CSS, muchisimas gracias Diego 😃

Jonathan Fernando Ramirez Valencia

Ricardo Alfonso Chavez Vilcapoma

REM…REEMPLAZA A PX EN 3,2,1 …

Mauro Legorburu

Es importante entender la importancia de usar medidas relativas (como “rem”) en lugar de usar pixeles, para conseguir un diseño que se adapte a distintos tamaños de pantalla.

Unidades relativas como “rem” permiten a los diseñadores y desarrolladores web aplicar estilos de manera consistente a través de todas las páginas de su sitio web. Esto significa que el diseño se verá igual en todos los dispositivos, ya sean móviles, tablets, ordenadores, etc.

Además, usar unidades relativas significa que los usuarios pueden ajustar el tamaño de la fuente a sus preferencias. Esto también es beneficioso para las personas con discapacidades visuales, ya que pueden aumentar el tamaño de la fuente para hacer que el contenido sea más legible.

Leidy Vaneza Vicente Ccorimanya

que genial 😊

Oscar Alexánder Ortiz Beltrán

Ahora si que he entendido mejor este tema de medidas absolutas y relativas.
https://desarrolloweb.com/articulos/unidades-medida-css-relativas-absolutas.html

Facundo Peralta

REM es GOD.

Emerson Espinoza Aguirre

En CSS, una unidad de medida rem se refiere a la fuente por defecto del documento. Esto significa que si la fuente por defecto del documento es de 16 píxeles, entonces una unidad de rem equivale a 16 píxeles. Sin embargo, esto puede variar dependiendo de la configuración de la fuente por defecto en el documento en cuestión. En general, es importante tener en cuenta que las unidades de medida en CSS son relativas, lo que significa que se basan en el tamaño de la fuente o de otras propiedades en lugar de en una medida absoluta. Esto permite que el diseño sea más adaptable y responsive a diferentes dispositivos y tamaños de pantalla.

ROGER COTRINA

Ahora todo tiene sentido sobre medidas absolutas :v

Nelson David Rincon Osorio

Me parece increible como el conocimiento te permite que haya crear espacios en este caso digitales inclusivos con las personas!, eso me encanta y gracias por eso!..

Cristian Acevedo

muy buena clase

Israel Mauricio Churata Torrez

Como apoyo pueden consultar este video, que lo explica más ampliamente. https://www.youtube.com/watch?v=nz6DIeBdZtY

Luis angel osorio ochoa

en la clase de REM, me segui como un enfermo sin darle tanta importancia y ahora que llegue a esta clase me tuve que regresar :C a quien mas le paso?

Leonardo Véliz

Quiso decir relativas, REM/EM/% son medidas relativas, no absolutas.

Abidan Triguero Calle

RESUMEN CLASE 52:
TEXTOS

Usar textos con medidas realtivas con “rem” para poder escalar.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accesibilidad texto</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <h1>Soy un titulo ejemplo</h1>
        <section>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, culpa. Nesciunt soluta ratione unde explicabo molestiae. Libero accusamus iste recusandae dolores voluptate distinctio repellendus possimus. Optio, amet! Alias, cupiditate voluptatem!
            </p>
        </section>
    </main>
</body>
</html>

CSS

html {
    font-size: 62.5%;
}

h1 {
    font-size: 3rem;
}

p {
    font-size: 1.8rem;
}

Naudy José Romero Valero

Si aplicamos los texto desde el inicio con rem la accesibilidad de texto estará activado

Jeisson Espinosa

Información resumida de esta clase
#EstudiantesDePlatzi

El tamaño del texto lo debo manejar con medidas relativas, es decir, usar el rem para definir los tamaños
Si manejamos el tamaño del texto con dimensiones absolutas como son los px, no permitimos que nuestro proyecto tenga accesibilidad para algunas personas con problemas visuales

Cesar Augusto Suarez Medina