Las fuentes o tipos de letras en html son la que se utilizan en las páginas web, en este artículo verás los tipos de estas fuentes y cuál es su función, estilos y tamaños, para que configures tu página web con estos estilos de letras y sea mas agradable para los internautas.
Índice
- 1 Tipos de letras en html para usar en tu sitio web
- 2 Mejores fuentes HTML y seguras para el sitio web
- 3 ¿Que se necesita para trabajar con los tipos de letras en HTML?
Tipos de letras en html para usar en tu sitio web
En la actualidad existen muchos tipos de letras en html para crear una página web completa sin conocimiento sobre HTML, pero en la realidad, aunque en el momento de diseñar nos vamos a conseguir con percances, en lo que pensaremos si tuviéramos un poco de conocimiento de este código de seguro solucionaría algunas inconvenientes y al mismo tiempo nos ahorraríamos más tiempo.
Para todo aquel que se interese en realizar páginas web utilizando algún tipos de letra en html es imprescindible tener conocimiento básico sobre este código, de esta manera lograremos entender cómo están creadas las web, desarrollar sitios web con más flexibilidad y mejor acabado. Antes de dar a conocer cuáles son daremos algunos conceptos.
¿Qué es el código HTML?
Es un lenguaje de programación que se usa para el desarrollo de páginas web, las siglas HTML significa HyperText Markup Languaje (lenguaje de marca de hipertexto). Este código permite organizar el texto de los documentos y se fundamenta en etiquetas como debe mostrarse el contexto y los atributos que pueden tomar dichas etiquetas.
El W3C o World Wide Web Consortium, dirección que se encarga a la tipificación de los datos de la red utiliza HTML como el código mas significativo, de manera que se puede decir que casi todos los navegadores y exploradores se han amoldado. Es decisivo, siendo así para el crecimiento y la expansión de la red.
¿Cómo funciona el código html?
Este código trabaja en fundamento a marcadores escritos (que se muestran entre comillas angulares: <html>), desde aquí se codifica el aspecto y orden interno de una página de internet, igualmente los scripts o prácticas que trabajan internamente en las mismas.
Este lenguaje se crea como ADN para las páginas Web, indicándole al navegador donde puede adquirir los recursos para su escritura y en qué alineación, sucesión y manera de implantarlo, por su puesto en seguimiento del código tal cual, el explorador nos da la experiencia de la navegación por la red. El lenguaje html trabaja basándose en un conjunto de elementos tales como:
Elementos. Los pilares básicos del código html, se usan para simbolizar el contenido y sus caracteres, también para determinar los factores del mismo código, con el punto de cierre o las necesidades exclusivas.
Atributo. Los detalles de acuerdo al valor, tonalidad, colocación, entre otros de los factores agregados en el lenguaje. Usualmente se basan en una cadena de instrucciones lógicas o numéricas.
En este vídeo verás a continuación un curso básico de html para que comiences en la construcción de tu página web:
¿Qué es una etiqueta html?
Son las instrucciones con que se compone el lenguaje, es decir las entradas que están entre las comillas angulares y que poseen un valor específico en el conjunto, que después será leído por el programa navegador y traducido en un portal web. Estas etiquetas deben abrir <> y después cerrar <> ya cuando ya se requieran, en el orden apropiado y la serie exacta y así no sucederán errores. A continuación algunos ejemplos:
- <html>: Este comando es el inicio a la cadena de instrucciones que es el lenguaje html y que se cierra con </html> cuando finaliza el documento de programación.
- <head>: El comando que puntualiza la cabecera del documento html, que se enlaza con el título de la ventana del navegador y posee subelementos como <title> (título), <link> (este es para vincular las hojas de estilo o modelos estéticos), <meta> (este es para referir información acerca de a la autoría del lenguaje).
- <img>: Este se refiere a imágenes y suele estar asistido de la ruta en donde esta se localiza.
- <a>: Es para implantar hipervínculos internos como externos, por medio de el atributo href y la dirección URL donde el vínculo llevará.
¿Por qué se debería prestar atención al código o a los tipos de letras en html?
De igual manera si estás al tanto o no, el código HTML ejerce un papel muy importante en nuestras páginas web. Si haces una elección adecuada, entonces puedes optimizar la estética de tu sitio web y dejar que los usuarios puedan leer el contenido con mucha más facilidad. Pero si por el contrario escoges erróneamente los tipos de letra en html inadecuada, es posible que tengas un resultado negativo en la apariencia de tu página y en legibilidad.
De igual forma, los tipos de letras en html tiene efectos en el rendimiento de una página web, así como positivo o negativamente, eso va a depender de si estás utilizando un código seguro o no.
¿Qué es un código seguro para la web?
En resumen, este término se usa para especificar una fuente que se establece universalmente en todos los dispositivos. Dado que se alojan localmente, tu página web tendría que cargarse con mucha más rapidez cuando usas una fuente segura para la red. Aunque tendrá efecto en última instancia al SEO, puesto que la rapidez de carga de la página es uno de los factores que se toman en consideración al catalogar las páginas en el SERP.
Y por ello es que es recomendable usar tipos de caracteres para la titulación que sean seguros para el ciberespacio, para certificar que tus usuarios logren visualizar el contenido con facilidad y que el rendimiento de tu página no tenga que ser afectado negativamente.
¿Cuáles son las cinco familias de letras?
En la tipografía, cada letra pertenece a una de las cinco familias de fuentes distribuidas en función de sus semejanzas en diseño, las cuales son:
- Cursiva: (por ejemplo, french script) las letras en la familia cursiva simulan la escritura humana y las letras se unen normalmente de una forma muy expresiva, hay muchos que relacionan las letras cursivas con un escrito y un trazo más rápidos.
- Fantasía: (por ejemplo, comics sans) las letras que pertenecen a esta familia, de fantasía o fantasy, normalmente poseen elementos llamativos en cada una de las letras, pero igualmente constituyen las letras. Hay libros y películas de fábula que utilizan esta clase de carácter de esta familia de fuentes para sus títulos, para darle más fuerza al matiz de sus contenidos.
- Serif: (por ejemplo, Courier New) la peculiaridad más sobresaliente de este tipo de fuentes es una pequeña línea en lo último de un trazo grande en una letra o símbolo, esta clase de fuente para títulos genera una impresión de formalidad y elegancia. Gran variedad de páginas web usan primordialmente Serif en el texto de su contenido.
- Sans-serif: (por ejemplo, frutiger) en esta clase de letras al contrario de Serif no posee la línea pequeña añadida a cada fuente. Asimismo gran parte de estas letras de este conjunto suelen poseer un ancho de trazo parecido, esta característica la hace moderna y minimalista.
- Monospace (por ejemplo, Courier) cada carácter de esta familia de fuentes Monospace ocupan el mismo espacio horizontal exacto, ya que las letras son estables y sencillas de diferenciar de vez en cuando se utilizan con máquinas de escribir y terminales de computadoras.
¿Qué letra debo utilizar para mi sitio web?
Es conveniente y muy importante que se use una fuente segura para web porque de esta manera estarás al tanto de que es compatible con distintos dispositivos de manera determinada.
Igualmente es muy significativo la escogencia de una letra que se apropie al estilo y tono de escrito de tu página web, esto te servirá para hacerte ver más profesional y optimiza la lectura del usuario.
Lo más importante es que se puede conseguir de manera muy fácil los caracteres para títulos o fuentes HTML más apropiadas para tu página web en nuestras sugerencias estas son las siguientes.
Si eres una persona que esta empezando a crear tu página te invitamos a que leas este otro artículo Programador wordpress ¿qué es y dónde encontrarlo? que podría ser de más ayuda para y conocimiento para tu proyecto.
A continuación en este vídeo conocerás que es html, sus concepto y como funciona:
https://www.youtube.com/watch?v=av_PL4_jz1I
Mejores fuentes HTML y seguras para el sitio web
Todo el conjunto de tipos de letras en html son seguras para las páginas web, por lo tanto no tendrías que inquietarte por problemas de afinidad o rendimiento, a continuación conoceremos las 20 mejores fuentes para sitios web:
- Arial: esta una de las letras más popular, así como en medios impresos como en línea, así mismo es la letra predeterminada de Google Docs, un famoso paquete de ofimática en linea, hay unos cuantos críticos opinan que esta letra perteneciente al conjunto sans-serif es una apuesta segura para muchos.
- Times New Roman: estas fuentes son una variación de la antigua fuente Times del conjunto Serif. Con su apariencia profesional, se ha convertido en la elección favorita para los medios impresos y el contenido más formal. Asimismo, este tipo de carácter favorece a los sitios web de noticias e instauraciones similares.
- Helvética: Los diseñadores adoran Helvetica puesto que es equilibrado y adecuada para cualquier clase de trabajo. Es por eso que muchas marcas de popularidad, como Jeep, Kawasaki, Motorola y BMW, eligieron esta fuente. Estamos seguros de que las personas no pueden equivocarse al escoger Helvetica, independientemente de los propósitos.
- Times: Inicialmente, Times se usaba para editar la mayoría de los periódicos, y a partir entonces se ha coligado con el prensa y la caligrafía académica. Por lo tanto, si deseas añadir un emoción habitual o formal a tu espacio web, esta letra es una elección perfecta.
- Courier New: Esta fuente es una opción a Courier, que es más delgada y visualmente más atractiva en la pantalla. Por esa razón, los aparatos electrónicos presentan principalmente Courier New. Pero como del mismo modo es una letra de máquina de escribir, debería verse bien en sitios web que necesitan un diseño de la vieja escuela.
- Verdana: Esta clase de carácter es sencillo de deletrear, inclusive cuando se utilizan tamaños de letra pequeños o cuando se muestra en pantallas de baja resolución. Esto hace que Verdana sea una estupenda fuente de pantalla. Aunque, una gran compañía como IKEA utiliza Verdana no solamente para su sitio sino igualmente para sus catálogos impresos. De tal forma que si estás buscando fuentes HTML con una gran legibilidad, debes probar esta clase de carácter.
- Courier: Se puede concretar que Courier es la letra más famosa de del conjunto monospace, todos los sistemas operativos vienen empaquetados con ella. Este ejemplo de fuente HTML incluso ha sido un estándar para los guiones de películas. Por lo tanto, si tu página web tiene que ver con ese tema, definitivamente debes pensar en añadir Courier a tu web.
- Arial Narrow: Es una de las versiones de Arial que ofrece un diseño más distinguido que el original. Los usuarios pueden hallar este carácter como opción preinstalada en una diversidad de sistemas operativos. Al igual que su antecesor, Arial Narrow es versátil y se acopla a distintas clases de sitio web.
- Candara: Microsoft Vista es el primer sistema operativo que llevó a Candara a la fuente fundamental. Es compatible con el método de escritura de contenido ClearType de Windows, que debería optimizar la legibilidad del contexto en pantallas LCD.
- Ginebra: Ginebra pertenece al conjunto Sans-serif y fue desarrollada originariamente por Apple. Parecido a cualquier clase de carácter en este grupo de fuentes, Ginebra ofrece una apariencia legible y innovadora para tu sitio web o blog.
- Calibri: Es la letra predeterminada para Microsoft Office. Con Microsoft Windows aún en la cúspide de las tendencias de asignación de mercado de los sistemas operativos de oficina, las personas no deberían tener problemas para percibir este carácter HTML en sus exploradores.
- Optima: Optima se inspira en las letras mayúsculas romanas clásicas. Se utiliza en muchos lugares, comenzando con señales de tránsito hasta logotipos de productos de belleza. Esta fuente HTML es refinado y en gran medida perceptible, lo cual es idóneo para lograr que tu contenido destaque.
- Cambria: Calibri, Candara y Cambria pertenecen al género de letras ClearType que Microsoft creó. Con proporciones estrechamente uniformes, Cambria fue creada para un magnífico aprendizaje de leída en pantalla, inclusive cuando se muestra en menor tamaño.
- Garamond: Garamond es la clase de carácter tradicional para muchos libros impresos. Los diseñadores de edición lo consideran una de las mejores opciones, gracias a su apariencia atemporal y buena legibilidad. Estamos convencidos de que Garamond es apropiado para añadir un tono envejecido a un espacio web o blog.
- Perpetua: La fuente proviene del pensamiento de un artista inglés que fue influenciado por letras de monumentos. Las características formales alentaron a Penguin Classics y a la Academia de Pennsylvania a mostrar a Perpetua en sus publicidades. Con todo esto, una página educativa o informativa definitivamente puede beneficiarse de esta fuente HTML.
- Mónaco: MacOS X se ejecuta con Mónaco, un integrante del grupo monospace, para el Terminal y Xcode. Cuenta con un diseño característico, que nos permite diferenciar letras de apariencia semejante. Utiliza Mónaco en tu espacio web si con frecuencia escribes códigos y no quieres que los lectores se confundan ni en una solo carácter.
- Didot: Didot es una letra serif que ha sido descrita como neoclásica por muchos críticos, lo que significa que tiene un diseño conservador aunque con un toque innovador. Lo usa CBS News y The Late Show con Stephen Colbert. Este ejemplo de letra es destacado por su alta disparidad y mayor estrés, lo que lo impulsa a sobresalir.
- Brush Script MT: Este carácter presenta un modo de escritura apoyado en técnicas de transcripción a palma. De esta forma, Brush Script MT se traduce en una fuente HTML bonita pero accesible para tu sitio. Sin embargo Brush Script MT es distinguido y refinado, podría ser más apropiado para las notas de impresor y usos similares.
- Lucida Brigth: Lucida Bright es una de las versiones de fuente Lucida con más desigualdad. El ejemplo de carácter angosto permite el uso práctico del área y puede ser perfecto para manuales o revistas. Un usuario célebre de este modelo de carácter es Scientific American Magazine.
- Copperplate: Los diseñadores de Copperplate querían que la letra se usará solamente para encabezados o títulos, por lo que nada más incluye letras mayúsculas. El ejemplo de carácter se hizo afamado posteriormente de que “Quién quiere ser millonario” hiciera de la fuente su etiqueta registrada.
Tipos de letras en html que no se deben usar
Mención deshonrosa (Comic Sans): Los usuarios de Internet comparten una cuestión en común: odian la letra Comic Sans. Las personas consideran entre los tipos de letras en html ejemplo de letra html a ésta como una infantil, por nada profesional, escasamente atrayente y tonto. Se ha transformado en una especie de meme a lo largo de los años. Por consiguiente, no recomendamos usarla. Hay muchas más opciones que harán que tu pagina se vea atractiva que con Comic Sans.
Es importante este tipo de códigos a la hora de programar, pero también no menos importante y tenemos que saber cómo ¿Cómo registrar un dominio correctamente?, ya que esto servirá para que se muestre nuestra pagina en la web.
¿Que se necesita para trabajar con los tipos de letras en HTML?
Un Espacio Web consta de varios archivos: archivos de contenido, carácter, hojas de estilo, contenido multimedia, y así entre otros. Cuando estás construyendo un Sitio Web, inicialmente debemos preparar todos los archivos en el computador particular utilizando cierto método, asegurándonos de que estos archivos pueden comunicarse entre sí, y de que todos tus contenidos están correctos previamente de subirlos a un servidor.
Para crear un Espacio Web, recurriremos normalmente a un conjunto de diversas aplicaciones. Para nuestros propósitos nos centraremos en algunas alternativas que debemos reinstalar en nuestro computador, primeramente antes de seguir.
- Una computadora
- Navegador
- Editor de páginas web
- Editor de imágenes
- Aplicación FTP
HTML y otras normas
Un página web es un archivo con contexto en el que se irán insertando etiquetas HTML, para que ese englobado pueda ser descifrado por nuestro navegador web. Existen diferentes versiones de código HTML, pero HTML 5.0, es la que vamos a emplear. Otro paquete de normas denominadas CSS (Cascade style Sheet) o plantillas, son archivos en el cual se almacenan estilos de letras que se usarán en las páginas web.
Ventajas y desventajas del lenguaje HTML
Siguen habiendo versiones actualizadas con nuevas funcionalidades. Esto, ya que es un lenguaje muy utilizado por programadores, principalmente, para crear proyectos web. Se pueden hallar algunas ventajas y desventajas de su uso.
1. Ventajas: Permite detallar hipertexto, tiene un desarrollo acelerado, lo reconoce y admite cualquier clase de navegador y permite archivos pequeños.
2. Desventajas: El diseño es más pausado, tiene un lenguaje detenido y las etiquetas son limitadas.
